Merge pull request #22 from Nichodon/develop

Overhaul game aesthetic
briarsychung · Dec 12, 2021 · f596939 · f596939
2 parents 8a86b98 + 22b6220
commit f596939
Show file tree

Hide file tree

Showing 89 changed files with 291 additions and 117 deletions.
diff --git a/assets/background/inside.png b/assets/background/inside.png
diff --git a/assets/background/outside.png b/assets/background/outside.png
diff --git a/assets/dialogue/catch-me.png b/assets/dialogue/catch-me.png
diff --git a/assets/dialogue/empty-angry.png b/assets/dialogue/empty-angry.png
diff --git a/assets/dialogue/empty-normal.png b/assets/dialogue/empty-normal.png
diff --git a/assets/dialogue/hahaha.png b/assets/dialogue/hahaha.png
diff --git a/assets/dialogue/this-ends-here.png b/assets/dialogue/this-ends-here.png
diff --git a/assets/dialogue/you-found-me.png b/assets/dialogue/you-found-me.png
diff --git a/assets/effects/magic-big.png b/assets/effects/magic-big.png
diff --git a/assets/effects/magic-small.png b/assets/effects/magic-small.png
diff --git a/assets/effects/smoke.png b/assets/effects/smoke.png
diff --git a/assets/ground/brick-big-middle.png b/assets/ground/brick-big-middle.png
diff --git a/assets/ground/brick-big-side.png b/assets/ground/brick-big-side.png
diff --git a/assets/ground/brick-cracked-middle.png b/assets/ground/brick-cracked-middle.png
diff --git a/assets/ground/brick-cracked-side.png b/assets/ground/brick-cracked-side.png
diff --git a/assets/ground/brick-door.png b/assets/ground/brick-door.png
diff --git a/assets/ground/brick-small-middle.png b/assets/ground/brick-small-middle.png
diff --git a/assets/ground/brick-small-side.png b/assets/ground/brick-small-side.png
diff --git a/assets/ground/brick-small-thin.png b/assets/ground/brick-small-thin.png
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-middle.png b/assets/ground/ground-middle.png
diff --git a/assets/ground/ground-side.png b/assets/ground/ground-side.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/icons/arrow-left.png b/assets/icons/arrow-left.png
diff --git a/assets/icons/arrow-right.png b/assets/icons/arrow-right.png
diff --git a/assets/icons/player-blue.png b/assets/icons/player-blue.png
diff --git a/assets/icons/player-red.png b/assets/icons/player-red.png
diff --git a/assets/interactive/box-big.png b/assets/interactive/box-big.png
diff --git a/assets/interactive/box-small.png b/assets/interactive/box-small.png
diff --git a/assets/interactive/button-down.png b/assets/interactive/button-down.png
diff --git a/assets/interactive/button-up.png b/assets/interactive/button-up.png
diff --git a/assets/interactive/portal-active1.png b/assets/interactive/portal-active1.png
diff --git a/assets/interactive/portal-active2.png b/assets/interactive/portal-active2.png
diff --git a/assets/interactive/portal-inactive.png b/assets/interactive/portal-inactive.png
diff --git a/assets/interactive/pulley-cable.png b/assets/interactive/pulley-cable.png
diff --git a/assets/interactive/pulley-wheel.png b/assets/interactive/pulley-wheel.png
diff --git a/assets/interactive/spike-big.png b/assets/interactive/spike-big.png
diff --git a/assets/interactive/spike-small.png b/assets/interactive/spike-small.png
diff --git a/assets/npc/wizard.png b/assets/npc/wizard.png
diff --git a/assets/player/player-blue-dead.png b/assets/player/player-blue-dead.png
diff --git a/assets/player/player-blue-idle1.png b/assets/player/player-blue-idle1.png
diff --git a/assets/player/player-blue-idle2.png b/assets/player/player-blue-idle2.png
diff --git a/assets/player/player-blue-jump.png b/assets/player/player-blue-jump.png
diff --git a/assets/player/player-blue-run1.png b/assets/player/player-blue-run1.png
diff --git a/assets/player/player-blue-run2.png b/assets/player/player-blue-run2.png
diff --git a/assets/player/player-blue-run3.png b/assets/player/player-blue-run3.png
diff --git a/assets/player/player-main-dead.png b/assets/player/player-main-dead.png
diff --git a/assets/player/player-main-idle1.png b/assets/player/player-main-idle1.png
diff --git a/assets/player/player-main-idle2.png b/assets/player/player-main-idle2.png
diff --git a/assets/player/player-main-jump.png b/assets/player/player-main-jump.png
diff --git a/assets/player/player-main-run1.png b/assets/player/player-main-run1.png
diff --git a/assets/player/player-main-run2.png b/assets/player/player-main-run2.png
diff --git a/assets/player/player-main-run3.png b/assets/player/player-main-run3.png
diff --git a/assets/player/player-red-dead.png b/assets/player/player-red-dead.png
diff --git a/assets/player/player-red-idle1.png b/assets/player/player-red-idle1.png
diff --git a/assets/player/player-red-idle2.png b/assets/player/player-red-idle2.png
diff --git a/assets/player/player-red-jump.png b/assets/player/player-red-jump.png
diff --git a/assets/player/player-red-run1.png b/assets/player/player-red-run1.png
diff --git a/assets/player/player-red-run2.png b/assets/player/player-red-run2.png
diff --git a/assets/player/player-red-run3.png b/assets/player/player-red-run3.png
diff --git a/assets/player/player.png b/assets/player/player.png
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -3,15 +3,16 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Final</title>
+    <title>Final v0.2</title>
+    <link rel="icon" href="icon.png">
     <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>
