原生JS超级马里奥（第八天）

Posted 2021-12-30 ainuo5213

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS超级马里奥（第八天）相关的知识，希望对你有一定的参考价值。

上一章讲述马里奥前进和后退动画以及其他一些动画，本章讲述马里奥跳跃动作和刹车的动作

本章的提交ID：493f38d8628e5beaa23c72ff6c38f76e46fa5b3a

github地址：ainuo5213的超级马里奥

本节目录

本节无新增文件，全部修改之前的文件代码

实现效果

入口文件变动

入口文件去除了鼠标左右键等调试相关的代码，对相机对象的位置做出了变化，当马里奥运动超过100个像素时，改变相机位置，做到相机位置跟随马里奥运动

马里奥运动特征类变动

马里奥运动特征加上了加速、减速等相关属性，dragFactor用来控制马里奥加速的最大值大小，当马里奥在跳跃过程中不能改变马里奥的朝向等

马里奥跳跃特征类改动

马里奥跳跃特征类改动较多，这里以全代码展示

import  Sides, Trait  from '../Entity.js'

export class JumpTrait extends Trait 
    constructor() 
        super('jump');

        // 是否已经做好跳跃的准备了：<0：已经在跳跃过程中；
        this.ready = 0;

        // 时长，控制马里奥在空中的时间
        this.duration = 0.3;

        // 下降速度
        this.velocity = 200;

        // 参与时间
        this.engageTime = 0;

        this.requestTime = 0;

        this.gracePeriod = 0.1;

        this.speedBoost = 0.3;
    

    get isFalling() 
        return this.ready < 0;
    

    start = () => 
        this.requestTime = this.gracePeriod;
    

    cancel = () => 
        // 结束，设置参与时间为0
        this.engageTime = 0;
        this.requestTime = 0;
    

    update = (entity, deltaTime) => 
        if (this.requestTime > 0) 
            // ready > 0才可以开始（>0表示马里奥落地了）
            if (this.ready > 0) 
                // 开始，设置参与时间为其时长
                this.engageTime = this.duration;
                this.requestTime = 0;
            
            this.requestTime -= deltaTime;
        
        // 更新方法，如果还剩余参与时间就还要更新，然后将参与时间减去已经过去的delta时间
        if (this.engageTime > 0) 
            entity.vel.y = -(this.velocity + Math.abs(entity.vel.x) * this.speedBoost);
            this.engageTime -= deltaTime;
        

        this.ready--;
    

    // 马里奥碰到了地面时，调用
    obstruct = (entity, side) => 

        // 如果当前达到了地面，就让其等于1，可以再次跳跃
        if (side === Sides.BOTTOM) 
            this.ready = 1;
        

        else if (side === Sides.TOP) 
            this.cancel();