定義canvas及黑白棋變量
<font color="#2f4f4f" face="微軟雅黑" size="3">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/c.png";//黑棋圖片</font>
為棋盤的二維數組用來保存棋盤信息
<font color="#2f4f4f" face="微軟雅黑" size="3"> 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;
}
}</font>
繪制棋盤的線
<font color="#2f4f4f" face="微軟雅黑" size="3"> 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();
}
}</font>
判斷該棋局的輸贏
<font color="#2f4f4f" face="微軟雅黑" size="3"> if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
if (chess == 1) {
alert("白棋贏了");
}
else {
alert("黑棋贏了");
}
isWell = true;//設置該局棋盤已經贏了，不可以再走了
}</font>
html代碼：
<font color="#2f4f4f" face="微軟雅黑" size="3"><body onload="drawRect()">
<div>
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">妳的瀏覽器不支持HTML5 canvas ，請使用 google chrome 瀏覽器 打開.
</canvas>
</div>
</body></font>