Javascript和HTML5利用canvas構建Web五子棋游戲實現算法

　　這只是一個簡單的JAVAscript和HTML小程序沒有實現人機對戰
五子棋棋盤落子點對應的二維數組數組的元素對應落子點比如數組元素值為表示該元素對應的落子點沒有棋子數組元素值為表示該元素對應的落子點有白棋子數組元素值為表示該元素對應的落子點有黑棋子
判斷五子棋贏棋的算法是通過對五子棋棋盤落子點對應的二維數組的操作來實現的

判斷五子棋贏棋算法
下邊的函數可以實現判斷五子棋贏棋的算法也可以按照教材中相應的算法實現
其中函數的參數xxyy為數組下標chess數組實現五子棋棋盤落子點的數據結構映射
算法的思想方法是以當前落子點對應的下標為基點向其周圍個方向進行搜索如果有同色子連五子返回或否則返回返回代表白棋方勝返回代表黑棋方勝返回代表沒有發生贏棋數據結構狀態

復制代碼代碼如下:

　　
<!DOCTYPE html>
< html xmlns="
< head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title></title>
<style type="text/css">
body {
margin: px;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhite = true;//設置是否該輪到白棋
var isWell = false;//設置該局棋盤是否贏了如果贏了就不能再走了
var img_b = new Image();
img_bsrc = "images/bpng";//白棋圖片
var img_w = new Image();
img_wsrc = "images/wpng";//黑棋圖片
var chessData = new Array();//這個為棋盤的二維數組用來保存棋盤信息初始化為沒有走過的為白棋走的為黑棋走的
for (var x = ; x < ; x++) {
chessData[x] = new Array();
for (var y = ; y < ; y++) {
chessData[x][y] = ;
}
}
function drawRect() {//頁面加載完畢調用函數初始化棋盤
canvas = documentgetElementById("canvas");
context = canvasgetContext("d");
for (var i = ; i <= ; i += ) {//繪制棋盤的線
contextbeginPath();
contextmoveTo( i);
contextlineTo( i);
contextclosePath();
contextstroke();
contextbeginPath();
contextmoveTo(i );
contextlineTo(i );
contextclosePath();
contextstroke();
}
}
function play(e) {//鼠標點擊時發生
var x = parseInt((eclientX ) / );//計算鼠標點擊的區域如果點擊了（）那麼就是點擊了（）的位置
var y = parseInt((eclientY ) / );
if (chessData[x][y] != ) {//判斷該位置是否被下過了
alert("你不能在這個位置下棋");
return;
}
if (isWhite) {
isWhite = false;
drawChess( x y);
}
else {
isWhite = true;
drawChess( x y);
}
}
function drawChess(chess x y) {//參數為棋（為白棋為黑棋）數組位置
if (isWell == true) {
alert("已經結束了如果需要重新玩請刷新");
return;
}
if (x >= && x < && y >= && y < ) {
if (chess == ) {
contextdrawImage(img_w x * + y * + );//繪制白棋
chessData[x][y] = ;
}
else {
contextdrawImage(img_b x * + y * + );
chessData[x][y] = ;
}
judge(x y chess);
}
}
function judge(x y chess) {//判斷該局棋盤是否贏了
var count = ;
var count = ;
var count = ;
var count = ;
//左右判斷
for (var i = x; i >= ; i) {
if (chessData
[y] != chess) {
break;
}
count++;
}
for (var i = x + ; i < ; i++) {
if (chessData
[y] != chess) {
break;
}
count++;
}
//上下判斷
for (var i = y; i >= ; i) {
if (chessData[x]
!= chess) {
break;
}
count++;
}
for (var i = y + ; i < ; i++) {
if (chessData[x]
!= chess) {
break;
}
count++;
}
//左上右下判斷
for (var i = x j = y; i >= j >= ; i j) {
if (chessData
[j] != chess) {
break;
}
count++;
}
for (var i = x + j = y + ; i < j < ; i++ j++) {
if (chessData
[j] != chess) {
break;
}
count++;
}
//右上左下判斷
for (var i = x j = y; i >= j < ; i j++) {
if (chessData
[j] != chess) {
break;
}
count++;
}
for (var i = x + j = y ; i < j >= ; i++ j) {
if (chessData
[j] != chess) {
break;
}
count++;
}
if (count >= || count >= || count >= || count >= ) {
if (chess == ) {
alert("白棋贏了");
}
else {
alert("黑棋贏了");
}
isWell = true;//設置該局棋盤已經贏了不可以再走了
}
}
</script>
< /head>
< body onload="drawRect()">
<div>
<canvas width="" id="canvas" onmousedown="play(event)" height="">你的浏覽器不支持HTML canvas請使用 google chrome 浏覽器打開
</canvas>
</div>
< /body>
< /html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20294.html