基于JavaScript實(shí)現(xiàn)五子棋游戲

更新時(shí)間：2020年08月26日 09:53:45 作者：安靜的對(duì)折

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)五子棋的具體代碼，供大家參考，具體內(nèi)容如下

思路：

1、先用canvas畫五子棋的棋盤
2、獲取鼠標(biāo)點(diǎn)擊的位置
3、根據(jù)鼠標(biāo)點(diǎn)擊的位置判斷，并畫棋子
4、根據(jù)下的棋子判斷是否贏了

代碼：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
 * { 
 padding: 0; 
 margin: 0; 
 } 
 canvas { 
 margin: 10px; 
 border: 2px solid #000; 
 } 
 #box { 
 display: inline-block; 
 position: absolute; 
 margin-top: 200px; 
 margin-left: 100px; 
 } 
 span { 
 font: 24px "微軟雅黑"; 
 display: inline-block; 
 height: 50px; 
 } 
 input { 
 margin-top: 30px; 
 display: block; 
 width: 100px; 
 height: 50px; 
 font: 16px "微軟雅黑"; 
 color: #fff; 
 background-color: #0099cc; 
 } 
 </style> 
</head> 
<body> 
<canvas width="640" height="640" id="cas"> 
 您的瀏覽器不支持canvas，請(qǐng)升級(jí)到最新的瀏覽器 
</canvas> 
<div id="box"> 
 <span id="txt"></span> 
 <input type="button" id="btn" value="重新開始"/> 
 
</div> 
 
<script> 
 var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子 
 var isWin = false; //判斷是否結(jié)束，true結(jié)束，false沒有結(jié)束 
 var step = 40; //設(shè)置每個(gè)格子的寬高都是40 
 
 var txt = document.getElementById("txt"); 
 var btn = document.getElementById("btn"); 
 var cas = document.getElementById("cas");// 獲取畫布對(duì)象 
 var ctx = cas.getContext("2d"); //畫布上下文 
 
// 創(chuàng)建圖片對(duì)象 
 var img_b = new Image(); 
 img_b.src = "imgs/b.png";//設(shè)置黑棋圖片路徑 
 var img_w = new Image(); 
 img_w.src = "imgs/w.png";//設(shè)置白棋圖片路徑 
 
