-
if (aIScore[i][j][l] > max) { max = aIScore[i][j][l]; u = i; v = j; } } } } } } for (var i = 0; i <= this.num; i++) { for (var j = 0; j <= this.num; j++) { if (this.chessBoard[i][j] === 0) { for (var l = 1; l < 5; l++) { if (myScore[i][j][l] === max) { for (var m = 1; m < 5; m++) { if (aIScore[i][j][m] > maxScore) { maxScore = aIScore[i][j][m] u = i; v = j; } else if (myScore[i][j][m] === maxScore) { for (var k = 0; k < this.count; k++) { if (this.myWin[k] === l) { for (var x = 0; x <= this.num; x++) { for (var y = 0; y <= this.num; y++) { if (this.wins[x][y][k] && this.chessBoard[x][y] === 1) { q = x; w = y; } } }查看全部
-
for (var i = 0; i <= this.num; i++) { for (var j = 0; j <= this.num; j++) { if (this.chessBoard[i][j] === 0) { for (var k = 0; k < this.count; k++) { if (this.wins[i][j][k]) { if (this.myWin[k] === 1) { myScore[i][j][1] += 200; } else if (this.myWin[k] === 2) { myScore[i][j][2] += 600; } else if (this.myWin[k] === 3) { myScore[i][j][3] += 4000; } else if (this.myWin[k] === 4) { myScore[i][j][4] += 20000; } if (this.otherWin[k] === 1) { aIScore[i][j][1] += 220; } else if (this.otherWin[k] === 2) { aIScore[i][j][2] += 620; } else if (this.otherWin[k] === 3) { aIScore[i][j][3] += 5500; } else if (this.otherWin[k] === 4) { aIScore[i][j][4] += 50000; } } for (var l = 1; l < 5; l++) { if (myScore[i][j][l] > max) { max = myScore[i][j][l]; u = i; v = j; }查看全部
-
if (!that.over) { console.log(that.type) that.type = !that.type; console.log(that.type) if (that.isAI) { that.isComput(); } } }; }, // 電腦走棋 isComput: function () { var aIScore = []; // 電腦分?jǐn)?shù)統(tǒng)計(jì) 人機(jī)對(duì)戰(zhàn)時(shí)使用 var myScore = []; // 玩家1分?jǐn)?shù)統(tǒng)計(jì) 人機(jī)對(duì)戰(zhàn)時(shí)使用 var max = 0; // 統(tǒng)計(jì)最高分?jǐn)?shù) var maxScore = 0; // 統(tǒng)計(jì)最高分?jǐn)?shù) var u = 0, v = 0, q = 0, w = 0; for (var i = 0; i <= this.num; i++) { aIScore[i] = []; myScore[i] = []; for (var j = 0; j <= this.num; j++) { aIScore[i][j] = []; myScore[i][j] = []; for (var k = 1; k < 5; k++) { aIScore[i][j][k] = 0; myScore[i][j][k] = 0; } } }查看全部
-
for (var k = 0; k < that.count; k++) { if (that.type && that.wins[i][j][k]) { that.otherWin[k] += 999; if (that.myWin[k] < 999) { that.myWin[k]++; if (that.myWin[k] >= 5) { alert('你贏了!'); that.over = true; that.admit = false; that.admitted.classList.add('admit_btn'); that.admitted.classList.remove('start_btn'); that.back.classList.add('admit_btn'); that.back.classList.remove('start_btn'); } } } else if (!that.type && that.wins[i][j][k] && !that.isAI) { that.myWin[k] += 999; if (that.otherWin[k] < 999) { that.otherWin[k]++; if (that.otherWin[k] >= 5) { alert('你輸了!'); that.over = true; that.admit = false; that.admitted.classList.add('admit_btn'); that.admitted.classList.remove('start_btn'); that.back.classList.add('admit_btn'); that.back.classList.remove('start_btn'); } } } }查看全部
-
for (var i = 0; i < this.count; i++) { this.myWin[i] = 0; this.otherWin[i] = 0; } } // 判斷是否悔棋 if (this.takeBack) { for (var i = 0; i < this.chessList.length; i++) { this.oneStep(this.chessList[i][0], this.chessList[i][1], this.chessList[i][2], this.backGauge); } } // 綁定canvas點(diǎn)擊事件 this.chessDom.onclick = function (e) { if (that.over) { return; } var x = e.offsetX; var y = e.offsetY; var i = Math.round((x - backGauge) / residue); var j = Math.round((y - backGauge) / residue); if (i > that.num || j > that.num || that.chessBoard[i][j] !== 0) { return; } else { that.takeBack = false; if (that.type) { that.chessBoard[i][j] = 1; } else { that.chessBoard[i][j] = 2; } } that.chessList.push([i, j, that.type]); that.oneStep(i, j, that.type, backGauge);查看全部
-
// 第一種贏法---所有5子豎線 for (var i = 0; i <= this.num; i++) { for (var j = 0; j <= this.num - 4; j++) { for (var k = 0; k <= 4; k++) { this.wins[i][j + k][this.count] = true; } this.count++; } } // 第二種贏法---所有5子橫線 for (var i = 0; i <= this.num; i++) { for (var j = 0; j <= this.num - 4; j++) { for (var k = 0; k <= 4; k++) { this.wins[j + k][i][this.count] = true; } this.count++; } } // 第三種贏法---所有5子斜線 for (var i = 0; i <= this.num - 4; i++) { for (var j = 0; j <= this.num - 4; j++) { for (var k = 0; k <= 4; k++) { this.wins[i + k][j + k][this.count] = true; } this.count++; } } // 第四種贏法---所有5子反斜線 for (var i = 0; i <= this.num - 4; i++) { for (var j = this.num; j >= 4; j--) { for (var k = 0; k <= 4; k++) { this.wins[i + k][j - k][this.count] = true; } this.count++; } }查看全部
-
// 畫棋盤 darwChessboard: function () { var residue = Math.floor((this.windowWidth - 50) / (this.num + 1)); this.residue = residue; var that = this; var backGauge = (this.windowWidth - 50 - residue * this.num) / 2; this.backGauge = backGauge; for (var k = 0; k <= this.num; k++) { this.context.moveTo(backGauge,backGauge + residue * k); this.context.lineTo(backGauge + residue * this.num,backGauge + residue * k); this.context.stroke(); this.context.moveTo(backGauge + residue * k,backGauge); this.context.lineTo(backGauge + residue * k,backGauge + residue * this.num); this.context.stroke(); }; if (!this.takeBack) { for (var f = 0; f <= this.num; f++) { this.chessBoard[f] = []; this.wins[f] = []; for (var s = 0; s <= this.num; s++) { this.chessBoard[f][s] = 0; this.wins[f][s] = []; } }查看全部
-
if (this.chessList.length > 0) { deleteItem = this.chessList.pop(); for (var i = 0; i < this.count; i++) { if (deleteItem[2]) { if (this.myWin[i] && this.wins[deleteItem[0]][deleteItem[1]][i]) { if (this.myWin[i] < 999) { this.myWin[i]--; } this.otherWin[i] -= 999; } } else { if (this.otherWin[i] && this.wins[deleteItem[0]][deleteItem[1]][i]) { if (this.otherWin[i] < 999) { this.otherWin[i]--; } this.myWin[i] -= 999; } } } this.chessBoard[deleteItem[0]][deleteItem[1]] = 0; } else { this.type = !this.type; } this.resetFn(); },查看全部
-
// 為canvas添加背景圖片 var logo = document.getElementById('img'); this.context.drawImage(logo, 0, 0, this.windowWidth - 50, this.windowWidth - 50) // 畫棋盤 this.darwChessboard(); }, // 悔棋 takeBackFn: function () { if (this.takeBack && this.chessList.length > 0) { return; } this.takeBack = true; var deleteItem = this.chessList.pop(); this.chessBoard[deleteItem[0]][deleteItem[1]] = 0; for (var i = 0; i < this.count; i++) { if (deleteItem[2]) { if (this.myWin[i] && this.wins[deleteItem[0]][deleteItem[1]][i]) { if (this.myWin[i] < 999) { this.myWin[i]--; } this.otherWin[i] -= 999; } } else { if (this.otherWin[i] && this.wins[deleteItem[0]][deleteItem[1]][i]) { if (this.otherWin[i] < 999) { this.otherWin[i]--; } this.myWin[i] -= 999; } } }查看全部
-
// 開(kāi)始 startFn: function () { if (this.start) { return; } var isComputAI = document.getElementsByClassName('active')[0].getAttribute('data-type'); if (isComputAI === '1') { this.isAI = true; } this.over = false; this.start = true; this.startBtn.classList.add('admit_btn'); this.startBtn.classList.remove('start_btn'); this.admitted.classList.remove('admit_btn'); this.admitted.classList.add('start_btn'); this.back.classList.remove('admit_btn'); this.back.classList.add('start_btn'); this.resetting.classList.add('reset_btn'); this.resetting.classList.remove('admit_btn'); this.admit = true; this.reset = true; }, // 重置 resetFn: function () { // 獲取canvas實(shí)例并自適應(yīng) var chessDom = document.getElementById('chess'); this.chessDom = chessDom; this.context = chessDom.getContext('2d'); this.context.strokeStyle = '#BFBFBF';查看全部
-
// 點(diǎn)擊重置按鈕 this.resetting.onclick = function () { if (!that.reset) { if (that.over && !that.start) { that.tip = '游戲未開(kāi)始'; } alert(that.tip); return; } that.initData(); that.startBtn.classList.remove('admit_btn'); that.startBtn.classList.add('start_btn'); that.admitted.classList.add('admit_btn'); that.admitted.classList.remove('start_btn'); that.back.classList.add('admit_btn'); that.back.classList.remove('start_btn'); that.resetting.classList.remove('reset_btn'); that.resetting.classList.add('admit_btn'); that.resetFn(); } // 對(duì)戰(zhàn)模式選擇 document.getElementsByClassName('text_ct')[0].onclick = function (e) { if (that.start) { return; } var index = Number(e.target.getAttribute('data-type')); if (index === that.index) { return; } var children = this.children; children[that.index].classList.remove('active'); children[index].classList.add('active'); that.index = index; } },查看全部
-
// 初始化方法 init: function () { this.initData(); this.initCanvasData(); // 初始化canvas數(shù)據(jù) }, initCanvasData: function () { var that = this; this.resetFn(); // 點(diǎn)擊開(kāi)始按鈕 this.startBtn.onclick = function () { that.startFn(); } // 點(diǎn)擊認(rèn)輸按鈕 this.admitted.onclick = function () { if (!that.admit) { if (that.over && that.start) { that.tip = '游戲已結(jié)束'; } else if (that.over && !that.start) { that.tip = '游戲未開(kāi)始'; } alert(that.tip); return; } if (that.type) { alert('你輸了') that.over = true; that.admit = false; that.admitted.classList.add('admit_btn'); that.admitted.classList.remove('start_btn'); } } // 點(diǎn)擊悔棋按鈕 this.back.onclick = function () { if (!that.admit) { if (that.over && that.start) { that.tip = '游戲已結(jié)束'; alert(that.tip); return; } else if (that.over && !that.start) { that.tip = '游戲未開(kāi)始'; alert(that.tip); return; } } that.takeBackFn(); }查看全部
-
window.onload = function () { var chess = { tip: '', // 提示消息 windowWidth: document.documentElement.clientWidth, // 當(dāng)前窗口可見(jiàn)寬度 windowHeight: document.documentElement.clientHeight, // 當(dāng)前窗口可見(jiàn)高度 startBtn: document.getElementById('startBtn'), // 開(kāi)始按鈕 admitted: document.getElementById('admitted'), // 認(rèn)輸按鈕 back: document.getElementById('back'), // 悔棋按鈕 resetting: document.getElementById('resetting'), // 重置按鈕 initData: function () { this.start = false; // true--游戲開(kāi)始（點(diǎn)擊開(kāi)始按鈕） false--游戲結(jié)束 this.reset = false; // 重置 true--重置按鈕可點(diǎn) false--重置按鈕不可點(diǎn) this.over = true; // true--游戲結(jié)束 false--游戲開(kāi)始中 this.admit = false; // true--認(rèn)輸按鈕可點(diǎn) false--認(rèn)輸按鈕不可點(diǎn) this.type = true; // true--黑子 false--白子 this.isAI = false; // true--人機(jī) false--非人機(jī) // 初始化落子二維數(shù)組 this.chessBoard = []; this.wins = []; // 贏法數(shù)組 this.count = 0; // 初始化棋盤變量 this.num = 15; // 贏法的統(tǒng)計(jì)數(shù)組 this.myWin = []; this.otherWin = []; this.index = 0; this.takeBack = false; this.chessList = []; },查看全部
-
body { background: #495C65; } canvas { display: block; margin: auto auto; box-shadow: -3px -3px 3px #EFEFEF, 5px 5px 5px #B9B9B9; /*background: url('../images/chess.jpg') no-repeat; background-size: cover;*/ } .chessTitle { margin: 10px 0px; line-height: 40px; text-align: center; font-family: '微軟雅黑'; font-size: 36px; } .chessTitle[data-text]::after { content: attr(data-text); color: #FFFFFF; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FBD1CE), to(rgba(204, 126, 11, 0))); } .btn_box { margin-top: 20px; } .btn_box .btn { margin: 10px auto; width: 3rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; } .btn_box .start_btn { background-color: darkorange; } .btn_box .reset_btn { background-color: aqua; } .btn_box .admit_btn { background-color: gainsboro; } .text_ct { height: 2rem; line-height: 2rem; text-align: center; color: #FFFFFF; } .active { background: #F99707; }查看全部
-
<!DOCTYPE HTML> <html> <head> <title>五子棋</title> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <link rel="stylesheet" href="./css/chess.css"/> </head> <body> <div id="chessTitle" class="chessTitle" data-text="五子棋"></div> <canvas id="chess"></canvas> <div class="btn_box"> <div class="text_ct"> <span class="active" data-type="0">雙人對(duì)戰(zhàn)</span> <span data-type="1">人機(jī)對(duì)戰(zhàn)</span> </div> </div> <div class="btn_box"> <div id="startBtn" class="btn start_btn">開(kāi)始</div> <div id="admitted" class="btn admit_btn">認(rèn)輸</div> <div id="back" class="btn admit_btn">悔棋</div> <div id="resetting" class="btn admit_btn">重置</div> </div> <img id="img" src="images/chess.jpg" ></img> <script src="./js/chess.js" type="text/javascript"></script> </body> </html>查看全部
舉報(bào)
0/150
提交
取消