Javascript和HTML5 利用canvas构建 Web五子棋游戏程序设计

HTML5 利用canvas构建 Web五子棋游戏程序设计

这只是一个简单的javascript和HTML5小程序，没有实现人机对战。

五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子；

判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

判断五子棋赢棋算法

下边的函数可以实现判断五子棋赢棋的算法，也可以按照教材中相应的算法实现。

其中函数的参数xx.yy为数组下标，chess数组实现五子棋棋盘落子点的数据结构映射。

算法的思想方法是：以当前落子点对应的下标为基点，向其周围8个方向进行搜索，如果有同色子连五子，返回1，或2，否则返回0。返回1代表白棋方胜，返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。

提供程序用到的棋子

<!DOCTYPE html>

<head>

body {

margin: 10px;

}

</style>

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);

}

&nb

补充：web前端 , JavaScript ,

上一个：jquery技巧总结
下一个：Google Translate API

更多图片编程知识:

更多JAVA疑问解答：: java怎么在线读取ftp服务器上的文件内容; 关于程序员的职业规划; HTML和JSP矛盾吗？; java小程序如何打包？; java怎么split路径文件名？; jsp+javaBean中Column 'ordersPrice' specified twice的错误; Java TCP/IP Socket网络编程系列; 大家来讨论一下我到底该用什么好?Swing 还是 JavaFX; 关于Hibernate实体自身多对一的抓取问题; 关于apache2+tomcat群集出现的问题; spring 获取上下文问题; SSH 导入导出excel 谁有这块的资料吗?; Ext TreePanel 刷新问题; springmvc 加载一个jsp页面执行多个方法报404; checkbox数组action怎么向页面传值