canvas教程

html5 canvas实现酷炫的小游戏例子(2)

字号+ 作者:H5之家 来源:H5之家 2018-02-09 13:00 我要评论( )

born方法:随机找到一个海葵的坐标,在海葵的坐标上出生一个果实。 绘制大鱼和小鱼 大鱼和小鱼都是一个类,它的属性有:坐标、旋转角度、尾巴摆动时间间隔、眨眼睛时间间隔、身体图片数组.等等 先把大鱼绘制出来,

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函数,使用来计算两个点之间的距离的。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    2018-01-28 17:00

  • 向军的技术课程

    向军的技术课程

    2018-01-28 16:06

  • 《HTML5 Canvas基础教程(英)霍克著》

    《HTML5 Canvas基础教程(英)霍克著》

    2018-01-28 14:07

  • Canvas粒子背景效果 前端开发,JQUERY特效,全栈开发,vue开发

    Canvas粒子背景效果 前端开发,JQUERY特效,全栈开发,vue开发

    2018-01-28 14:00

网友点评