canvas 接粉丝游戏研究（v0.1）

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）的运用。。

 

 

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