// 用二維數(shù)組來保存棋盤，0代表沒有走過，1為白棋走過，2為黑棋走過 
 var arr = new Array(15); //聲明一個(gè)一維數(shù)組 
 for (var i = 0; i < 15; i++) { 
 arr[i] = new Array(15); //每個(gè)值再聲明一個(gè)一維數(shù)組，這樣就組成了一個(gè)二維數(shù)組 
 for (var j = 0; j < 15; j++) { 
 arr[i][j] = 0; 
 } 
 } 
 
 //繪制棋盤 
 function drawLine() { 
 for (var i = 0; i < cas.width / step; i++) { 
 // 畫豎線 
 ctx.moveTo((i + 1) * step, 0); 
 ctx.lineTo((i + 1) * step, cas.height); 
 // 畫橫線 
 ctx.moveTo(0, (i + 1) * step); 
 ctx.lineTo(cas.width, (i + 1) * step); 
 ctx.stroke(); 
 } 
 } 
 //獲取鼠標(biāo)點(diǎn)擊的位置 
 cas.onclick = function (e) { 
 // 先判斷游戲是否結(jié)束 
 if (isWin) { 
 alert("游戲已經(jīng)結(jié)束，請(qǐng)刷新重新開始！"); 
 return 0; 
 } 
 //判斷棋子顯示的地方，四條邊上不顯示棋子， 
 //鼠標(biāo)點(diǎn)擊的位置減去邊框距離頁面的上和左的距離（10），減去一個(gè)格子寬高的一半（20） 
 var x = (e.clientX - 10 - 20) / 40; 
 var y = (e.clientY - 10 - 20) / 40; 
 
 //進(jìn)行取整來確定棋子最終顯示的區(qū)域 
 x = parseInt(x); 
 y = parseInt(y); 
 //如果超出棋盤或者在棋盤邊界直接返回，邊界上不能畫棋子 
 if(x < 0 || x >= 15 || y < 0 || y >= 15) { 
 return; 
 } 
 //進(jìn)行判斷該位置是否已經(jīng)顯示過棋子 
 if (arr[x][y] != 0) { 
 alert("你不能在這個(gè)位置下棋"); 
 return; 
 } 
 // 判斷是顯示黑子還是白子 
 if (flag) {//白子 
 flag = false; //將標(biāo)志置為false,表示下次為黑子 
 drawChess(1, x, y); //調(diào)用函數(shù)來畫棋子 
 
 } else {//黑子 
 flag = true; //將標(biāo)志置為true,表示下次為白子 
 drawChess(2, x, y); //調(diào)用函數(shù)來畫棋子 
 
 } 
 } 
 //畫棋子 
 function drawChess(num, x, y) { 
 //根據(jù)x和y確定圖片顯示位置,讓圖片顯示在十字線中間，因?yàn)橐粋€(gè)格子為40，圖片大小為30，所以40-30/2等于25，所以需要加上25 
 var x0 = x * step + 25; 
 var y0 = y * step + 25; 
 if (num == 1) { 
 //繪制白棋 
 ctx.drawImage(img_w, x0, y0); 
 arr[x][y] = 1; //白子 
 } else if (num == 2) { 
 // 繪制黑棋 
 ctx.drawImage(img_b, x0, y0); 
 arr[x][y] = 2; //黑子 
 } 
 //調(diào)用函數(shù)判斷輸贏 
 judge(num, x, y); 
 } 
 //判斷輸贏 
 function judge(num, x, y) { 
 var n1 = 0, //左右方向 
 n2 = 0, //上下方向 
 n3 = 0, //左上到右下方向 
 n4 = 0; // 右上到左下方向 
 //***************左右方向*************
 //先從點(diǎn)擊的位置向左尋找，相同顏色的棋子n1自加，直到不是相同顏色的棋子，則跳出循環(huán) 
 for (var i = x; i >= 0; i--) { 
 if (arr[i][y] != num) { 
 break; 
 } 
 n1++; 
 } 
 //然后從點(diǎn)擊的位置向右下一個(gè)位置尋找，相同顏色的棋子n1自加，直到不是相同顏色的棋子，則跳出循環(huán) 
 for (var i = x + 1; i < 15; i++) { 
 if (arr[i][y] != num) { 
 break; 
 } 
 n1++; 
 } 
 //****************上下方向************ 
 for (var i = y; i >= 0; i--) { 
 if (arr[x][i] != num) { 
 break; 
 } 
 n2++; 
 } 
 for (var i = y + 1; i < 15; i++) { 
 if (arr[x][i] != num) { 
 break; 
 } 
 n2++; 
 } 
 //****************左上到右下斜方向*********** 
 for(var i = x, j = y; i >=0, j >= 0; i--, j--) { 
 if (i < 0 || j < 0 || arr[i][j] != num) { 
 break; 
 } 
 n3++; 
 } 
 for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) { 
 if (i >= 15 || j >= 15 || arr[i][j] != num) { 
 break; 
 } 
 n3++; 
 } 
 //****************右上到左下斜方向*************
 for(var i = x, j = y; i >= 0, j < 15; i--, j++) { 
 if (i < 0 || j >= 15 || arr[i][j] != num) { 
 break; 
 } 
 n4++; 
 } 
 for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) { 
 if (i >= 15 || j < 0 || arr[i][j] != num) { 
 break; 
 } 
 n4++; 
 } 
 //用一個(gè)定時(shí)器來延時(shí)，否則會(huì)先彈出對(duì)話框，然后才顯示棋子 
 var str; 
 if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) { 
 if (num == 1) {//白棋 
 str = "白棋贏了，游戲結(jié)束！" 
 } else if (num == 2) {//黑棋 
 str = "黑棋贏了，游戲結(jié)束！" 
 } 
 txt.innerHTML = str; 
 isWin = true; 
 } 
 } 
 //重新開始 
 btn.onclick = function() { 
 flag = true; 
 isWin = false; 
 
 for (var i = 0; i < 15; i++) { 
 for (var j = 0; j < 15; j++) { 
 arr[i][j] = 0; 
 } 
 } 
 ctx.clearRect(0, 0, 640, 640); 
 txt.innerHTML = ""; 
 drawLine(); 
 } 
 drawLine(); 
</script> 
</body> 
</html>

代碼鏈接地址：五子棋demo

更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：

C++經(jīng)典小游戲匯總

python經(jīng)典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經(jīng)典游戲玩不停

javascript經(jīng)典小游戲匯總

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: