这篇文章主要介绍了HTML5如何制作黑白五子棋游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司主要企业基础官网建设，电商平台建设，移动手机平台，微信小程序开发等一系列专为中小企业按需设计网站产品体系；应对中小企业在互联网运营的各种问题，为中小企业在互联网的运营中保驾护航。
js代码：
定义canvas及黑白棋变量
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";//黑棋图片
为棋盘的二维数组用来保存棋盘信息
var chessData=new Array(15);//初始化0为没有走过的，1为白棋走的，2为黑棋走的
for(var x=0;x
chessData[x]=new Array(15);
for(var y=0;y
chessData[x][y]=0;
}
}
绘制棋盘的线
for(var i=0;i
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();
}
}
判断该棋局的输赢
if(count1>=5||count2>=5||count3>=5||count4>=5){
if(chess==1){
alert("白棋赢了");
}
else{
alert("黑棋赢了");
}
isWell=true;//设置该局棋盘已经赢了，不可以再走了
}
html代码：
你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器 打开.
感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5如何制作黑白五子棋游戏”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
