闲来玩十三水规律|十三水马牌赢了怎么算|

HTML5初始化棋盘


最后我们给大家做一个综合的实例,就是我们使用HTML5来实现一个简单的五子棋。


前期准备


用到的素材,3张图片。一个黑子,一个白字,一个棋盘背景。


HTML5-1.png


所以把这3个背景图片做一个复制,粘贴到HBuilder里面,放到Image里面去。



代码演示


1.新建一个文件,命名为game.html



2.首先新建一个画板,把它放到一个div里面去


给这个div和canvas分别设置上一系列的属性值


HTML5-4.png


运?#24615;?#35272;一下效果


HTML5-5.png


3. 然后我们给这个画板设置一个背景


设置给Div也行,设置给这个画板也行,都可以。我们这里设置给div


HTML5-6.png


运行查看效果是这样的:


HTML5-7.png


4. 然后,我们再在这个画板上画一格一格的线条


这个地方我们定义一个二维数组,作为棋盘。我们做一个15行*15列的棋盘。


HTML5-8.png


5. 我们先通过这个获得canvas画板的2d对象


can=document.getElementById("can");

ctx=can.getContext("2d");


6. 然后我们画线条,就是矩形框,可以使用strokeStyle和strokeRect这个方法,线条使用灰色

因为我们需要用到x和y坐标作为参数,所以还需要循环迭代这个数组来实现。

for(var i=0;i<15;i++){

for(var j=0;j<15;j++){

ctx.strokeRect(j*40,i*40,40,40);

}

  }
这个地方我们得计算坐标,一小格给上40个像素。


7. 我们运行一下,看来还没有成功画出来。


HTML5-9.png


哪儿?#24418;?#39064;?


因为我们的js代码是在canvas标签的上面,代码的执行又是按照从上到下的顺序执行的,所以我们这里应该写一个函数。在body标签里面:<body onload="init();">
这个init()函数里面就调用了上面的js代码,在页面加载完之后才调用的js代码。然后我们刷新一下,这样就画出网格了,棋盘就画出来了。


HTML5-10.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

闲来玩十三水规律