原生JavaScript實現五子棋游戲
本文實例為大家分享了JavaScript實現五子棋游戲的具體代碼，供大家參考，具體內容如下
1.HTML部分
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no'> <title>五子棋</title> <style> * { margin: 0px; padding: 0px; } .box { border-spacing: 0px; border: 1px solid #3c3c3c; background-color: #e1e1e2; margin: auto; }.piece { border-spacing: 0px; border: 1px solid;} </style></head><body> <script type='text/javascript' src='http://m.b3g6.com/bcjs/Gobang.js'></script></body></html>
2.JavaScript部分
var ScreenWidth = { documentWidth: 500, containerWidth: 400, // 容器默認寬度 cellWidth: 20 // 單元格寬度}if (document.documentElement.clientWidth < 500) { ScreenWidth.documentWidth = document.documentElement.clientWidth; ScreenWidth.containerWidth = ScreenWidth.documentWidth * 0.8; ScreenWidth.cellWidth = ScreenWidth.containerWidth * 0.05;}//常量var reg = /d{1,2}/g;var white = []; // 放白子var black = []; // 放黑子var tempKey = false; // 判斷是走黑子還是白子var notOver = true; // 判斷游戲是否結束var tips = '白棋走'; // 提示走棋var count = 0;//相連的個數var bv = false; // 黑棋勝利var wv = false; // 白棋勝利 var yCanWin = [];// 同一豎元素存放的數組var xCanWin = [];// 同一橫元素存放的數組var xyCanWin = [];// 同一正斜存放的數組var yxCanWin = [];// 同一反斜存放的數組// 用計時器監聽是否勝利var time = setInterval(function () { if (bv) { tips = '黑棋勝利'; document.getElementsByTagName('span')[0].innerText = tips; for (var i = 0; i < document.getElementsByClassName('pieceBox').length; i++) { document.getElementsByClassName('pieceBox')[i].onclick = null; } clearInterval(time); } if (wv) { tips = '白棋勝利'; document.getElementsByTagName('span')[0].innerText = tips; for (var i = 0; i < document.getElementsByClassName('pieceBox').length; i++) { document.getElementsByClassName('pieceBox')[i].onclick = null; } clearInterval(time); }}, 100);newGame();// 開始游戲function newGame() { if (document.getElementsByTagName('table').length) { for (var i = 0; i < document.getElementsByTagName('table').length; i++) { document.getElementsByTagName('table')[i].remove(); } } // 初始化以下內容 bgInit(); pieceInit(); spanFn(); white = []; black = []; tempKey = false; notOver = true; tips = '白棋走'; count = 0; bv = false; xCanWin = []; yCanWin = []; xyCanWin = []; yxCanWin = [];}function spanFn() { var span = document.createElement('span'); document.body.insertBefore(span, document.getElementsByTagName('script')[0]); span.innerText = tips;}// 棋盤初始化function bgInit() { var table = document.createElement('table'); table.className = 'box' for (var y = 0; y < 20; y++) { var tr = document.createElement('tr'); for (var x = 0; x < 20; x++) { var td = '<td class=’box-' + y + '-' + x + '’ style=’width: ' + ScreenWidth.cellWidth + 'px; height: ' + ScreenWidth.cellWidth + 'px;border:1px solid #9c9c9c’></td>'; tr.innerHTML += td; } table.appendChild(tr); } document.body.insertBefore(table, document.getElementsByTagName('script')[0]);}// 棋子初始化function pieceInit() { var table = document.createElement('table'); table.className = 'piece' table. + (ScreenWidth.containerWidth + 42) / 2 + 'px'; for (var y = 0; y < 20; y++) { var tr = document.createElement('tr'); for (var x = 0; x < 20; x++) { var td = '<td class=’piece-' + y + '-' + x + ' pieceBox’ style=’width: ' + ScreenWidth.cellWidth + 'px; height: ' + ScreenWidth.cellWidth + 'px;border:1px solid transparent;border-radius: 50%;’></td>'; tr.innerHTML += td; } table.appendChild(tr); } document.body.insertBefore(table, document.getElementsByTagName('script')[0]);}// 走棋for (var i = 0; i < document.getElementsByClassName('pieceBox').length; i++) { document.getElementsByClassName('pieceBox')[i].onclick = function () { if (tempKey) { this.style.backgroundColor = '#000';// 黑子 tempKey = false; black.push(this.className.match(reg)); victory(black, 0);//判斷黑棋勝利與否 if (notOver) {tips = tipsGo(tempKey);document.getElementsByTagName('span')[0].innerText = tips; } } else { this.style.backgroundColor = '#fff';// 白子 tempKey = true; white.push(this.className.match(reg)); victory(white, 1);//判斷白棋勝利與否 if (notOver) {tips = tipsGo(tempKey);document.getElementsByTagName('span')[0].innerText = tips; } } this.onclick = null;// 點擊之后取消點擊事件 }}// 提示走黑還是走白function tipsGo(tempKey) { if (tempKey) { return '黑棋走'; } else { return '白棋走'; }}/** *判斷各種贏的方式 *x代表很坐標，y代表縱坐標 *1.豎贏，就是x值相同，取y值排序后比較 *2.橫贏，就是y值相同，取x值排序后比較 *3.正斜贏，x+y相同的值，取x或y排序后比較 *4.反斜贏，x-y相同的值，取x或y排序后比較 */function victory(target, c) { if (target.length >= 5) { // 1.豎贏yCanWin for (var i = 0; i < target.length; i++) { for (var j = 0; j < target.length; j++) {if (target[j][1] == target[i][1]) { yCanWin.push(target[j]);//把x相同的值放入數組yCanWin} } yWin(yCanWin, c); yCanWin = []; } // 2.橫贏xCanWin for (var m = 0; m < target.length; m++) { for (var n = 0; n < target.length; n++) {if (target[n][0] == target[m][0]) { xCanWin.push(target[n]);//把y相同的值放入數組xCanWin} } xWin(xCanWin, c); xCanWin = []; } // 3.正斜贏xyCanWin（左下到右上） for (var a = 0; a < target.length; a++) { for (var b = 0; b < target.length; b++) {if (parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1])) { xyCanWin.push(target[b])} } yWin(xyCanWin, c); xyCanWin = []; } // 4.反斜贏yxCanWin（左上到右下） for (var v = 0; v < target.length; v++) { for (var w = 0; w < target.length; w++) {if (parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1])) { yxCanWin.push(target[w])} } xWin(yxCanWin, c); yxCanWin = []; } }}// 棋的豎贏條件(棋的正斜贏條件)function yWin(yCanWin, c) { // c = 0代表黑子 c = 1代表白子 var sortArray = [];//排序數組 for (var i = 0; i < yCanWin.length; i++) { sortArray.push(yCanWin[i][0]); } sortArray.sort(function (x, y) { return x - y; }); // 數組排序后，前數和后數加一相比(注意數值類型的轉換) for (var j = 0; j < sortArray.length; j++) { if (sortArray[j + 1]) { if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {count++; // 每有一個連續則加一，一次不連續就清零if (count == 4 && c == 0) { bv = true; notOver = false;// 游戲結束 return;} else if (count == 4 && c == 1) { wv = true; notOver = false; return;} } else {count = 0; } } } count = 0;}// 棋的橫贏條件(棋的反斜贏條件)function xWin(xCanWin, c) { var sortArray = []; for (var i = 0; i < xCanWin.length; i++) { sortArray.push(xCanWin[i][1]); } sortArray.sort(function (x, y) { return x - y; }); for (var j = 0; j < sortArray.length; j++) { if (sortArray[j + 1]) { if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {count++;if (count == 4 && c == 0) { bv = true; notOver = false; return;} else if (count == 4 && c == 1) { wv = true; notOver = false; return;} } else {count = 0; } } } count = 0;}
更多有趣的經典小游戲實現專題，分享給大家：
C++經典小游戲匯總
python經典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經典游戲 玩不停
java經典小游戲匯總
javascript經典小游戲匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備