html5 黑白五子棋

html5 黑白五子棋

ID:14101136

大小:46.50 KB

页数:5页

时间:2018-07-26

html5 黑白五子棋_第1页
html5 黑白五子棋_第2页
html5 黑白五子棋_第3页
html5 黑白五子棋_第4页
html5 黑白五子棋_第5页
资源描述:

《html5 黑白五子棋》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、html5黑白棋,与之前的canvas游戏不一样,五子棋的游戏思路,canvas不需要每次都清楚渲染一遍,而是在原来的基础上绘制。由于没有时间限制,因此不需要动画主循环。五子棋的棋子采用两者png图片,用canvas的image接口绘制棋子。写这个主要是实现下二维数组的使用。游戏很简单,没有AI对弈。自己和自己玩。算法介绍准备一个二维数组map,通过二维数组构造一个点。点的值若为0则表示空,为1则表示有白棋,为2则有黑棋站位。捕捉鼠标事件,如果是白棋则讲map的点填上相应的表示。通过当前的点,循环左右上下,左上右下等八个方向,如果有连续的1或者2则表示白棋或黑棋赢。需要注意

2、是如何理解两个循环变量的循环。代码如下html1234567891011121314151617181920        五子棋            body{            margin:10px;        }                       

3、v>        你的浏览器不支持HTML5canvas ,请使用googlechrome浏览器打开.            

    织带厂http://www.stcxzz.com/,玻璃托盘http://www.13502627533.com/js1234567891

4、011121314151617181920212223242526272829303132333435363738394041varcanvas =document.getElementById('canvas');varctn    =canvas.getContext('2d');          varisWhite=true;  //是否轮到白棋走varisWell =false; //是否赢了          varimgBlack    =newImage();    imgBlack.src='img/b.png';varimgWhite    =newI

5、mage();    imgWhite.src='img/w.png';          varchessData=[];//varchessData=newArray(15)          init();//初始化棋盘          functioninit(){    for(vari=0;i<=640;i+=40){        //绘制横线        ctn.beginPath();        ctn.moveTo(0,i);        ctn.lineTo(640,i)        ctn.closePath();        ctn.

6、stroke();        //绘制竖线        ctn.beginPath();        ctn.moveTo(i,0);        ctn.lineTo(i,640);        ctn.closePath();        ctn.stroke();    }    //初始化棋盘数组    for(varx=0;x<15;x++){        chessData[x]=[];        for(vary=0;y<15;y++){            chessData[x][y]=0;        }    }}//有些控制 

7、         织带厂http://www.stcxzz.com/,玻璃托盘http://www.13502627533.com/4243444546474849505152535455565758596061626364656667686970717273747576777879808182838485functionplay(e){    varx=parseInt((e.clientX-20)/40);    vary=parseInt((e.clientY-20)/40);              if

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签