Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法

更新時(shí)間：2013年07月17日 17:35:05 作者：

這只是一個(gè)簡(jiǎn)單的JAVAscript和HTML5小程序，沒有實(shí)現(xiàn)人機(jī)對(duì)戰(zhàn)，五子棋棋盤落子點(diǎn)對(duì)應(yīng)的二維數(shù)組，具體的實(shí)現(xiàn)算法如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助

這只是一個(gè)簡(jiǎn)單的JAVAscript和HTML5小程序，沒有實(shí)現(xiàn)人機(jī)對(duì)戰(zhàn)。
五子棋棋盤落子點(diǎn)對(duì)應(yīng)的二維數(shù)組。數(shù)組的元素對(duì)應(yīng)落子點(diǎn)。比如數(shù)組元素值為0表示該元素對(duì)應(yīng)的落子點(diǎn)沒有棋子，數(shù)組元素值為1表示該元素對(duì)應(yīng)的落子點(diǎn)有白棋子，數(shù)組元素值為2表示該元素對(duì)應(yīng)的落子點(diǎn)有黑棋子；
判斷五子棋贏棋的算法是通過對(duì)五子棋棋盤落子點(diǎn)對(duì)應(yīng)的二維數(shù)組的操作來實(shí)現(xiàn)的。

判斷五子棋贏棋算法
下邊的函數(shù)可以實(shí)現(xiàn)判斷五子棋贏棋的算法，也可以按照教材中相應(yīng)的算法實(shí)現(xiàn)。
其中函數(shù)的參數(shù)xx.yy為數(shù)組下標(biāo)，chess數(shù)組實(shí)現(xiàn)五子棋棋盤落子點(diǎn)的數(shù)據(jù)結(jié)構(gòu)映射。
算法的思想方法是：以當(dāng)前落子點(diǎn)對(duì)應(yīng)的下標(biāo)為基點(diǎn)，向其周圍8個(gè)方向進(jìn)行搜索，如果有同色子連五子，返回1，或2，否則返回0。返回1代表白棋方勝，返回2代表黑棋方勝。返回0代表沒有發(fā)生贏棋數(shù)據(jù)結(jié)構(gòu)狀態(tài)。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
< html xmlns="http://www.w3.org/1999/xhtml"> 
< head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
body { 
margin: 10px; 
} 
</style> 
<script type="text/javascript"> 
var canvas; 
var context; 
var isWhite = true;//設(shè)置是否該輪到白棋 
var isWell = false;//設(shè)置該局棋盤是否贏了，如果贏了就不能再走了 
var img_b = new Image(); 
img_b.src = "images/b.png";//白棋圖片 
var img_w = new Image(); 
img_w.src = "images/w.png";//黑棋圖片 
var chessData = new Array(15);//這個(gè)為棋盤的二維數(shù)組用來保存棋盤信息，初始化0為沒有走過的，1為白棋走的，2為黑棋走的 
for (var x = 0; x < 15; x++) { 
chessData[x] = new Array(15); 
for (var y = 0; y < 15; y++) { 
chessData[x][y] = 0; 
} 
} 
function drawRect() {//頁(yè)面加載完畢調(diào)用函數(shù)，初始化棋盤 
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 
for (var i = 0; i <= 640; i += 40) {//繪制棋盤的線 
context.beginPath(); 
context.moveTo(0, i); 
context.lineTo(640, i); 
context.closePath(); 
context.stroke(); 
context.beginPath(); 
context.moveTo(i, 0); 
context.lineTo(i, 640); 
context.closePath(); 
context.stroke(); 
} 
} 
function play(e) {//鼠標(biāo)點(diǎn)擊時(shí)發(fā)生 
var x = parseInt((e.clientX - 20) / 40);//計(jì)算鼠標(biāo)點(diǎn)擊的區(qū)域，如果點(diǎn)擊了（65，65），那么就是點(diǎn)擊了（1，1）的位置 
var y = parseInt((e.clientY - 20) / 40); 
if (chessData[x][y] != 0) {//判斷該位置是否被下過了 
alert("你不能在這個(gè)位置下棋"); 
return; 
} 
if (isWhite) { 
isWhite = false; 
drawChess(1, x, y); 
} 
else { 
isWhite = true; 
drawChess(2, x, y); 
} 
} 
function drawChess(chess, x, y) {//參數(shù)為，棋（1為白棋，2為黑棋），數(shù)組位置 
if (isWell == true) { 
alert("已經(jīng)結(jié)束了，如果需要重新玩，請(qǐng)刷新"); 
return; 
} 
if (x >= 0 && x < 15 && y >= 0 && y < 15) { 
if (chess == 1) { 
context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//繪制白棋 
chessData[x][y] = 1; 
} 
else { 
context.drawImage(img_b, x * 40 + 20, y * 40 + 20); 
chessData[x][y] = 2; 
} 
judge(x, y, chess); 
} 
} 
function judge(x, y, chess) {//判斷該局棋盤是否贏了 
var count1 = 0; 
var count2 = 0; 
var count3 = 0; 
var count4 = 0; 
//左右判斷 
for (var i = x; i >= 0; i--) { 
if (chessData 
[y] != chess) { 
break; 
} 
count1++; 
} 
for (var i = x + 1; i < 15; i++) { 
if (chessData 
[y] != chess) { 
break; 
} 
count1++; 
} 
//上下判斷 
for (var i = y; i >= 0; i--) { 
if (chessData[x] 
!= chess) { 
break; 
} 
count2++; 
} 
for (var i = y + 1; i < 15; i++) { 
if (chessData[x] 
!= chess) { 
break; 
} 
count2++; 
} 
//左上右下判斷 
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { 
if (chessData 
[j] != chess) { 
break; 
} 
count3++; 
} 
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { 
if (chessData 
[j] != chess) { 
break; 
} 
count3++; 
} 
//右上左下判斷 
for (var i = x, j = y; i >= 0, j < 15; i--, j++) { 
if (chessData 
[j] != chess) { 
break; 
} 
count4++; 
} 
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { 
if (chessData 
[j] != chess) { 
break; 
} 
count4++; 
} 
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { 
if (chess == 1) { 
alert("白棋贏了"); 
} 
else { 
alert("黑棋贏了"); 
} 
isWell = true;//設(shè)置該局棋盤已經(jīng)贏了，不可以再走了 
} 
} 
</script> 
< /head> 
< body onload="drawRect()"> 
<div> 
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的瀏覽器不支持HTML5 canvas，請(qǐng)使用 google chrome 瀏覽器 打開. 
</canvas> 
</div> 
< /body> 
< /html> 