纯HTML5+CSS+JS制作黑白五子棋游戏教程

今天分享一个只用css和js代码开发的黑白五子棋游戏,希望对大家可以有所帮助

先看看效果图:

js代码:


定义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>

阅读原文-演示/下载源码,还有更多更好玩的开源代码等你哦!

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2019-08-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券