詳解基于JavaScript如何實現(xiàn)五子棋游戲

小編這次要給大家分享的是詳解基于JavaScript如何實現(xiàn)五子棋游戲，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)海珠,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

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

思路：

1、先用canvas畫五子棋的棋盤
2、獲取鼠標點擊的位置
3、根據(jù)鼠標點擊的位置判斷，并畫棋子
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，請升級到最新的瀏覽器 
</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è)置每個格子的寬高都是40 
 
 var txt = document.getElementById("txt"); 
 var btn = document.getElementById("btn"); 
 var cas = document.getElementById("cas");// 獲取畫布對象 
 var ctx = cas.getContext("2d"); //畫布上下文 
 
// 創(chuàng)建圖片對象 
 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); //聲明一個一維數(shù)組 
 for (var i = 0; i < 15; i++) { 
 arr[i] = new Array(15); //每個值再聲明一個一維數(shù)組，這樣就組成了一個二維數(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(); 
 } 
 } 
 //獲取鼠標點擊的位置 
 cas.onclick = function (e) { 
 // 先判斷游戲是否結(jié)束 
 if (isWin) { 
 alert("游戲已經(jīng)結(jié)束，請刷新重新開始！"); 
 return 0; 
 } 
 //判斷棋子顯示的地方，四條邊上不顯示棋子， 
 //鼠標點擊的位置減去邊框距離頁面的上和左的距離（10），減去一個格子寬高的一半（20） 
 var x = (e.clientX - 10 - 20) / 40; 
 var y = (e.clientY - 10 - 20) / 40; 
 
 //進行取整來確定棋子最終顯示的區(qū)域 
 x = parseInt(x); 
 y = parseInt(y); 
 //如果超出棋盤或者在棋盤邊界直接返回，邊界上不能畫棋子 
 if(x < 0 || x >= 15 || y < 0 || y >= 15) { 
 return; 
 } 
 //進行判斷該位置是否已經(jīng)顯示過棋子 
 if (arr[x][y] != 0) { 
 alert("你不能在這個位置下棋"); 
 return; 
 } 
 // 判斷是顯示黑子還是白子 
 if (flag) {//白子 
 flag = false; //將標志置為false,表示下次為黑子 
 drawChess(1, x, y); //調(diào)用函數(shù)來畫棋子 
 
 } else {//黑子 
 flag = true; //將標志置為true,表示下次為白子 
 drawChess(2, x, y); //調(diào)用函數(shù)來畫棋子 
 
 } 
 } 
 //畫棋子 
 function drawChess(num, x, y) { 
 //根據(jù)x和y確定圖片顯示位置,讓圖片顯示在十字線中間，因為一個格子為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; // 右上到左下方向 
 //***************左右方向*************
 //先從點擊的位置向左尋找，相同顏色的棋子n1自加，直到不是相同顏色的棋子，則跳出循環(huán) 
 for (var i = x; i >= 0; i--) { 
 if (arr[i][y] != num) { 
 break; 
 } 
 n1++; 
 } 
 //然后從點擊的位置向右下一個位置尋找，相同顏色的棋子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++; 
 } 
 //用一個定時器來延時，否則會先彈出對話框，然后才顯示棋子 
 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>

看完這篇關(guān)于詳解基于JavaScript如何實現(xiàn)五子棋游戲的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

本文標題：詳解基于JavaScript如何實現(xiàn)五子棋游戲
鏈接URL：http://muchs.cn/article18/jepodp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、手機網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站營銷、軟件開發(fā)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)