纯HTML5+CSS+JS制作黑白五子棋游戏教程
纯HTML5+CSS+JS制作黑白五子棋游戏教程
用户5997198
发布于 2019-08-09 12:23:26
发布于 2019-08-09 12:23:26
今天分享一个只用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>阅读原文-演示/下载源码，还有更多更好玩的开源代码等你哦！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读