自己写的HTML5 Canvas + Javascript五子棋 - 氢氦_H5之家

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

基本思路是这样的：

　　效果图：

代码如下：

五子棋您的浏览器不支持 HTML5 canvas 标签。重置 { , , Array(), Array(), , , , (){ .round; .round){ ; .blackTable) ; 25 } 26 else{ ; .whiteTable) ; 30 } 31 }, (table){ Array(); Array(); Array(); Array(); ; ) { ) 40 { n; n; n; n; .col){ table[x][y]; 47 } .row){ table[x][y]; 50 } 51 } .inBounds(y2)){ table[x1][y2]; 54 } .inBounds(y1)){ table[x1][y1]; 57 } .inBounds(y1)){ table[x2][y1]; 60 } .inBounds(y2)){ table[x2][y2]; 63 } ; 65 } .row); .col); .row); .row); 70 }, (i){ ){ ; 74 } 75 else{ ; 77 } 78 }, (array, pos){ ; ; ){ .inBounds(pos)){ ; ; 86 } 87 else{ 88 break; 89 } 90 } ){ .inBounds(pos)){ ; ; 95 } 96 else{ 97 break; 98 } 99 } ){ ; 102 this.gameOver(); 103 } 104 }, (x, y){ ratio; ratio; .col]; ){ ; 111 } 112 else{ ; 114 } 115 }, (){ ; ; .round){ ); 121 } 122 else{ ); 124 } 125 }, (){ ; ; ; 130 this.drawBoard(); ) { Array(); Array(); ) { ; ; 137 } 138 } 139 }, (){ 141 ctx.beginPath(); ,width,width); ; ,width,width); ){ ); ratio, width); 148 ctx.stroke(); ratio); ratio); 151 ctx.stroke(); 152 } 153 }, (posX, posY){ 155 ctx.beginPath(); .color; 158 ctx.fill(); 159 ctx.stroke(); 160 } 161 }; getMousePos(canvas, evt) { canvas.getBoundingClientRect(); 165 return { rect.width), rect.height) 168 } 169 } getNode(pos){ } ); ); ; ; ratio; 180 181 controller.init(); (evt) { getMousePos(canvas, evt); getNode(mousePos.x); getNode(mousePos.y); controller.ifExsit(mousePos.x, mousePos.y); controller.over){ 189 controller.drawPiece(mousePos.x, mousePos.y); 190 controller.trans(); 191 } );

点我进入在线版

这算是自己学习Javascript的一个开端，未来的话，可能也要以这个例子为基础，利用学到的知识，进一步增加其它功能，优化代码。

本文链接：