Merge pull request #16 from Nichodon/develop

Add initial demo
briarsychung · Dec 11, 2021 · 8a86b98 · 8a86b98
2 parents 45e2f8c + 015cacc
commit 8a86b98
Show file tree

Hide file tree

Showing 30 changed files with 903 additions and 5 deletions.
diff --git a/assets/ground/button.png b/assets/ground/button.png
diff --git a/assets/ground/goal.png b/assets/ground/goal.png
diff --git a/assets/ground/ground.png b/assets/ground/ground.png
diff --git a/assets/ground/platform.png b/assets/ground/platform.png
diff --git a/assets/player/player.png b/assets/player/player.png
diff --git a/index.html b/index.html
@@ -1,9 +1,27 @@
 <!DOCTYPE html>
 <html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-    </head>
 
-    <body>
-    </body>
+<head>
+    <meta charset="utf-8">
+    <title>Final</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+
+<body>
+    <div class="contain" id="menu" style="visibility: visible;">
+        <h1>Insert Name Here</h1>
+        <button id="start">Start Game</button>
+        <p>Version 0.1<br><br>By Robert Qu<br>and Brandon Chung</p>
+    </div>
+    <div class="contain" id="game">
+        <canvas id="canvas"></canvas>
+    </div>
+    <div class="contain" id="end">
+        <h1>You Won</h1>
+        <button id="reset">Back to Menu</button>
+        <p>Some info<br>goes here</p>
+    </div>
+    <script type="module" src="main.js"></script>
+</body>
+
 </html>
