原生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();
        }
    }
}