initial commit

4 files changed, 183 insertions, 0 deletions

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
+    }
+}