溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Javascript和HTML5 利用canvas構(gòu)建 Web五子棋游戲程序設(shè)計

發(fā)布時間：2020-04-07 00:39:20 來源：網(wǎng)絡(luò) 閱讀：2418 作者：taoweiji2008 欄目：移動開發(fā)

 HTML5 利用canvas構(gòu)建 Web五子棋游戲程序設(shè)計

 
這只是一個簡單的javascript和HTML5小程序，沒有實現(xiàn)人機(jī)對戰(zhàn)。
 
五子棋棋盤落子點(diǎn)對應(yīng)的二維數(shù)組。數(shù)組的元素對應(yīng)落子點(diǎn)。比如數(shù)組元素值為0表示該元素對應(yīng)的落子點(diǎn)沒有棋子，數(shù)組元素值為1表示該元素對應(yīng)的落子點(diǎn)有白棋子，數(shù)組元素值為2表示該元素對應(yīng)的落子點(diǎn)有黑棋子；
 
 判斷五子棋贏棋的算法是通過對五子棋棋盤落子點(diǎn)對應(yīng)的二維數(shù)組的操作來實現(xiàn)的。
 
 
 
 判斷五子棋贏棋算法
 
下邊的函數(shù)可以實現(xiàn)判斷五子棋贏棋的算法，也可以按照教材中相應(yīng)的算法實現(xiàn)。
 
其中函數(shù)的參數(shù)xx.yy為數(shù)組下標(biāo)，chess數(shù)組實現(xiàn)五子棋棋盤落子點(diǎn)的數(shù)據(jù)結(jié)構(gòu)映射。
 
算法的思想方法是：以當(dāng)前落子點(diǎn)對應(yīng)的下標(biāo)為基點(diǎn)，向其周圍8個方向進(jìn)行搜索，如果有同色子連五子，返回1，或2，否則返回0。返回1代表白棋方勝，返回2代表黑棋方勝。返回0代表沒有發(fā)生贏棋數(shù)據(jù)結(jié)構(gòu)狀態(tài)。
 
 
 
提供程序用到的棋子
 

Javascript和HTML5 利用canvas構(gòu)建 Web五子棋游戲程序設(shè)計

Javascript和HTML5 利用canvas構(gòu)建 Web五子棋游戲程序設(shè)計

 

