简单canvas五子棋
var YFTools = { $:function(id) { return document.getElementById(id); }, addHandler:function(element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if(element.attachEvent) { element.attachEvent('on'+type, handler) } else { element['on'+type] = handler; } }, removeHandler:function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if(element.detachEvent) { element.detachEvent('on'+type, handler); } else { element['on'+type] = null; } }, getEvent:function(event) { return event || window.event; }, getTarget:function(event) { return event.target || event.srcEvent; }, getRelatedTarget:function(event) { return event.relatedTarget || event.stoElement || fromElement || null; }, getMouseX:function(event) { var event = this.getEvent(event); var pageX = event.pageX; if(pageX===undefined) { pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } return pageX; }, getMouseY:function(e) { var event = this.getEvent(e) var pageY = event.pageY; if(pageY===undefined) { pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } return pageY; } } var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, (event || window.event)); } } function WUZI(id) { this.isBlack = true; this.canvas = YFTools.$(id); this.context = this.canvas.getContext('2d'); this.arrayChess = []; this.canPlay = true; } WUZI.prototype = { constructor:WUZI, init:function(event) { for (var i=0;i<=15;i++) { this.arrayChess[i] = []; for (var j=0;j<=15;j++) { this.arrayChess[i][j] = 0; } } this.drawBoard(); YFTools.addHandler(this.canvas,'click',BindAsEventListener(this,this.drawChess)) }, // 画棋盘网格 drawBoard:function() { var context = this.context; this.context.strokeStyle = "#1d1409"; this.context.lineWidth = 1; for (var i=0;i<15;i++) { this.context.beginPath(); this.context.moveTo(24,i*35+24); this.context.lineTo(15*35-11,i*35+24); this.context.closePath(); this.context.stroke(); } for (var j=0;j<15;j++) { this.context.beginPath(); this.context.moveTo(j*35+24,24); this.context.lineTo(j*35+24,15*35-11); this.context.closePath(); this.context.stroke(); } }, /*画棋子*/ drawChess:function(event) { if (this.canPlay) { var context = this.context; var pageX = YFTools.getMouseX(event)-this.canvas.offsetLeft; var pageY = YFTools.getMouseY(event)-this.canvas.offsetTop; var tempX = Math.floor(pageX/35); tempX = tempX >= 15 ? 14 : tempX; var tempY = Math.floor(pageY/35); tempY = tempY >= 15 ? 14 : tempY; var x = tempX*35+24; var y = tempY*35+24; //console.log("横向第"+x+" 纵向第"+y) if (this.arrayChess[tempX][tempY]==0) { this.isBlack ? context.fillStyle = "#000000" : context.fillStyle = "#ffffff"; context.beginPath(); context.moveTo(x,y); context.arc(x,y,15,0,2*Math.PI,false); context.fill(); context.closePath(); if (this.isBlack) { this.arrayChess[tempX][tempY]=1; this.isBlack = false; } else { this.arrayChess[tempX][tempY]=2; this.isBlack = true; } var tempFlag = this.checkWin(tempX,tempY); if (tempFlag) { this.canPlay = false; if (this.isBlack) { alert('游戏结束,白方获胜！'); } else { alert('游戏结束,黑方获胜！'); } } } } }, checkWin:function(x,y) { var flag = false, color = this.arrayChess[x][y], count = 1, i = 1; //console.log("X:"+(x)+" Y:"+(y)) // 横向判断 while(color == this.arrayChess[x+i][y+0]) { count++; i++; }; i = 1; while(color == this.arrayChess[x-i][y-0]) { count++; i++; }; if (count >= 5) { flag = true; } // 纵向判断 count = 1; i = 1; while (color == this.arrayChess[x+0][y+i]) { count++; i++; } i = 1; while (color == this.arrayChess[x-0][y-i]) { count++; i++; } if (count >= 5) { flag = true; } // 右上左下判断 count = 1; i = 1; while (color == this.arrayChess[x+i][y+i]) { count++; i++; } i = 1; while (color == this.arrayChess[x-i][y-i]) { count++; i++; } if (count >= 5) { flag = true; } // 左上右下判断 count = 1; i = 1; while (color == this.arrayChess[x+i][y-i]) { count++; i++; } i = 1; while (color == this.arrayChess[x-i][y+i]) { count++; i++; } if (count >= 5) { flag = true; } return flag; } } window.onload = function() { var w = new WUZI('mycanvas'); w.init(); }
把上面代码加入到head,以html5格式声明DOCTYPE
如果是ie8以下浏览器，可以在网上找到这两个文件：
html5.js 和 excanvas.compiled.js
<!--[if lt IE 9]><script type="text/javascript" src="html5.js"></script><![endif]--> <!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
下面是完整代码：
<!DOCTYPE html> <head> <!--[if lt IE 9]><script type="text/javascript" src="html5.js"></script><![endif]--> <!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--> <meta charset="gb2312" /> <title>简单五子棋</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> body,td,th { font-size: 12px; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; text-align:center; } canvas{display:block;background:url(images/bg.jpg);margin:20px auto;width:537px;cursor:pointer;} </style> <script> var YFTools = { $:function(id) { return document.getElementById(id); }, addHandler:function(element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if(element.attachEvent) { element.attachEvent('on'+type, handler) } else { element['on'+type] = handler; } }, removeHandler:function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if(element.detachEvent) { element.detachEvent('on'+type, handler); } else { element['on'+type] = null; } }, getEvent:function(event) { return event || window.event; }, getTarget:function(event) { return event.target || event.srcEvent; }, getRelatedTarget:function(event) { return event.relatedTarget || event.stoElement || fromElement || null; }, getMouseX:function(event) { var event = this.getEvent(event); var pageX = event.pageX; if(pageX===undefined) { pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } return pageX; }, getMouseY:function(e) { var event = this.getEvent(e) var pageY = event.pageY; if(pageY===undefined) { pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } return pageY; } } var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, (event || window.event)); } } function WUZI(id) { this.isBlack = true; this.canvas = YFTools.$(id); this.context = this.canvas.getContext('2d'); this.arrayChess = []; this.canPlay = true; } WUZI.prototype = { constructor:WUZI, init:function(event) { for (var i=0;i<=15;i++) { this.arrayChess[i] = []; for (var j=0;j<=15;j++) { this.arrayChess[i][j] = 0; } } this.drawBoard(); YFTools.addHandler(this.canvas,'click',BindAsEventListener(this,this.drawChess)) }, // 画棋盘网格 drawBoard:function() { var context = this.context; this.context.strokeStyle = "#1d1409"; this.context.lineWidth = 1; for (var i=0;i<15;i++) { this.context.beginPath(); this.context.moveTo(24,i*35+24); this.context.lineTo(15*35-11,i*35+24); this.context.closePath(); this.context.stroke(); } for (var j=0;j<15;j++) { this.context.beginPath(); this.context.moveTo(j*35+24,24); this.context.lineTo(j*35+24,15*35-11); this.context.closePath(); this.context.stroke(); } }, /*画棋子*/ drawChess:function(event) { if (this.canPlay) { var context = this.context; var pageX = YFTools.getMouseX(event)-this.canvas.offsetLeft; var pageY = YFTools.getMouseY(event)-this.canvas.offsetTop; var tempX = Math.floor(pageX/35); tempX = tempX >= 15 ? 14 : tempX; var tempY = Math.floor(pageY/35); tempY = tempY >= 15 ? 14 : tempY; var x = tempX*35+24; var y = tempY*35+24; //console.log("横向第"+x+" 纵向第"+y) if (this.arrayChess[tempX][tempY]==0) { this.isBlack ? context.fillStyle = "#000000" : context.fillStyle = "#ffffff"; context.beginPath(); context.moveTo(x,y); context.arc(x,y,15,0,2*Math.PI,false); context.fill(); context.closePath(); if (this.isBlack) { this.arrayChess[tempX][tempY]=1; this.isBlack = false; } else { this.arrayChess[tempX][tempY]=2; this.isBlack = true; } var tempFlag = this.checkWin(tempX,tempY); if (tempFlag) { this.canPlay = false; if (this.isBlack) { alert('游戏结束,白方获胜！'); } else { alert('游戏结束,黑方获胜！'); } } } } }, checkWin:function(x,y) { var flag = false, color = this.arrayChess[x][y], count = 1, i = 1; //console.log("X:"+(x)+" Y:"+(y)) // 横向判断 while(color == this.arrayChess[x+i][y+0]) { count++; i++; }; i = 1; while(color == this.arrayChess[x-i][y-0]) { count++; i++; }; if (count >= 5) { flag = true; } // 纵向判断 count = 1; i = 1; while (color == this.arrayChess[x+0][y+i]) { count++; i++; } i = 1; while (color == this.arrayChess[x-0][y-i]) { count++; i++; } if (count >= 5) { flag = true; } // 右上左下判断 count = 1; i = 1; while (color == this.arrayChess[x+i][y+i]) { count++; i++; } i = 1; while (color == this.arrayChess[x-i][y-i]) { count++; i++; } if (count >= 5) { flag = true; } // 左上右下判断 count = 1; i = 1; while (color == this.arrayChess[x+i][y-i]) { count++; i++; } i = 1; while (color == this.arrayChess[x-i][y+i]) { count++; i++; } if (count >= 5) { flag = true; } return flag; } } window.onload = function() { var w = new WUZI('mycanvas'); w.init(); } </script> </head> <body> <canvas id="mycanvas" width="537" height="537"></canvas> </body> </html>
