HTML5黑白五子棋.doc

1、文档来源为 :从网络收集整理.word 版本可编辑 .欢迎下载支持.html5黑白棋，与之前的canvas 游戏不一样，五子棋的游戏思路，canvas 不需要每次都清楚渲染一遍，而是在原来的基础上绘制。由于没有时间限制，因此不需要动画主循环。五子棋的棋子采用两者png图片，用canvas 的 image接口绘制棋子。写这个主要是实现下二维数组的使用。游戏很简单，没有AI 对弈。自己和自己玩。算法介绍准备一个二维数组map ，通过二维数组构造一个点。点的值若为0 则表示空，为1 则表示有白棋，为2 则有黑棋站位。捕捉鼠标事件，如果是白棋则讲map 的点填上相应的表示。通过当前的点，循环左右上下，

2、左上右下等八个方向，如果有连续的1 或者 2则表示白棋或黑棋赢。需要注意是如何理解两个循环变量的循环。代码如下html1234五子棋 56body 7margin: 10px;891011121314你的浏览器不支持 HTML5 canvas，请使用 google chrome浏15览器 打开.16171819201文档来源为 :从网络收集整理.word 版本可编辑 .欢迎下载支持.js1var canvas= document.getElementById(canvas);2var ctn= canvas.getContext(2d);34var isWhite = true;/是否轮到白棋

3、走5var isWell= false;/是否赢了67var imgBlack= new Image();8imgBlack.src = img/b.png;9var imgWhite= new Image();10imgWhite.src = img/w.png;1112 var chessData = ; /var chessData = new Array(15)1314 init();15 / 初始化棋盘1617function init() 18for (var i = 0; i = 640; i += 40) 19/ 绘制横线20ctn.beginPath();21ctn.move

4、To(0, i);22ctn.lineTo(640, i)23ctn.closePath();24ctn.stroke();25/ 绘制竖线26ctn.beginPath();27ctn.moveTo(i, 0);28ctn.lineTo(i, 640);29ctn.closePath();30ctn.stroke();3132/ 初始化棋盘数组33for (var x = 0; x 15; x+) 34chessDatax = ;35for (var y = 0; y = 0 & x = 0 & y 0; i-) 92if (chessDataiy != chess) 93break;949

5、5hz+;9697for (var i = x + 1; i 0; i-) 105if (chessDataxi != chess) 106break;107108ve+109110for (var i = y + 1; i 0, j 0; i-, j-) 118if (chessDataij != chess) 119break;120121nw+;122123for (var i = x + 1, j = y + 1; i 15, j = 0, j 15; i-, j+) 131if (chessDataij != chess) 132break;133134ne+;135136for (var i = x + 1, j = y - 1; i = 0; i+, j-) 137if (chessDataij != chess) 138break;139140ne+;141142143if (hz = 5 | ve =