function calLength2(x1, y1, x2, y2) {    //计算两个点之间的距离，，， 先求平方和，再开平方
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

大鱼吃到果实的时候，会产生一个白色的圆圈，这个效果怎么实现呢？
首先，我们定义一个waveObject类，它的属性有：坐标、数量、半径、使用状态。它的方法有：初始化、绘制和出生。
我们来看一下绘制圆圈的方法：
for(var i = 0;i< this.num; i++){
    if(this.status[i]){     //如果圆圈是使用状态，则绘制圆圈
        this.r[i] += diffframetime * 0.04;
        if(this.r[i] > 60){
            this.status[i] = false;
            return false;
        }
        var alpha = 1 - this.r[i] / 60;
        ctx1.strokeStyle = "rgba(255, 255, 255, "+ alpha +")";
        ctx1.beginPath();
        ctx1.arc(this.x[i], this.y[i], this.r[i], 0, 2 * Math.PI);   //画圆，
        ctx1.stroke();
    }
}

一帧一帧的画每一个圆，圆的半径逐渐增大，透明度逐渐减小，直到半径大于60的时候，把状态设为false，让其回归物体池中。
这里又用到了一个新的方法：ctx1.arc(x,y,r,deg); //画圆，x,y是中心圆点，r是半径，deg是角度，360度就是一个整圆。

再来看一下出生的方法：
for(var i = 0; i< this.num; i++){
    if(!this.status[i]){
        this.status[i] = true;   //把圆圈状态设为使用状态
        this.x[i] = fruitOb.x[index];
        this.y[i] = fruitOb.y[index];
        this.r[i] = 10;
        return false;   //找到一个未使用的圆圈，就结束。
    }
}

圆圈出生的坐标就是被吃果实的坐标。
大鱼喂小鱼
大鱼喂小鱼同上，不再详述，这里喂小鱼之后，大鱼身体变白，小鱼随果实数量相应增多，另外需要注意的是，此时产生圆圈的坐标是小鱼的坐标。
游戏分值计算
定义一个数据类，它的属性有：吃到的果实数量、倍数、总分、力量值、游戏状态（是否结束）等；方法有：初始化、绘制分数。
这里我们需要在画布上绘制文字，又用到了新的API：
ctx1.save();
ctx1.font = ‘40px verdana’; 定义文字的大小和字体；
ctx1.shadowBlur = 10; 定义文字的阴影宽度
ctx1.shadowColor = “white”; 定义文字阴影的颜色；
ctx1.fillStyle = “rgba(255, 255, 255, “+ this.alpha +”)”; 定义文字的颜色（rgba,a代表透明度）
ctx1.fillText(“GAME OVER”, canWid 0.5, canHei 0.5 - 25); 绘制文字，第一个参数是字符串，支持表达式，后两个参数是坐标值。
ctx1.font = ‘25px verdana’;
ctx1.fillText(“CLICK TO RESTART”, canWid 0.5, canHei 0.5 + 25);
ctx1.restore();

总结

好啦，整个游戏的制作过程就分享完了，做的过程中有遇到过很多问题，不过都一一解决了，加深了很多以前模糊的概念，也学到了很多新的知识，比如使用rgba()来一起控制颜色和透明度，以前还真没用到过。
这个游戏本身功能比较简单，但是动画还算比较酷炫。这也算是一个比较基本的动画基础框架了，而比较不容易理解的地方也有很多，比如求趋近的角度函数lerpAngle(a,b,c)，还有Math.atan2()这个函数，等等。 欢迎大家提出bug或者改进建议～～～

相关文章

文章评论