HTML5如何制作黑白五子棋游戏

这篇文章主要介绍了HTML5如何制作黑白五子棋游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　js代码：

　　定义canvas及黑白棋变量

　　var canvas;

　　var context;

　　var isWhite=true;//设置是否该轮到白棋

　　var isWell=false;//设置该局棋盘是否赢了，如果赢了就不能再走了

　　var img_b=new Image();

　　img_b.class="lazy" data-src="images/b.png";//白棋图片

　　var img_w=new Image();

　　img_w.class="lazy" data-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如何制作黑白五子棋游戏”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!