HTML5 利用canvas構建 Web五子棋游戲程序設計
這只是一個簡單的javascript和HTML5小程序，沒有實現人機對戰。
五子棋棋盤落子點對應的二維數組。數組的元素對應落子點。比如數組元素值為0表示該元素對應的落子點沒有棋子，數組元素值為1表示該元素對應的落子點有白棋子，數組元素值為2表示該元素對應的落子點有黑棋子；
判斷五子棋贏棋的算法是通過對五子棋棋盤落子點對應的二維數組的操作來實現的。
判斷五子棋贏棋算法
下邊的函數可以實現判斷五子棋贏棋的算法，也可以按照教材中相應的算法實現。
其中函數的參數xx.yy為數組下標，chess數組實現五子棋棋盤落子點的數據結構映射。
算法的思想方法是：以當前落子點對應的下標為基點，向其周圍8個方向進行搜索，如果有同色子連五子，返回1，或2，否則返回0。返回1代表白棋方勝，返回2代表黑棋方勝。返回0代表沒有發生贏棋數據結構狀態。
提供程序用到的棋子
<!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;//設置是否該輪到白棋
var isWell = false;//設置該局棋盤是否贏了，如果贏了就不能再走了
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);//這個為棋盤的二維數組用來保存棋盤信息，初始化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() {//頁面加載完畢調用函數，初始化棋盤
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) {//鼠標點擊時發生
var x = parseInt((e.clientX - 20) / 40);//計算鼠標點擊的區域，如果點擊了（65，65），那么就是點擊了（1，1）的位置
var y = parseInt((e.clientY - 20) / 40);
if (chessData[x][y] != 0) {//判斷該位置是否被下過了
alert("你不能在這個位置下棋");
return;
}
if (isWhite) {
isWhite = false;
drawChess(1, x, y);
}
else {
isWhite = true;
drawChess(2, x, y);
}
}
function drawChess(chess, x, y) {//參數為，棋（1為白棋，2為黑棋），數組位置
if (isWell == true) {
alert("已經結束了，如果需要重新玩，請刷新");
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[i][y] != chess) {
break;
}
count1++;
}
for (var i = x + 1; i < 15; i++) {
if (chessData[i][y] != chess) {
break;
}
count1++;
}
//上下判斷
for (var i = y; i >= 0; i--) {
if (chessData[x][i] != chess) {
break;
}
count2++;
}
for (var i = y + 1; i < 15; i++) {
if (chessData[x][i] != chess) {
break;
}
count2++;
}
//左上右下判斷
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
if (chessData[i][j] != chess) {
break;
}
count3++;
}
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
if (chessData[i][j] != chess) {
break;
}
count3++;
}
//右上左下判斷
for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (chessData[i][j] != chess) {
break;
}
count4++;
}
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
if (chessData[i][j] != chess) {
break;
}
count4++;
}
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
if (chess == 1) {
alert("白棋贏了");
}
else {
alert("黑棋贏了");
}
isWell = true;//設置該局棋盤已經贏了，不可以再走了
}
}
</script>
</head>
<body onload="drawRect()">
<div>
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的瀏覽器不支持HTML5 canvas ，請使用 google chrome 瀏覽器 打開.
</canvas>
</div>
</body>
</html>