HTML5黑白五子棋_第1页
HTML5黑白五子棋_第2页
HTML5黑白五子棋_第3页
免费预览已结束，剩余2页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

2、连续的1或者2则表示白棋或黑棋赢。需要注意是如何理解两个循环变量的循环。代码如下html五子棋bodymargin:10px;你的浏览器不支持HTML5canvas，请使用googlechrome浏览器打开.varcanvas=document.getElementByld(canvas);varctn=canvas.getContext(2d);varisWhite=true;/是否轮到白棋走varisWell=false;/是否赢了varimgBlack=newImage();imgBlack.src=img/b.png;varimgWhite=newImage();imgWhite.sr

3、c=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.stroke();/绘制竖线ctn.beginPath();ctn.moveTo(i,0);ctn.lineTo(i,640);ctn.closePath();ctn.stroke();/初始化棋盘数组for(varx=0;x15;x+)chess

4、Datax=;for(vary=0;y=0&x=0&y0;i-)if(chessDataiy!=chess)break;hz+;for(vari=x+1;i0;i-)if(chessDataxi!=chess)break;ve+for(vari=y+1;i0,j0;i-,j-)if(chessDataij!=chess)break;nw+;for(vari=x+1,j=y+1;i15,j=0,j15;i-,j+)131if(chessDataij!=chess)132break;133134ne+;135136for(vari=x+1,j=y-1;i=0;i+,j-)137if(chessDataij!=chess)138break;139140ne+;141142143if(hz=5|ve=5|

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论