v0.1 版本实现功能:
1,canvas中调用一张固定url的粉丝头像,完成头像从上到下的位置移动。
2,绘制“箩筐”(用来接头像的方块),完成“箩筐”的跟随鼠标移动事件。
3,基础碰撞检测。
首先在HTML中书写canvas标签
<canvas id="canvas" width="350" height="430"></canvas>
1,获取画布对象~
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
2,canvas中引入粉丝头像,并设置图片的一些属性。 x为图片的横坐标。y为图片的纵坐标。s用来判断图片碰撞后消失。
var img = new Image();
img.src = 'http://tp1.sinaimg.cn/1409181652/50/1290411958/0';
var x = 0; var y = 0; var s = true;
3,下面,是想办法让头像掉落下来。这时候需要用到setInterval(执行函数, 间隔时间)方法,每隔一段时间,重复执行头像在不同位置擦除重绘的函数。在本函数中,头像动画即让y 值每隔一段时间变化。调用animateCanvas 时候,先判断了s的值是否为true,为true,则头像仍在掉落过程,执行函数。直到y值到达一个范围,在这个范围内做碰撞检测,碰撞检测后,将s的值置为false。则不再执行animateCanvas。
setInterval(function(){animateCanvas()}, 60);
//下面是animateCanvas
function 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)的运用。。
总结:初版的确烂的很…………………
分享到:
相关推荐
类似下红包雨,接红包的小游戏,使用html js canvas开发
canvas拼图小游戏
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
canvas-弹珠游戏
html5 canvas躲避小游戏是男人就撑过20秒躲避游戏源码
canvas拼图游戏,基于html + canvas画布实现
canvas端午节吃粽子小游戏,兼容移动端
web版本的24点游戏。。 牌使用canvas代码自绘。。
HTML5之纯canvas实现转盘游戏,用到了canvas的旋转,平移,叠加,清除
Canvas画布图片文字拼接合成,生成图片,输入内容,填写到图片上
基于html5 canvas实现聚宝盆接金币游戏特效源码.zip
canvas端午节小游戏
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
html5 canvas五彩连珠游戏_五彩连珠小游戏源码下载 html5 canvas五彩连珠游戏_五彩连珠小游戏源码下载
canvas 飞机大战小游戏
HTML5 Canvas贪吃蛇网页游戏是一款网页在线小游戏试玩特效。
canvas打砖块小游戏
一个经典的游戏,左右箭头可以控制垫子的移动
html5 canvas填色画游戏代码是一款适合儿童玩的益智类填色游戏,通过选中色块,来给模型填充颜色。支持多种模型选择填色效果。