【10】H5 90坦克大战(炫酷)

原创 鑫大大 随笔 javascript 1665阅读 2017-10-11 09:14:58 举报

让我们直接上来就看代码吧下面有笔记

html 代码

笔记:

游戏:Canvas

canvas基础

问题1:如何绘制图片
//方法1.直接用<img src="xxx"/>
麻烦
//方法2.Image对象
let oImg=new Image();

oImg.src=xxx;
oImg.onload=function (){
绘制;
};

问题2:动起来
定时器
注意:擦了重新画

批量加载图片:
循环、完成1个+1、加到总数完事儿

result={
wall: <img src='img/wall.gif' />,
steel: <img src='img/steel-1.gif' />,
...
}

1.画图
onload->drawImage()
2.动起来
setInterval->clearRect()
3.批量加载图片
for(json)->++
if(count==total){
完事儿
}
4.画图——改变尺寸
gd.drawImage(img, x, y)
gd.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)

sx~sh——原图信息
dx~dh——目标信息


每个小块:15*15

1行,2列

x=c15
y=r
15

0,0->15,15

0,1->
x:15
y:0
w:15
h:15

3,6->
x:615
y:3
15
w:15
h:15

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复