首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

canvas 接粉条游戏研究(v0.1)

2012-11-23 
canvas 接粉丝游戏研究(v0.1)v0.1 版本实现功能:1,canvas中调用一张固定url的粉丝头像,完成头像从上到下的

canvas 接粉丝游戏研究(v0.1)

v0.1 版本实现功能:

1,canvas中调用一张固定url的粉丝头像,完成头像从上到下的位置移动。

2,绘制“箩筐”(用来接头像的方块),完成“箩筐”的跟随鼠标移动事件。

3,基础碰撞检测。

?

首先在HTML中书写canvas标签

?

?

1,获取画布对象~

setInterval(function(){animateCanvas()}, 60);//下面是animateCanvasfunction animateCanvas(){if(s){ctx.clearRect( x, y, 50, 50); y = y+8;//x = x;if( y <= canvas.height - 50 -40){ctx.drawImage(img, x, y);}else {if (x >= boxX && x + 50 <= boxX + 150){alert("Yes");}else {alert("No");}s=false;}}}

?

?

v0.2版本计划

1,将绘图过程与碰撞检测分离。

2,调整思路,将此版本中按照“对象”(其实canvas中没有这些概念)分别擦除和重绘画布的逻辑,改为按帧每次擦除和重绘整个画布的思路。

3,现在x为定值,将x取随机数随机出现。

?

后续计划

1,一张图片改为图片url数组,完成多张图片随机出现。

2,碰撞检测优化。将现在“完全碰撞”才算“接住”的方法,改为接住重心就算接住。(计算掉落物体重心,如果掉落在边缘,掉落的动画效果)

3,积分器及计时器。

4,开始,暂停,重玩 按钮

5,素材优化

6,开发其他外围功能。

?

终极计划

神马双缓冲器(double buffer)的运用。。

?

?

总结:初版的确烂的很…………………

?

?

热点排行