born方法:随机找到一个海葵的坐标,在海葵的坐标上出生一个果实。
绘制大鱼和小鱼
大鱼和小鱼都是一个类,它的属性有:坐标、旋转角度、尾巴摆动时间间隔、眨眼睛时间间隔、身体图片数组….等等
先把大鱼绘制出来,用canvas的drawImage方法。
比较难的是大鱼的动画,大鱼会随着鼠标移动而移动的动画,这里定义了两个函数:
function lerpAngle(a, b, t) { //计算每一帧旋转的角度
var d = b - a;
if (d > Math.PI) d = d - 2 * Math.PI;
if (d < -Math.PI) d = d + 2 * Math.PI;
return a + d * t;
}
function lerpDistance(aim, cur, ratio) { //aim:目标 cur:当前 ratio:百分比 计算每一帧趋近的距离
var delta = cur - aim;
return aim + delta * ratio
}
this.momTailTimer += diffframetime;
if(this.momTailTimer > 50){
this.momTailIndex = (this.momTailIndex + 1) % 8; //根据时间间隔改变尾巴图片
this.momTailTimer %= 50;
}
lerpDistance 是计算每一帧大鱼趋紧到鼠标的距离。
lerpAngle 用来计算大鱼每一帧向鼠标旋转的角度。 定义这两个函数,让大鱼动起来比较平滑。
获得了一个角度之后,怎么让大鱼旋转起来呢?这里又需要用到几个API了。
ctx1.save(); //建议每次绘制都使用save和restore,可以避免定义样式,发生冲突。
ctx1.translate(this.x, this.y); //把原点变成(this.x , this.y);
ctx1.rotate(this.angle); //根据原点顺时针旋转一个角度
绘制小鱼跟大鱼是一样的,不做详述。但是需要注意的是绘制小鱼的时候有个判断,当小鱼的颜色变白的时候,游戏结束。
this.babyBodyTimer += diffframetime;
if(this.babyBodyTimer > 550){ //身体图片变化的计数器 > 550ms
this.babyBodyIndex += 1; //身体图片变淡
this.babyBodyTimer %= 550;
scoreOb.strength = ((20 - this.babyBodyIndex)/2).toFixed(0);
if(this.babyBodyIndex > 19){ //如果身体变成白色,game over;
this.babyBodyIndex = 19;
scoreOb.gameOver = true;
can1.style.cursor = "pointer";
}
}
大鱼吃果实
大鱼吃果实是根据距离来判断定的,如果大鱼和果实的距离小于30,则让果实消失,并且出现白色圆环,并且分值有一定的变化。
jzk.momEatFruit = function(){ //判断果实和大鱼之间的距离,小于30说明被吃掉
for(var i = 0;i < fruitOb.num; i++ ){
if(fruitOb.alive[i] && fruitOb.grow[i]){
var len = calLength2(fruitOb.x[i], fruitOb.y[i], momOb.x, momOb.y);
if(len < 30){
fruitOb.dead(i); //如果距离小于30,则被吃掉
waveOb.born(i); //吃掉的时候,产生圆圈
scoreOb.fruitNum ++; //吃到的果实数量+1
momOb.momBodyIndex = momOb.momBodyIndex == 7 ? momOb.momBodyIndex : (momOb.momBodyIndex + 1); //大鱼的身体颜色红
if(fruitOb.type[i] == 'blue'){
scoreOb.doubleNum ++; //吃到蓝色果实,倍数+1
}
}
}
}
}
其中有一个calLength2函数,使用来计算两个点之间的距离的。