《HTML5 黑白五子棋.doc》由会员分享，可在线阅读，更多相关《HTML5 黑白五子棋.doc（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、html5 黑白棋，与之前的canvas游戏不一样，五子棋的游戏思路，canvas不需要每次都清楚渲染一遍，而是在原来的基础上绘制。由于没有时间限制，因此不需要动画主循环。五子棋的棋子采用两者png 图片，用 canvas的 image 接口绘制棋子。写这个主要是实现下二维数组的使用。游戏很简单，没有AI对弈。自己和自己玩。算法介绍准备一个二维数组map，通过二维数组构造一个点。点的值若为0 则表示空，为1 则表示有白棋，为2 则有黑棋站位。捕捉鼠标事件，如果是白棋则讲map的点填上相应的表示。通过当前的点，循环左右上下，左上右下等八个方向，如果有连续的 1或者2 则表示白棋或黑棋赢。需要注意
2、是如何理解两个循环变量的循环。代码如下html1234567891011121314151617181920五子棋body margin: 10px;你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器 打开.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929
3、3949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148var canvas = document.getElementById(canvas);var ctn = canvas.getContext(2d);var isWhite = true; / 是否轮到白棋走var isWell = false; / 是否赢了var imgB
4、lack = new Image();imgBlack.src = img/b.png;var imgWhite = new Image();imgWhite.src = img/w.png;var chessData = ; /var chessData = new Array(15)init();/初始化棋盘function init() for (var i = 0; i = 640; i += 40) /绘制横线ctn.beginPath();ctn.moveTo(0, i);ctn.lineTo(640, i)ctn.closePath();ctn.stroke();/绘制竖线ctn
5、.beginPath();ctn.moveTo(i, 0);ctn.lineTo(i, 640);ctn.closePath();ctn.stroke();/初始化棋盘数组for (var x = 0; x 15; x+) chessDatax = ;for (var y = 0; y = 0 & x = 0 & y 0; i-) if (chessDataiy != chess) break;hz+;for (var i = x + 1; i 0; i-) if (chessDataxi != chess) break;ve+for (var i = y + 1; i 0, j 0; i-,
6、 j-) if (chessDataij != chess) break;nw+;for (var i = x + 1, j = y + 1; i 15, j = 0, j 15; i-, j+) if (chessDataij != chess) break;ne+;for (var i = x + 1, j = y - 1; i = 0; i+, j-) if (chessDataij != chess) break;ne+;if (hz = 5 | ve = 5 | nw = 5 | ne = 5) if (chess = 1) alert(白棋赢了); else alert(黑棋赢了);织带厂