// This rough sketch written on a // phone is divided in three parts: // 1. Initialization (clamp(), FPS, // DT). // 2. Ticker class which contains // the logic of the game loop. // 3. MyTicker class which // contains the logic of an // example (green bouncing // square). /** * @param {number} number * @param {number} min * @param {number} max * * @returns {number} */ const clamp = (number, min, max) => Math.max(Math.min(number, max), min) /** * @param {number} number * * @returns {number} */ const clamp01 = (number) => clamp(number, 0, 1) /** * @param {number} min * @param {number} max * * @returns {number} */ const random = (min, max) => min + Math.random() * (max - min) const RATE = clamp( Number(prompt("Enter FPS (used for the update function)", "20")), 1, 144, ) const TIME_CHANGE_MS = 1000 / RATE /** @typedef {{ x: number; y: number }} IVec2 */ /** * @param {number} x * @param {number} y * * @returns {IVec2} */ const vec2 = (x, y) => ({ x, y }) const { EventEmitter } = (() => { const createCounter = () => { let i = 0 return () => ++i } const createId = createCounter() /** * @template T */ class EventEmitter { /** @typedef {(event: T) => Promise | void} Listener */ /** @typedef {{ id: number; listener: Listener; once: boolean }} Data */ /** @type {Data[]} */ #listenerObjects = [] /** * @param {Listener} listener * @param {{ once?: boolean }} [options] * * @returns {void} */ addListener(listener, options) { const id = createId() const once = Boolean(options?.once) const data = { id, listener, once } this.#listenerObjects.push(data) } /** * @param {Listener} listener * * @returns {void} */ removeListener(listener) { this.#listenerObjects = this.#listenerObjects.filter( (listenerObject) => listenerObject.listener !== listener, ) } /** * @param {T} event * * @returns {void} */ dispatchEvent(event) { const listenerObjects = this.#listenerObjects.slice() /** @type {Set} */ const stale = new Set() for (const { id, listener, once } of listenerObjects) { listener(event) if (once) { stale.add(id) } } this.#listenerObjects = this.#listenerObjects.filter( ({ id }) => !stale.has(id), ) } } return { EventEmitter } })() class Ticker { /** @type {EventEmitter} */ onRender = new EventEmitter() /** @type {EventEmitter} */ onUpdate = new EventEmitter() /** @type {number | null} */ #pendingAnimationFrame = null /** @type {number} */ #next = performance.now() /** @type {number} */ #prev = performance.now() /** @type {boolean} */ #stopped = true /** @type {boolean} */ #running = false start() { if (this.#stopped) { this.#next = performance.now() this.#prev = performance.now() } this.#pendingAnimationFrame = null this.#stopped = false this.#running = true // while update is behind for (; this.#next <= performance.now(); this.#next += TIME_CHANGE_MS) { const elapsedTime = (this.#next - this.#prev) / 1000 if (elapsedTime > 0) { this.onUpdate.dispatchEvent(elapsedTime) } this.#prev = this.#next } const interpolation = clamp01( (performance.now() - this.#prev) / (this.#next - this.#prev), ) this.onRender.dispatchEvent((TIME_CHANGE_MS / 1000) * interpolation) if (this.#running) { this.#pendingAnimationFrame = requestAnimationFrame(this.start.bind(this)) } } stop() { this.#running = false this.#stopped = true // ungraceful stop called outside the loop if (this.#pendingAnimationFrame) { cancelAnimationFrame(this.#pendingAnimationFrame) } } } const canvas = document.getElementById("canvas") const context = canvas.getContext("2d") const dimensions = vec2(0, 0) class Square { bounce = random(0.88, 0.99) bounceLimit = 8 fillStyle = `hsl(${Math.floor(random(0, 360))}, 70%, 70%)` mass = random(256, 1024) rem = vec2(0, 0) resistance = random(16, 64) v0 = vec2(random(256, 512), random(256, 512)) constructor() { this.dimensions = vec2(random(16, 32), random(16, 32)) this.boundaries = vec2( dimensions.x - this.dimensions.x, dimensions.y - this.dimensions.y, ) const x = random(0, this.boundaries.x) const y = random(0, this.boundaries.y) this.p0 = vec2(x, y) this.p = this.p0 this.v = this.v0 } /** * poor man's collision * * @param {number} elapsedTime * @param {Square} other * * @returns {void} */ collide(elapsedTime, other) { let { x, y } = this.p0 const aStart = vec2(x, y) const aEnd = vec2(x + this.dimensions.x, y + this.dimensions.y) const bStart = vec2(other.p0.x, other.p0.y) const bEnd = vec2( other.p0.x + other.dimensions.x, other.p0.y + other.dimensions.y, ) if (aStart.x >= bStart.x) { x = Math.max(x, bEnd.x) } else if (aEnd.x <= bEnd.x) { x = Math.min(x, bStart.x - this.dimensions.x) } if (aStart.y >= bStart.y) { y = Math.max(y, bEnd.y) } else if (aEnd.y <= bEnd.y) { y = Math.min(y, bStart.y - this.dimensions.y) } this.p.x += x - this.p0.x this.p.y += y - this.p0.x this.rem.x -= x - this.p0.x this.rem.y -= y - this.p0.y this.v.x -= (other.v0.x / other.mass - this.v0.x / this.mass) * elapsedTime this.v.y -= (other.v0.y / other.mass - this.v0.y / this.mass) * elapsedTime } /** * @param {number} elapsedTime * * @returns {void} */ update(elapsedTime) { const resistance = this.resistance * elapsedTime this.rem.x += this.v.x this.rem.y += this.v.y // while there is an unapplied velocity for (let i = this.bounceLimit; i > 0 && (this.rem.x || this.rem.y); --i) { // desired position const x = this.p.x + elapsedTime * this.rem.x const y = this.p.y + elapsedTime * this.rem.y // clamped position this.p.x = clamp(x, 0, dimensions.x - this.dimensions.x) this.p.y = clamp(y, 0, dimensions.y - this.dimensions.y) if (this.p.x !== x) { // update remaining velocity this.rem.x = this.bounce * (this.p.x - x) this.v.x *= -this.bounce } else { this.rem.x = 0 } if (this.p.y !== y) { // update remaining velocity this.rem.y = this.bounce * (this.p.y - y) this.v.y *= -this.bounce } else { this.rem.y = 0 } } this.v.y += this.mass * elapsedTime this.v.x -= Math.sign(this.v.x) * resistance this.v.y -= Math.sign(this.v.y) * resistance this.v0.x = this.v.x this.v0.y = this.v.y this.p0.x = this.p.x this.p0.y = this.p.y } /** * @param {number} interpolation * * @returns {void} */ render(interpolation) { context.fillStyle = this.fillStyle const x = this.p.x + (this.v.x - this.rem.x) * interpolation const y = this.p.y + (this.v.y - this.rem.y) * interpolation context.fillRect( clamp(x, 0, this.boundaries.x), clamp(y, 0, this.boundaries.y), this.dimensions.x, this.dimensions.y, ) } } /** * @param {() => void} callback * * @returns {void} */ const complete = (callback) => { if (document.readyState === "complete") { callback() return } const onReadyStateChange = () => { if (document.readyState === "complete") { document.removeEventListener("readystatechange", onReadyStateChange) callback() } } document.addEventListener("readystatechange", onReadyStateChange) } complete(() => { const style = getComputedStyle(canvas) dimensions.x = parseFloat(style.getPropertyValue("width")) dimensions.y = parseFloat(style.getPropertyValue("height")) canvas.height = devicePixelRatio * dimensions.y canvas.width = devicePixelRatio * dimensions.x context.scale(devicePixelRatio, devicePixelRatio) /** @type {Square[]} */ const squares = new Array(50) const ticker = new Ticker() for (let i = 0; i < squares.length; ++i) { squares[i] = new Square() } /** * @param {Square} a * @param {Square} b * * @returns {boolean} */ const isColliding = (a, b) => { const x = a.p.x < b.p.x + b.dimensions.x && b.p.x < a.p.x + a.dimensions.x const y = a.p.y < b.p.y + b.dimensions.y && b.p.y < a.p.y + a.dimensions.y return x && y } ticker.onUpdate.addListener((elapsedTime) => { for (const a of squares) { for (const b of squares) { if (b === a) { continue } if (isColliding(a, b)) { a.collide(elapsedTime, b) } } } for (const square of squares) { square.update(elapsedTime) } }) ticker.onRender.addListener((interpolation) => { context.fillStyle = "#000000" context.fillRect(0, 0, dimensions.x, dimensions.y) for (const square of squares) { square.render(interpolation) } }) ticker.start() })

Advanced Game Loop