上一章主要是繪制馬里奧和繪制圖像代碼的部分重構(gòu)

本章主要是用于時(shí)間控制，實(shí)現(xiàn)馬里奧每次彈跳的定點(diǎn)和彈跳起點(diǎn)一致，對(duì)源代碼拆分比較多，各位可以跟著原作者視頻一起敲

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

github地址：ainuo5213的超級(jí)馬里奧

本節(jié)目錄

?本章效果

?

目錄說明：

????????mario.js：馬里奧實(shí)體工廠類文件，用于創(chuàng)建馬里奧，封裝馬里奧的繪制過程

????????Entity.js：馬里奧實(shí)體類，用于記錄實(shí)體的位置和速度等信息

? ? ? ? Velocity.js：用來記錄馬里奧橫向和縱向速度的實(shí)體

? ? ? ? Timer.js：繪制瑪麗奧，更新馬里奧位置的方法（原入口文件main方法中的update）封裝

入口文件改動(dòng)

?入口文件改動(dòng)：

? ? ? ? 1. 將原本加載馬里奧的方法移動(dòng)到了mario.js

????????2. 將馬里奧位置改變的方法也內(nèi)聚到了mario.js，并新增了橫向和縱向速度變量對(duì)象，實(shí)現(xiàn)對(duì)橫向速度和縱向速度的控制

Entity實(shí)體：

Entity實(shí)體主要用于對(duì)速度和位置的記錄對(duì)象，其實(shí)現(xiàn)交給馬里奧工廠函數(shù)

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

創(chuàng)建馬里奧工廠函數(shù)

創(chuàng)建馬里奧的工廠函數(shù)將原本loadMarioSprite方法內(nèi)聚返回了馬里奧對(duì)象，并在馬里奧對(duì)象上面增加了兩個(gè)方法分別是drawMario(繪制馬里奧)和updateMario(更新馬里奧位置)的方法，其中updateMario方法將速度和時(shí)間進(jìn)行累加操作，使馬里奧不再做勻速運(yùn)動(dòng)

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ùn)動(dòng)的時(shí)間控制

為實(shí)現(xiàn)馬里奧的每次跳躍的定點(diǎn)都保持在y軸方向一致，原作者這里使用累加法，當(dāng)誤差大于閾值時(shí)，就減去閾值，相當(dāng)于歸0

馬里奧入口中增加了update方法，用于updateProxy調(diào)用，來更新馬里奧位置。

export default class Timer {constructor(deltaTime = 1 / 60) {let accumulatedTime = 0;let lastTime = 0;this.updateProxy = time => {// 因?yàn)閐eltaTime是以秒為單位，所以這里運(yùn)動(dòng)的累加誤差時(shí)間需要除以1000accumulatedTime += (time - lastTime) / 1000;while (accumulatedTime > deltaTime) {this.update(deltaTime);accumulatedTime -= deltaTime}lastTime = time;this.enqueue();}}enqueue = () => {requestAnimationFrame(this.updateProxy);}start = () => {this.enqueue();} }

總結(jié)

以上是生活随笔為你收集整理的原生JS超级马里奥（第三天）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。