+        <p>Version 0.2<br><br>By Robert Qu<br>and Brandon Chung</p>
     </div>
     <div class="contain" id="game">
         <canvas id="canvas"></canvas>

diff --git a/main.js b/main.js
@@ -1,29 +1,26 @@
 import { Game } from './modules/game.mjs';
 import { Canvas } from './modules/canvas.mjs';
-import { Level } from './modules/level.mjs';
+import { Texture } from './modules/texture.mjs';
+import { Animated } from './modules/animated.mjs';
 import { Player } from './modules/player.mjs';
+import { Sprite } from './modules/sprite.mjs';
 import { Input } from './modules/input.mjs';
+import { Level } from './modules/level.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 { Platform } from './modules/platform.mjs';
+import { Spike } from './modules/spike.mjs';
 import { Boost } from './modules/boost.mjs';
+import { Door } from './modules/door.mjs';
 import { Link } from './modules/link.mjs';
+import { Portal } from './modules/portal.mjs';
+import { Box } from './modules/box.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' }));
+let speed = 0;
 
 generateLevels();
 
@@ -39,37 +36,71 @@ document.getElementById('reset').addEventListener('click', () => {
     document.getElementById('menu').style.visibility = 'visible';
 });
 
+document.addEventListener('keydown', e => {
+    switch (e.key.toLowerCase()) {
+        case 'p':
+            GAME.debug = !GAME.debug;
+            if (!GAME.debug) speed = 0;
+            break;
+        case '0':
+            if (GAME.debug) speed = 0;
+            break;
+        case '9':
+            if (GAME.debug) speed = 300;
+            break;
+        case '8':
+            if (GAME.debug) speed = 100;
+            break;
+        case ',':
+            if (GAME.debug) GAME.resetLevel();
+            break;
+        case '.':
+            if (GAME.debug) GAME.nextLevel();
+            break;
+    }
+});
+
 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);
+        setTimeout(() => { window.requestAnimationFrame(loop) }, speed);
     }
 }
 
 function generateLevels() {
+    let players = [new Player(new Sprite('../assets/player/player-blue-')), new Player(new Sprite('../assets/player/player-red-'))];
+
+    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' }));
+
     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.addBackground(new Texture('../assets/background/outside.png', { w: 1024, h: 1024 }));
+
+    stair.addSpawn(new Spawn({ x: 300, y: 475 }, players[0]));
+    stair.addSpawn(new Spawn({ x: 325, y: 475 }, players[1]));
 
-    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 }));
+    stair.addObject(new Ground({ x: 310, y: 525 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 })));
+    stair.addObject(new Ground({ x: 360, y: 475 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 })));
+    stair.addObject(new Ground({ x: 410, y: 425 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { 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');
+    let stairP1 = new Platform([{ x: 335, y: 525 }, { x: 335, y: 475 }], { w: 10, h: 50 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 10, h: 50 }), { x: 0, y: 0 }, 3, 'pause');
+    let stairP2 = new Platform([{ x: 385, y: 475 }, { x: 385, y: 425 }], { w: 10, h: 50 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 10, h: 50 }), { x: 0, y: 0 }, 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.addObject(new Door({ x: 360, y: 448.5 }, { w: 16, h: 3 }, [new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })], { x: 0, y: -1.5 }, stairP1));
+    stair.addObject(new Door({ x: 410, y: 398.5 }, { w: 16, h: 3 }, [new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })], { x: 0, y: -1.5 }, 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 }));
+    stair.addGoal(new Goal({ x: 470, y: 425 }, { w: 16, h: 6 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 16, h: 6 })));
+    stair.addGoal(new Goal({ x: 450, y: 425 }, { w: 16, h: 6 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 16, h: 6 })));
 
     GAME.addLevel(stair);
 }
