From a840990bdcabf45fb0d377478ba0ab27222434ae Mon Sep 17 00:00:00 2001 From: niliara-edu Date: Mon, 23 Dec 2024 18:32:29 +0100 Subject: initial commit --- src/engine/clock.js | 26 +++++++++++++++ src/engine/keyboard.js | 23 +++++++++++++ src/engine/screen.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/engine/vector.js | 47 +++++++++++++++++++++++++++ 4 files changed, 183 insertions(+) create mode 100644 src/engine/clock.js create mode 100644 src/engine/keyboard.js create mode 100644 src/engine/screen.js create mode 100644 src/engine/vector.js (limited to 'src/engine') diff --git a/src/engine/clock.js b/src/engine/clock.js new file mode 100644 index 0000000..e817863 --- /dev/null +++ b/src/engine/clock.js @@ -0,0 +1,26 @@ +import { Engine } from "../engine.js" + +export { Engine } from "../engine.js" +const fps = 60 + +/* cap the game's fps */ +let msPrev = window.performance.now() +const msPerFrame = 1000 / fps +function tick() { + window.requestAnimationFrame(tick) + + const msNow = window.performance.now() + const msPassed = msNow - msPrev + + if (msPassed < msPerFrame) return + + const excessTime = msPassed % msPerFrame + msPrev = msNow - excessTime + + Engine.frame++ + Engine.updateEngine() +} + +export function startClock() { + tick() +} diff --git a/src/engine/keyboard.js b/src/engine/keyboard.js new file mode 100644 index 0000000..d634519 --- /dev/null +++ b/src/engine/keyboard.js @@ -0,0 +1,23 @@ +export function setUpKeyboard() { + document.addEventListener("keyup", k => trigger(k)) + document.addEventListener("keydown", k => trigger(k)) +} + +export const keys = { + right: false, + left: false, + up: false, + down: false, + shoot: false, +} + +function trigger(event) { + let on = event.type == "keydown" + switch (event.key) { + case "ArrowRight": keys.right = on; break; + case "ArrowLeft": keys.left = on; break; + case "ArrowUp": keys.up = on; break; + case "ArrowDown": keys.down = on; break; + case "z": case "Z": keys.shoot = on; break; + } +} diff --git a/src/engine/screen.js b/src/engine/screen.js new file mode 100644 index 0000000..2d32b62 --- /dev/null +++ b/src/engine/screen.js @@ -0,0 +1,87 @@ +import { Vector } from "./vector.js" +import { BACKGROUND } from "../assets.js" + +export class Screen { + viewport = new Vector(650, 500) + + ///////////////////// START ////////////////////// + constructor() { + this.createHTMLElements() + this.setUpTriggers() + this.resize() + } + + createHTMLElements() { + this.div + this.background + this.spawn + + /* create main div */ + this.div = document.createElement("div") + this.div.id = "screen" + this.div.style.backgroundColor = "black" + + /* create background image */ + this.background = document.createElement("img") + this.background.className = "background" + this.background.src = `${BACKGROUND.DEFAULT}` + this.background.style.visibility = "hidden" + this.div.appendChild(this.background) + + /* create relative div to append children */ + this.spawn = document.createElement("div") + this.div.appendChild(this.spawn) + document.body.appendChild(this.div) + } + + setUpTriggers() { + addEventListener("resize", () => { this.resize() }); + } + + + ///////////////////// RESIZE ////////////////////// + real_position = new Vector(0, 0) + real_size = new Vector(0, 0) + scale = new Vector(0, 0) + + resize() { + let w = new Vector(window.innerWidth, window.innerHeight) + + /* get max size keeping aspect ratio */ + if (w.y / this.viewport.y > w.x / this.viewport.x) { + this.real_size.x = w.x + this.real_size.y = Math.floor(w.x / this.viewport.x * this.viewport.y) + } else { + this.real_size.y = w.y + this.real_size.x = Math.floor(w.y / this.viewport.y * this.viewport.x) + } + this.div.style.width = `${this.real_size.x}px` + this.div.style.height = `${this.real_size.y}px` + + /* get centered position */ + this.real_position.x = w.x / 2 - this.real_size.x / 2 + this.real_position.y = w.y / 2 - this.real_size.y / 2 + this.real_position.floor() + + this.div.style.left = `${this.real_position.x}px` + this.div.style.top = `${this.real_position.y}px` + + /* set scale */ + this.scale = this.real_size.x / this.viewport.x + } + + + ///////////////////// COMMANDS ////////////////////// + append(element) { this.spawn.appendChild(element) } + + draw(span, position, size, /* rotation = 0 */) { + span.style.width = `${size.x * this.scale}px` + span.style.height = `${size.y * this.scale}px` + span.style.top = `${(position.y - size.x / 2) * this.scale}px` + span.style.left = `${(position.x - size.y / 2) * this.scale}px` + } + + setBackground(img) { this.background.src = img } + showBackground() { this.background.visibility = "visible" } + hideBackground() { this.background.visibility = "hidden" } +} diff --git a/src/engine/vector.js b/src/engine/vector.js new file mode 100644 index 0000000..452e47b --- /dev/null +++ b/src/engine/vector.js @@ -0,0 +1,47 @@ +export class Vector { + constructor(x=0, y=0) { + this.x = x + this.y = y + } + + add(newVector) { + this.x += newVector.x + this.y += newVector.y + return this + } + + normalize() { + if (this.x != 0 && 0 != this.y) { + let hyp = Math.abs(this.x) + let cSquared = Math.pow(hyp, 2) / 2 + let c = Math.sqrt(cSquared, 2) + + this.x = this.x / Math.abs(this.x) * c + this.y = this.y / Math.abs(this.x) * c + } + return this + } + + multiply(multiplier) { + this.x *= multiplier + this.y *= multiplier + return this + } + + clone() { + return new Vector(this.x, this.y) + } + + static division(vector_a, vector_b) { + return new Vector( + vector_a.x / vector_b.x, + vector_a.y / vector_b.y + ) + } + + floor() { + this.x = Math.floor(this.x) + this.y = Math.floor(this.y) + return this + } +} -- cgit v1.2.3