自己写的HTML5 Canvas + Javascript五子棋

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自己写的HTML5 Canvas + Javascript五子棋相关的知识,希望对你有一定的参考价值。

看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本、样式,帮助大众,成为受欢迎的人,感觉满羡慕的。我也想学会前端技术,变得受欢迎呀。于是心血来潮,开始学习前端知识,并写下了这个小练习。

基本思路是这样的:

  1. 使用Canvas绘制棋盘、棋子。

  2. 用二维数组保存棋盘状态。

  3. 设置一个flag,用以标识落子顺序。

  4. 点击时,在数组中检测当前点击位置是否存在棋子,若存在,则不落子;如游戏已结束,亦不落子。

  5. 落子时,更新数组,并将当前落子所在的行、列、左上-右下列、左下-右上列四个方向的棋盘状态写入到一维数组中,用以判断新落子是否形成了五子连珠。

  6. 若形成了五子连珠,提示胜利,并结束游戏;反之,则交换顺序,继续进行游戏。

  效果图:

  技术分享

 

代码如下:

技术分享

  1 <!DOCTYPE html>  2 <html lang="zh-CN">  3 <meta charset="utf-8">  4 <head><title>五子棋</title></head>  5 <body>  6 <canvas id="myCanvas" width="560" height="560" style="border:3px solid black;">  7 您的浏览器不支持 HTML5 canvas 标签。</canvas>  <br/>  8 <button id="reset" onclick="controller.init(ctx)">重置</button>  9 </body> 10 <script> 11 var controller = { 12     round:true, 13     color:"black", 14     whiteTable:new Array(), 15     blackTable:new Array(), 16     row:0, 17     col:0, 18     over:false, 19     trans:function() {        
 20         this.round = !this.round; 21         if (!this.round) { 22             this.blackTable[this.row][this.col] = 1; 23             this.ifWin(this.blackTable) 24             this.color = "white"; 25         } 26         else { 27             this.whiteTable[this.row][this.col] = 1; 28             this.ifWin(this.whiteTable)            
 29             this.color = "black"; 30         } 31     }, 32     ifWin:function(table) {    
 33         var arr1 = new Array(); 34         var arr2 = new Array(); 35         var arr3 = new Array(); 36         var arr4 = new Array(); 37         var n = 0;    
 38         for(x = 0; x<= lineNums; x++) {         
 39             for(y = 0; y <= lineNums; y++) 
 40             { 
 41                 var x1 = this.row - n; 42                 var x2 = this.row + n; 43                 var y1 = this.col - n; 44                 var y2 = this.col + n; 45                 if(y == this.col) { 46                     arr1[x] = table[x][y]; 47                 } 48                 if(x == this.row) { 49                     arr2[y] = table[x][y]; 50                 } 51             } 52             if(this.inBounds(x1) && this.inBounds(y2)) { 53                 arr3[x1] = table[x1][y2]; 54             } 55             if(this.inBounds(x1) && this.inBounds(y1)) { 56                 arr4[x1] = table[x1][y1];                
 57             } 58             if(this.inBounds(x2) && this.inBounds(y1)) { 59                 arr3[x2] = table[x2][y1]; 60             } 61             if(this.inBounds(x2) && this.inBounds(y2)) { 62                 arr4[x2] = table[x2][y2];                
 63             } 64             n = n + 1; 65         } 
 66         this.getSum(arr1, this.row); 67         this.getSum(arr2, this.col); 68         this.getSum(arr3, this.row); 69         this.getSum(arr4, this.row); 70     }, 71     inBounds:function(i) { 72         if(i>=0 && i<=15){ 73             return true; 74         } 75         else{ 76             return false;    
 77         }    
 78     }, 79     getSum:function(array, pos) { 80         num = 5; 81         posr = pos + 1; 82         while(num > 0){ 83             if(array[pos]>0  && this.inBounds(pos)) { 84                 num = num - 1; 85                 pos = pos - 1; 86             } 87             else{ 88                 break; 89             } 90         } 91         while(num > 0){ 92             if(array[posr]>0 && this.inBounds(pos)) { 93                 num  = num - 1; 94                 posr = posr + 1; 95             } 96             else { 97                 break; 98             }        
 99         }100         if(num == 0) {101             this.over = true;102             this.gameOver();103         }    
104     },105     exist:function(x, y) {106         this.row = x / ratio;107         this.col = y / ratio;108         var nums = this.whiteTable[this.row][this.col] + this.blackTable[this.row][this.col];109         if( nums > 0 {110             return true;111         }112         else{113             return false;114         }115     },116     gameOver:function() {117         ctx.font="30px Arial";118         ctx.fillStyle = "#FF0000";119         if(this.round) {120             ctx.fillText("白棋胜利",240,240);121         }122         else {123             ctx.fillText("黑棋胜利",240,240);124         }125     },126     init:function() {127         this.round = true;128         this.color = "black";129         this.over  = false;130         this.drawBoard();131         for(i = 0; i<= lineNums; i++) { 
132             this.whiteTable[i]=new Array();133             this.blackTable[i]=new Array();134             for(n = 0; n <= lineNums; n++) { 
135                 this.whiteTable[i][n]=0;  
136                 this.blackTable[i][n]=0;137             } 
138         } 
139     },140     drawBoard:function() {141         ctx.beginPath();142         ctx.clearRect(0,0,width,width);143         ctx.fillStyle = "#FFBB00";144         ctx.fillRect(0,0,width,width);145         for(var i = 1; i < (lineNums - 1); i++) {146             ctx.moveTo(i * ratio, 0);147             ctx.lineTo(i * ratio, width);148             ctx.stroke();149             ctx.moveTo(0, i * ratio);150             ctx.lineTo(width, i * ratio);151             ctx.stroke();152         }153     },154     drawPiece:function(posX, posY) {155         ctx.beginPath();156         ctx.arc(posX, posY, ratio/2, 0, 2*Math.PI);157         ctx.fillStyle = this.color;158         ctx.fill();159         ctx.stroke();                    
160     }161 }; 
162 //获取点击位置163 function getMousePos(canvas, evt) { 
164    var rect = canvas.getBoundingClientRect(); 
165    return { 
166      x: evt.clientX - rect.left * (canvas.width / rect.width),167      y: evt.clientY - rect.top * (canvas.height / rect.height)168    }169  }170     171 function getNode(pos) {172     return ((pos / ratio).toFixed()) * ratio;173 }174 175 var canvas = document.getElementById("myCanvas");176 var ctx = canvas.getContext("2d");177 var lineNums = 15;178 var ratio = 40;179 var width = (lineNums - 1) * ratio;180 181 controller.init();     
182 183  canvas.addEventListener("click", function (evt) { 
184     var mousePos = getMousePos(canvas, evt); 
185     mousePos.x = getNode(mousePos.x);186     mousePos.y = getNode(mousePos.y);187       var exist = controller.exist(mousePos.x, mousePos.y);188     if (!exist && !controller.over) {189       controller.drawPiece(mousePos.x, mousePos.y); 
190       controller.trans();191     } 
192  }, false);     
193 </script>194 </html>

技术分享

 l 


以上是关于自己写的HTML5 Canvas + Javascript五子棋的主要内容,如果未能解决你的问题,请参考以下文章

自己写的HTML5 Canvas + Javascript五子棋

HTML5干货整理详解canvas的学习方法及学习曲线(收藏保存)

如何使用 HTML5 Javascript Canvas 获得三个碰撞形状的交集并删除未碰撞的部分?

html5 canvas键盘左右移动矩形的问题

HTML5中的Canvas API

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标