diff --git a/modules/animated.mjs b/modules/animated.mjs
@@ -0,0 +1,28 @@
+import { Texture } from "./texture.mjs";
+
+class Animated extends Texture {
+    constructor(urls, dim, reverse = false, length = 20) {
+        super(urls[0], dim, reverse);
+
+        this.urls = urls;
+        this.length = length;
+
+        this.frame = 0;
+        this.images = [];
+
+        for (let i = 0; i < this.urls.length; i++) {
+            this.images.push(this.generate(this.urls[i], this.reverse));
+        }
+    }
+
+    start() {
+        this.frame = 0;
+    }
+
+    draw() {
+        this.frame = this.frame === this.length * this.urls.length ? 1 : this.frame + 1;
+        return this.images[Math.floor((this.frame - 1) / this.length)];
+    }
+}
+
+export { Animated };
diff --git a/modules/boost.mjs b/modules/boost.mjs
@@ -1,8 +1,8 @@
 import { Interactive } from './interactive.mjs';
 
 class Boost extends Interactive {
-    constructor(url, pos, dim, acc) {
-        super(url, pos, dim);
+    constructor(pos, dim, texture, offset, acc) {
+        super(pos, dim, texture, offset);
 
         this.acc = acc;
     }

diff --git a/modules/box.mjs b/modules/box.mjs
@@ -1,8 +1,8 @@
 import { Mover } from './mover.mjs';
 
 class Box extends Mover {
-    constructor(url, pos, dim) {
-        super(url, pos, dim);
+    constructor(pos, dim, texture, offset) {
+        super(pos, dim, texture, offset);
     }
 }
 

diff --git a/modules/button.mjs b/modules/button.mjs
@@ -1,8 +1,8 @@
 import { Interactive } from './interactive.mjs';
 
 class Button extends Interactive {
-    constructor(url, pos, dim) {
-        super(url, pos, dim);
+    constructor(pos, dim, texture, offset) {
+        super(pos, dim, texture, offset);
     }
 }
 

diff --git a/modules/camera.mjs b/modules/camera.mjs
@@ -1,37 +1,21 @@
 class Camera {
-    constructor(pos = { x: 0, y: 0 }, range = { min: 2, max: 3 }, smooth = { pos: 0.75, zoom: 0.875 }) {
+    constructor(pos = { x: 0, y: 0 }, limit = 2, smooth = { pos: 0.75, zoom: 0.875 }) {
         this.pos = pos;
-        this.range = range;
+        this.limit = limit;
         this.smooth = smooth;
 
-        this.zoom = range.min;
+        this.zoom = limit;
     }
 
     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 = {
+            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);
-        }
+            },
+            zoom: Math.min(500 / Math.abs(players[0].pos.x - players[1].pos.x),
+                500 / Math.abs(players[0].pos.y - players[1].pos.y), this.limit)
+        };
 
         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;

diff --git a/modules/cracked.mjs b/modules/cracked.mjs
@@ -1,11 +1,11 @@
 import { Interactive } from './interactive.mjs';
 
 class Cracked extends Interactive {
-    constructor(url, pos, dim, life = 60) {
-        super(url, pos, dim);
+    constructor(pos, dim, texture, offset, life = 60) {
+        super(pos, dim, texture, offset);
 
-        this.max = life;
         this.life = life;
+        this.max = life;
     }
 
     init() {

diff --git a/modules/door.mjs b/modules/door.mjs
@@ -1,14 +1,20 @@
 import { Button } from './button.mjs';
 
 class Door extends Button {
-    constructor(url, pos, dim, platform) {
-        super(url, pos, dim);
+    constructor(pos, dim, textures, offset, platform) {
+        super(pos, dim, textures[0], offset);
 
+        this.textures = textures;
         this.platform = platform;
     }
 
     trigger() {
-        if (this.pressed.length) this.platform.play();
+        if (this.pressed.length) {
+            this.platform.play();
+            this.texture = this.textures[1];
+        } else {
+            this.texture = this.textures[0];
+        }
 
         super.trigger();
     }