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

上一章主要是绘制马里奥和绘制图像代码的部分重构

本章主要是用于时间控制，实现马里奥每次弹跳的定点和弹跳起点一致，对源代码拆分比较多，各位可以跟着原作者视频一起敲

本章的提交ID：90dc4d0a02cc67339b120e55f29e46751e76e0c6、6773e3baedba43f22978e2d0a2a61f514fa524d1

github地址：ainuo5213的超级马里奥

本节目录

本章效果

目录说明：

mario.js：马里奥实体工厂类文件，用于创建马里奥，封装马里奥的绘制过程

Entity.js：马里奥实体类，用于记录实体的位置和速度等信息

Velocity.js：用来记录马里奥横向和纵向速度的实体

Timer.js：绘制玛丽奥，更新马里奥位置的方法（原入口文件main方法中的update）封装

入口文件改动

入口文件改动：

1. 将原本加载马里奥的方法移动到了mario.js

2. 将马里奥位置改变的方法也内聚到了mario.js，并新增了横向和纵向速度变量对象，实现对横向速度和纵向速度的控制

Entity实体：

Entity实体主要用于对速度和位置的记录对象，其实现交给马里奥工厂函数

import { Velocity } from "./Velocity.js";export class Entity {constructor() {this.pos = new Velocity(0, 0);this.vel = new Velocity(0, 0);}
}

创建马里奥工厂函数

创建马里奥的工厂函数将原本loadMarioSprite方法内聚返回了马里奥对象，并在马里奥对象上面增加了两个方法分别是drawMario(绘制马里奥)和updateMario(更新马里奥位置)的方法，其中updateMario方法将速度和时间进行累加操作，使马里奥不再做匀速运动

import { Entity } from "./Entity.js"
import { loadMarioSprite } from "./sprites.js";export function createMario() {return loadMarioSprite().then(marioSprite => {const mario = new Entity();mario.draw = function drawMario(context) {marioSprite.draw('mario', context, this.pos.x, this.pos.y);}mario.update = function updateMario(deltaTime) {this.pos.x += this.vel.x * deltaTime;this.pos.y += this.vel.y * deltaTime;}return mario;})
}

马里奥运动的时间控制

为实现马里奥的每次跳跃的定点都保持在y轴方向一致，原作者这里使用累加法，当误差大于阈值时，就减去阈值，相当于归0

马里奥入口中增加了update方法，用于updateProxy调用，来更新马里奥位置。

export default class Timer {constructor(deltaTime = 1 / 60) {let accumulatedTime = 0;let lastTime = 0;this.updateProxy = time => {// 因为deltaTime是以秒为单位，所以这里运动的累加误差时间需要除以1000accumulatedTime += (time - lastTime) / 1000;while (accumulatedTime > deltaTime) {this.update(deltaTime);accumulatedTime -= deltaTime}lastTime = time;this.enqueue();}}enqueue = () => {requestAnimationFrame(this.updateProxy);}start = () => {this.enqueue();}
}