diff --git a/main.css b/main.css
@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+* {
+    color: #fff;
+    font-family: 'Press Start 2P';
+    font-size: 20px;
+    line-height: 25px;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    text-align: center;
+}
+
+html,
+body {
+    background-color: black;
+    height: 100%;
+    width: 100%;
+}
+
+.contain {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: fixed;
+    top: 20px; bottom: 20px; left: 20px; right: 20px;
+    visibility: hidden;
+}
+
+canvas {
+    background-color: white;
+    border-radius: 10px;
+}
+
+h1 {
+    font-size: 50px;
+    line-height: 62.5px;
+    margin-bottom: 50px;
+}
+
+button {
+    background: none;
+    border: 2.5px solid #ccc;
+    padding: 10px;
+}
+
+button:hover {
+    background: none;
+    border: 2.5px solid white;
+    padding: 10px;
+}
+
+p {
+    margin-top: 50px;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,75 @@
+import { Game } from './modules/game.mjs';
+import { Canvas } from './modules/canvas.mjs';
+import { Level } from './modules/level.mjs';
+import { Player } from './modules/player.mjs';
+import { Input } from './modules/input.mjs';
+import { Spawn } from './modules/spawn.mjs';
+import { Box } from './modules/box.mjs';
+import { Ground } from './modules/ground.mjs';
+import { Spike } from './modules/spike.mjs';
+import { Platform } from './modules/platform.mjs';
+import { Cracked } from './modules/cracked.mjs';
+import { Door } from './modules/door.mjs';
+import { Portal } from './modules/portal.mjs';
+import { Boost } from './modules/boost.mjs';
+import { Link } from './modules/link.mjs';
+import { Goal } from './modules/goal.mjs';
+
+const GAME = new Game(new Canvas(document.getElementById('canvas')));
+
+let players = [new Player('../assets/player/player.png'), new Player('../assets/player/player.png')];
+
+GAME.addPlayer(players[0]);
+GAME.addPlayer(players[1]);
+
+GAME.addInput(new Input(players[0]));
+GAME.addInput(new Input(players[1], { left: 'arrowleft', right: 'arrowright', up: 'arrowup' }));
+
+generateLevels();
+
+document.getElementById('start').addEventListener('click', () => {
+    document.getElementById('menu').style.visibility = 'hidden';
+    document.getElementById('game').style.visibility = 'visible';
+    GAME.start();
+    loop();
+});
+
+document.getElementById('reset').addEventListener('click', () => {
+    document.getElementById('end').style.visibility = 'hidden';
+    document.getElementById('menu').style.visibility = 'visible';
+});
+
+function loop() {
+    GAME.update();
+    if (GAME.stage === 'win') {
+        document.getElementById('game').style.visibility = 'hidden';
+        document.getElementById('end').style.visibility = 'visible';
+    } else {
+        setTimeout(() => { window.requestAnimationFrame(loop) }, 0);
+    }
+}
+
+function generateLevels() {
+    let stair = new Level();
+
+    stair.addSpawn(new Spawn(players[0], { x: 0, y: -25 }));
+    stair.addSpawn(new Spawn(players[1], { x: 20, y: -25 }));
+
+    stair.addObject(new Ground('../assets/ground/ground.png', { x: 10, y: 25 }, { w: 40, h: 50 }));
+    stair.addObject(new Ground('../assets/ground/ground.png', { x: 60, y: -25 }, { w: 40, h: 50 }));
+    stair.addObject(new Ground('../assets/ground/ground.png', { x: 110, y: -75 }, { w: 40, h: 50 }));
+
+    let stairP1 = new Platform('../assets/ground/platform.png', [{ x: 35, y: 25 }, { x: 35, y: -25 }], { w: 10, h: 50 }, 3, 'pause');
+    let stairP2 = new Platform('../assets/ground/platform.png', [{ x: 85, y: -25 }, { x: 85, y: -75 }], { w: 10, h: 50 }, 3, 'pause');
+
+    stair.addObject(stairP1);
+    stair.addObject(stairP2);
+
+    stair.addObject(new Door('../assets/ground/button.png', { x: 60, y: -50 }, { w: 25, h: 2 }, stairP1));
+    stair.addObject(new Door('../assets/ground/button.png', { x: 110, y: -100 }, { w: 25, h: 2 }, stairP2));
+
+    stair.addGoal(new Goal('../assets/ground/goal.png', { x: 170, y: -75 }));
+    stair.addGoal(new Goal('../assets/ground/goal.png', { x: 150, y: -75 }));
+
+    GAME.addLevel(stair);
+}
diff --git a/modules/boost.mjs b/modules/boost.mjs
@@ -0,0 +1,20 @@
+import { Interactive } from './interactive.mjs';
+
+class Boost extends Interactive {
+    constructor(url, pos, dim, acc) {
+        super(url, pos, dim);
+
+        this.acc = acc;
+    }
+
+    trigger() {
+        for (let i = 0; i < this.pressed.length; i++) {
+            this.pressed[i].vel.x += this.acc.x;
+            this.pressed[i].vel.y += this.acc.y;
+        }
+
+        super.trigger();
+    }
+}
+
+export { Boost };
diff --git a/modules/box.mjs b/modules/box.mjs
@@ -0,0 +1,9 @@
+import { Mover } from './mover.mjs';
+
+class Box extends Mover {
+    constructor(url, pos, dim) {
+        super(url, pos, dim);
+    }
+}
+
+export { Box };
diff --git a/modules/button.mjs b/modules/button.mjs
@@ -0,0 +1,9 @@
+import { Interactive } from './interactive.mjs';
+
+class Button extends Interactive {
+    constructor(url, pos, dim) {
+        super(url, pos, dim);
+    }
+}
+
+export { Button };
diff --git a/modules/camera.mjs b/modules/camera.mjs
@@ -0,0 +1,42 @@
+class Camera {
+    constructor(pos = { x: 0, y: 0 }, range = { min: 2, max: 3 }, smooth = { pos: 0.75, zoom: 0.875 }) {
+        this.pos = pos;
+        this.range = range;
+        this.smooth = smooth;
+
+        this.zoom = range.min;
+    }
+
+    update(players) {
+        let max = {
+            x: 750 / Math.abs(players[0].pos.x - players[1].pos.x),
+            y: 750 / Math.abs(players[0].pos.y - players[1].pos.y)
+        };
+        let target = {
+            pos: { x: 0, y: 0 },
+            zoom: {}
+        };
+
+        if (max.x < this.range.min || max.y < this.range.min) {
+            target.pos = { ...players[0].pos };
+            target.zoom = this.range.min;
+        } else {
+            target.pos = {
+                x: (players[0].pos.x + players[1].pos.x) / 2,
+                y: (players[0].pos.y + players[1].pos.y) / 2
+            };
+
+            max = {
+                x: Math.max(Math.min(max.x, this.range.max), this.range.min),
+                y: Math.max(Math.min(max.y, this.range.max), this.range.min)
+            };
+            target.zoom = Math.min(max.x, max.y);
+        }
+
+        this.zoom = this.smooth.zoom * this.zoom + (1 - this.smooth.zoom) * target.zoom;
+        this.pos.x = this.smooth.pos * this.pos.x + (1 - this.smooth.pos) * target.pos.x;
+        this.pos.y = this.smooth.pos * this.pos.y + (1 - this.smooth.pos) * target.pos.y;
+    }
+}
+
+export { Camera };
diff --git a/modules/canvas.mjs b/modules/canvas.mjs
@@ -0,0 +1,39 @@
+class Canvas {
+    constructor(element, margin = 20) {
+        this.element = element;
+        this.margin = margin;
+
+        this.width = 0;
+        this.height = 0;
+
+        let resize = () => {
+            const DPR = window.devicePixelRatio;
+
+            let max = {
+                w: window.innerWidth - margin * 2,
+                h: window.innerHeight - margin * 2
+            }
+
+            if (max.w / 16 > max.h / 9) {
+                this.width = 16 * max.h / 9;
+                this.height = max.h;
+            } else {
+                this.width = max.w;
+                this.height = 9 * max.w / 16;
+            }
+
+            this.element.style.width = this.width + 'px';
+            this.element.style.height = this.height + 'px';
+            this.element.width = Math.floor(this.width * DPR);
+            this.element.height = Math.floor(this.height * DPR);
+
+            this.element.getContext('2d').imageSmoothingEnabled = false;
+            this.element.getContext('2d').scale(DPR, DPR);
+        };
+
+        window.addEventListener('resize', resize);
+        resize();
+    }
+}
+
+export { Canvas };
diff --git a/modules/cracked.mjs b/modules/cracked.mjs
@@ -0,0 +1,27 @@
+import { Interactive } from './interactive.mjs';
+
+class Cracked extends Interactive {
+    constructor(url, pos, dim, life = 60) {
+        super(url, pos, dim);
+
+        this.max = life;
+        this.life = life;
+    }
+
+    init() {
+        this.life = this.max;
+
+        super.init();
+    }
+
+    trigger() {
+        if (this.pressed.length) this.life--;
+        if (this.life === 0) {
+            this.die();
+        }
+
+        super.trigger();
+    }
+}
+
+export { Cracked };
diff --git a/modules/door.mjs b/modules/door.mjs
@@ -0,0 +1,17 @@
+import { Button } from './button.mjs';
+
+class Door extends Button {
+    constructor(url, pos, dim, platform) {
+        super(url, pos, dim);
+
+        this.platform = platform;
+    }
+
+    trigger() {
+        if (this.pressed.length) this.platform.play();
+
+        super.trigger();
+    }
+}
+
+export { Door };