Javascript和HTML5 利用canvas構(gòu)建 Web五子棋游戲程序設(shè)計

 

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     <title></title> 
  6.     <style type="text/css"> 
  7.         body { 
  8.             margin: 10px; 
  9.         } 
  10.     </style> 
  11.     <script type="text/javascript"> 
  12.         var canvas; 
  13.         var context; 
  14.         var isWhite = true;//設(shè)置是否該輪到白棋 
  15.         var isWell = false;//設(shè)置該局棋盤是否贏了，如果贏了就不能再走了 
  16.         var img_b = new Image(); 
  17.         img_b.src = "p_w_picpaths/b.png";//白棋圖片 
  18.         var img_w = new Image(); 
  19.         img_w.src = "p_w_picpaths/w.png";//黑棋圖片 
  20.   
  21.         var chessData = new Array(15);//這個為棋盤的二維數(shù)組用來保存棋盤信息，初始化0為沒有走過的，1為白棋走的，2為黑棋走的 
  22.         for (var x = 0; x < 15; x++) { 
  23.             chessData[x] = new Array(15); 
  24.             for (var y = 0; y < 15; y++) { 
  25.                 chessData[x][y] = 0; 
  26.             } 
  27.         } 
  28.   
  29.         function drawRect() {//頁面加載完畢調(diào)用函數(shù)，初始化棋盤 
  30.             canvas = document.getElementById("canvas"); 
  31.             context = canvas.getContext("2d"); 
  32.   
  33.             for (var i = 0; i <= 640; i += 40) {//繪制棋盤的線 
  34.                 context.beginPath(); 
  35.                 context.moveTo(0, i); 
  36.                 context.lineTo(640, i); 
  37.                 context.closePath(); 
  38.                 context.stroke(); 
  39.   
  40.                 context.beginPath(); 
  41.                 context.moveTo(i, 0); 
  42.                 context.lineTo(i, 640); 
  43.                 context.closePath(); 
  44.                 context.stroke(); 
  45.             } 
  46.         } 
  47.         function play(e) {//鼠標(biāo)點(diǎn)擊時發(fā)生 
  48.             var x = parseInt((e.clientX - 20) / 40);//計算鼠標(biāo)點(diǎn)擊的區(qū)域，如果點(diǎn)擊了（65，65），那么就是點(diǎn)擊了（1，1）的位置 
  49.             var y = parseInt((e.clientY - 20) / 40); 
  50.   
  51.             if (chessData[x][y] != 0) {//判斷該位置是否被下過了 
  52.                 alert("你不能在這個位置下棋"); 
  53.                 return; 
  54.             } 
  55.   
  56.             if (isWhite) { 
  57.                 isWhite = false; 
  58.                 drawChess(1, x, y); 
  59.             } 
  60.             else { 
  61.                 isWhite = true; 
  62.                 drawChess(2, x, y); 
  63.             } 
  64.   
  65.         } 
  66.         function drawChess(chess, x, y) {//參數(shù)為，棋（1為白棋，2為黑棋），數(shù)組位置 
  67.             if (isWell == true) { 
  68.                 alert("已經(jīng)結(jié)束了，如果需要重新玩，請刷新"); 
  69.                 return; 
  70.             } 
  71.             if (x >= 0 && x < 15 && y >= 0 && y < 15) { 
  72.                 if (chess == 1) { 
  73.                     context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//繪制白棋 
  74.                     chessData[x][y] = 1; 
  75.                 } 
  76.                 else { 
  77.                     context.drawImage(img_b, x * 40 + 20, y * 40 + 20); 
  78.                     chessData[x][y] = 2; 
  79.                 } 
  80.                 judge(x, y, chess); 
  81.             } 
  82.         } 
  83.         function judge(x, y, chess) {//判斷該局棋盤是否贏了 
  84.             var count1 = 0; 
  85.             var count2 = 0; 
  86.             var count3 = 0; 
  87.             var count4 = 0; 
  88.   
  89.             //左右判斷 
  90.             for (var i = x; i >= 0; i--) { 
  91.                 if (chessData[i][y] != chess) { 
  92.                     break; 
  93.                 } 
  94.                 count1++; 
  95.             } 
  96.             for (var i = x + 1; i < 15; i++) { 
  97.                 if (chessData[i][y] != chess) { 
  98.                     break; 
  99.                 } 
  100.                 count1++; 
  101.             } 
  102.             //上下判斷 
  103.             for (var i = y; i >= 0; i--) { 
  104.                 if (chessData[x][i] != chess) { 
  105.                     break; 
  106.                 } 
  107.                 count2++; 
  108.             } 
  109.             for (var i = y + 1; i < 15; i++) { 
  110.                 if (chessData[x][i] != chess) { 
  111.                     break; 
  112.                 } 
  113.                 count2++; 
  114.             } 
  115.             //左上右下判斷 
  116.             for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { 
  117.                 if (chessData[i][j] != chess) { 
  118.                     break; 
  119.                 } 
  120.                 count3++; 
  121.             } 
  122.             for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { 
  123.                 if (chessData[i][j] != chess) { 
  124.                     break; 
  125.                 } 
  126.                 count3++; 
  127.             } 
  128.             //右上左下判斷 
  129.             for (var i = x, j = y; i >= 0, j < 15; i--, j++) { 
  130.                 if (chessData[i][j] != chess) { 
  131.                     break; 
  132.                 } 
  133.                 count4++; 
  134.             } 
  135.             for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { 
  136.                 if (chessData[i][j] != chess) { 
  137.                     break; 
  138.                 } 
  139.                 count4++; 
  140.             } 
  141.   
  142.             if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { 
  143.                 if (chess == 1) { 
  144.                     alert("白棋贏了"); 
  145.                 } 
  146.                 else { 
  147.                     alert("黑棋贏了"); 
  148.                 } 
  149.                 isWell = true;//設(shè)置該局棋盤已經(jīng)贏了，不可以再走了 
  150.             } 
  151.         } 
  152.     </script> 
  153. </head> 
  154. <body onload="drawRect()"> 
  155.     <div> 
  156.         <canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的瀏覽器不支持HTML5 canvas  ，請使用 google chrome 瀏覽器 打開. 
  157.         </canvas> 
  158.     </div> 
  159.   
  160. </body> 
  161. </html> 
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手