HTML5黑白五子棋.doc

1、文檔來(lái)源為 :從網(wǎng)絡(luò)收集整理.word 版本可編輯 .歡迎下載支持.html5黑白棋，與之前的canvas 游戲不一樣，五子棋的游戲思路，canvas 不需要每次都清楚渲染一遍，而是在原來(lái)的基礎(chǔ)上繪制。由于沒(méi)有時(shí)間限制，因此不需要?jiǎng)赢嬛餮h(huán)。五子棋的棋子采用兩者png圖片，用canvas 的 image接口繪制棋子。寫這個(gè)主要是實(shí)現(xiàn)下二維數(shù)組的使用。游戲很簡(jiǎn)單，沒(méi)有AI 對(duì)弈。自己和自己玩。算法介紹準(zhǔn)備一個(gè)二維數(shù)組map ，通過(guò)二維數(shù)組構(gòu)造一個(gè)點(diǎn)。點(diǎn)的值若為0 則表示空，為1 則表示有白棋，為2 則有黑棋站位。捕捉鼠標(biāo)事件，如果是白棋則講map 的點(diǎn)填上相應(yīng)的表示。通過(guò)當(dāng)前的點(diǎn)，循環(huán)左右上下，

2、左上右下等八個(gè)方向，如果有連續(xù)的1 或者 2則表示白棋或黑棋贏。需要注意是如何理解兩個(gè)循環(huán)變量的循環(huán)。代碼如下html1234五子棋 56body 7margin: 10px;891011121314你的瀏覽器不支持 HTML5 canvas，請(qǐng)使用 google chrome瀏15覽器 打開(kāi).16171819201文檔來(lái)源為 :從網(wǎng)絡(luò)收集整理.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/ 初始化棋盤數(shù)組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 =