基于jquery實(shí)現(xiàn)五子棋游戲
更新時(shí)間：2022年05月09日 10:59:26 作者：boylzh
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下
花了一天時(shí)間完成一個(gè)簡單五子棋游戲（非人機(jī)）
html：
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <link rel="stylesheet" href="./index.css" rel="external nofollow" > ? ? <script src="./jquery-3.4.1.min.js"></script> ? ? <title>Document</title> </head> <body> ? ? <div id="five"> ? ? ? ? <header> ? ? ? ? ? ? <button id="begin">開始游戲</button> ? ? ? ? ? ? <button id="agin">重新游戲</button> ? ? ? ? ? ? <button id="regret">悔棋</button> ? ? ? ? </header> ? ? ? ? <div id="game"> ? ? ? ? </div> ? ? </div> ? ? <script src="./index.js"></script> </body> </html>
css：
*{
? ? padding: 0;
? ? margin: 0;
? ? box-sizing: border-box;
}
html,
body,
#five{ ?
? ? background:#ccc;
? ? height: 100%;
}
header{
? ? position: absolute;
? ? top: 20px;
? ? left: 50%;
? ? transform: translateX(-50%);
? ? margin: auto;
}
#game{
?? ?display:none;
? ? position: absolute;
? ? box-shadow:2px 2px 5px #333333;
? ? padding: 17px;
? ? top: 60px;
? ? border: 1px solid #ccc;
? ? left: 50%;
? ? transform: translateX(-50%);
? ? background: rgba(0, 0, 0, 0.2);
? ? box-sizing: border-box;
}
button{
? ? padding: 5px;
? ? cursor: pointer;
}
.qipan{
? ? box-shadow:-2px 1px 5px #333333;
? ? position: relative;
?
}
table{
? ? border-collapse: collapse;
? ? border-spacing: 0;
}
td{
? ? width: 35px;
? ? height: 35px;
? ? /* display: flex;
? ? justify-content: center;
? ? align-items: center; */?
? ? ?text-align: center;
}
span{
? ? display: inline-block;
? ? border-radius: 50%;?
? ? ?width: 28px;
? ? height: 28px;
? ? vertical-align: middle;
? ? cursor: pointer;
}
span::after{
? ? content: "";
? ? height: 0;
? ? display: inline-block;
? ? vertical-align: middle;
}
.table{
? ? border-color: black;
? ? background: url(./images/bg.jpg);
}
.black{
?? ?background: #000;/*
?? ?background: url(./images/black.jpg) no-repeat center center;
? ? background-size: cover;*/
? ? ?? ??? ?/*黑棋樣式*/
}
.white{
?? ?background: #fff;
? ? /*background: url(./images/white.jpg) no-repeat center center;
? ? background-size: cover;?? ?*/?? ??? ?/*白棋樣式*/
}
.tables{
? ? border-color: #ccc;
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? z-index: 3;
}
#xq-tips{
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? width: 100%;
? ? height: 100%;
? ? background: rgba(0, 0, 0, 0);
? ? display: none;
? ? z-index:999
}
.xq-txt{
? ? position: absolute;
? ? width: 300px;
? ? height: 150px;
? ? background: rgba(0, 0, 0, 0.5);
? ? top: 0;
? ? bottom: 0;
? ? right: 0;
? ? left: 0;
? ? margin: auto;
? ? color:#fff;
? ? font-size: 40px;
? ? text-align: center;
? ? line-height: 150px;
}
#agin{
? ? display: none;
}
#regret{
? ? display: none;
}js：
class Chess {
? ? constructor(ele) {
? ? ? ? this.ele = ele;
? ? ? ? this.init();
? ? }
? ? init() {
? ? ? ? this.arr = []; ? //記錄棋子
? ? ? ? this.render(); ? ?//渲染棋盤
? ? ? ? this.span = $("#tbodys span");
? ? ? ? let that = this
? ? ? ? $("#tbodys").on('click', 'tr td span', function () {
? ? ? ? ? ? that.click(this);?? ? //事件委托給span，點(diǎn)擊觸發(fā)click事件
? ? ? ? });
? ? ? ? $("#regret").on('click', function () {
? ? ? ? ? ? that.regret();?? ? //點(diǎn)擊悔棋
? ? ? ? })
? ? ? ? $("#agin").on('click', function () {
? ? ? ? ? ? that.agin(); ? //點(diǎn)擊重新開始
? ? ? ? })
? ? }
? ? render() {?? ??? ??? ?//渲染棋盤
? ? ? ? let qipan = $("<div>").addClass("qipan").appendTo($(this.ele));
? ? ? ? let table1 = $("<table><tbody id='tbody'>").addClass("table").attr("border", "1").appendTo($(qipan));
? ? ? ? let div = $("<div id='xq-tips'>").appendTo($(this.ele))
? ? ? ? $("<div class='xq-txt'>").appendTo($(div))
? ? ? ? for (let i = 0; i < 15; i++) {
? ? ? ? ? ? let tr1 = $("<tr>").appendTo($("#tbody"));
? ? ? ? ? ? for (let j = 0; j < 15; j++) {
? ? ? ? ? ? ? ? $("<td>").appendTo($(tr1));
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let table2 = $("<table><tbody id='tbodys'>").addClass("tables").attr("border", "0").appendTo($(this.ele));
? ? ? ? for (let i = 0; i < 16; i++) {
? ? ? ? ? ? let tr2 = $("<tr>").appendTo($("#tbodys"));
? ? ? ? ? ? for (let j = 0; j < 16; j++) {
? ? ? ? ? ? ? ? $("<td><span>").appendTo($(tr2));
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? click(_this) {
? ? ? ? this.ifs(_this)
? ? ? ? this.win();
? ? ? ? // console.log(this.arr);
? ? }
? ? ifs(_this) { ?//判斷下一手是黑棋還是白棋
? ? ? ? let num = $("span.black,span.white").length;
? ? ? ? $(this.span).each((index, item) => {
? ? ? ? ? ? if (item === _this) {?? ?
? ? ? ? ? ? ? ? this.arr.push(index);
? ? ? ? ? ? ? ? this.nums = index
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? if (num % 2 == 0) {?? ? //判斷棋盤上的黑棋與白棋總數(shù)，為偶時(shí)下一手黑棋
? ? ? ? ? ? $(_this).addClass("black");
? ? ? ? }
? ? ? ? else {?? ??? ? //否則下白棋
? ? ? ? ? ? if ($(_this).hasClass("black")) { }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? $(_this).addClass("white");
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? win() {
? ? ? ? let this_ = this;
? ? ? ? let brr = [], wrr = [];//定義空數(shù)組，存儲黑白棋，下標(biāo)
? ? ? ? $(this_.arr).each((index, item) => {
? ? ? ? ? ? if ($(this_.span[item]).hasClass("black")) { //遍歷黑白棋，分別存到數(shù)組中
? ? ? ? ? ? ? ? brr.push(item);
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? wrr.push(item)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? brr = brr.sort(function (a, b) {
? ? ? ? ? ? return a - b;
? ? ? ? })
? ? ? ? wrr = wrr.sort(function (a, b) { //將黑白棋按從小到大排序
? ? ? ? ? ? return a - b;
? ? ? ? })
? ? ? ? if (this.isInclude(brr, 1) || this.isInclude(brr, 16) || this.isInclude(brr, 17) || this.isInclude(brr, 15)) {?? ? //判斷勝負(fù)，將提示信息顯示
? ? ? ? ? ? $("#xq-tips").show();
? ? ? ? ? ? $(".xq-txt").html("黑棋勝利！");
? ? ? ? ? ? $("#regret").hide(); ?//隱藏悔棋按鈕
? ? ? ? }
? ? ? ? if (this.isInclude(wrr, 1) || this.isInclude(wrr, 16) || this.isInclude(wrr, 17) || this.isInclude(wrr, 15)) {
? ? ? ? ? ? $("#xq-tips").show();
? ? ? ? ? ? $(".xq-txt").html("白棋勝利！");
? ? ? ? ? ? $("#regret").hide();
? ? ? ? }
? ? }
? ? isInclude(brr, x) { ?//brr判斷的數(shù)組,x表示差值，判斷勝負(fù)
? ? ? ? for (let i = 0; i < brr.length; i++) {
? ? ? ? ? ? if (brr.includes(brr[i]) && brr.includes(brr[i] + x * 1) && brr.includes(brr[i] + x * 2) && brr.includes(brr[i] + x * 3) && brr.includes(brr[i] + x * 4)) {
? ? ? ? ? ? ? ? return true;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? regret() { ? ?//悔棋事件將數(shù)組中刪除對應(yīng)元素的下標(biāo)
? ? ? ? if (this.arr.length == 0) {
? ? ? ? ? ? return false;
? ? ? ? }
? ? ? ? let len = this.arr.length - 1;
? ? ? ? let num = this.arr[len]
? ? ? ? $(this.span[num]).removeClass("black white");
? ? ? ? this.arr.pop();
? ? }
? ? agin() {?? ? //點(diǎn)擊重新開始觸發(fā)的事件
? ? ? ? this.arr = [];?? ? //格式化存棋數(shù)組
? ? ? ? for (let i = 0; i < this.span.length; i++) {?? ?
? ? ? ? ? ? $(this.span[i]).removeClass("black white");?? ? //清空黑白棋
? ? ? ? }
? ? ? ? $("#xq-tips").hide();?? ? //將提示勝敗信息隱藏并情況內(nèi)容
? ? ? ? $(".xq-txt").html("");
? ? ? ? $("#regret").show();?? ? //悔棋按鈕顯示
? ? }
}
$("#begin").on('click', function () {
? ? $("#regret").show(); ?//當(dāng)游戲開始時(shí)將悔棋按鈕顯示
? ? $(this).hide(); ?//將游戲開始按鈕隱藏
? ? $("#agin").show();?? ??? ??? ?
? ? $("#game").show();?? ? //顯示重新開始游戲按鈕，棋盤
? ? new Chess($("#game")) //實(shí)例對象，開始游戲
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于jquery編寫的橫向自適應(yīng)幻燈片切換特效的實(shí)例代碼
全屏自適應(yīng)jquery焦點(diǎn)圖切換特效，在IE6這個(gè)蛋疼的瀏覽器兼容性問題上得到了和諧，兼容IE6。適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關(guān)代碼：2013-08-08
基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理,需要的朋友可以參考下2014-12-12
jquery+CSS3實(shí)現(xiàn)淘寶移動(dòng)網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS3實(shí)現(xiàn)淘寶移動(dòng)網(wǎng)頁菜單效果,實(shí)例分析了jquery操作頁面樣式動(dòng)態(tài)變換及熱區(qū)的選擇技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
基于jQuery+JSON的省市二三級聯(lián)動(dòng)效果
本文給大家分享的是利用jQuery插件，通過讀取JSON數(shù)據(jù)，實(shí)現(xiàn)無刷新動(dòng)態(tài)下拉省市二（三）級聯(lián)動(dòng)效果，十分的簡單實(shí)用，效果也非常棒，有需要的小伙伴可以參考下。2015-06-06
淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
由于項(xiàng)目原因，需要實(shí)現(xiàn) 點(diǎn)擊按鈕后，顯示友好的 loading 信息，并且為模態(tài)的。2010-08-08
jQuery中removeProp()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeProp()方法用法,實(shí)例分析了removeProp()方法的功能、定義及刪除由prop()方法設(shè)置的屬性時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
Jquery Ajax 學(xué)習(xí)實(shí)例2 向頁面發(fā)出請求 返回JSon格式數(shù)據(jù)
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用2010-03-03
本篇文章主要是對jQuery中.live()方法的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jquery帶動(dòng)畫效果幻燈片特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08