meth-meth-method · kris10ansn · May 5, 2020 · May 29, 2020 · May 29, 2020 · May 29, 2020
diff --git a/public/audio/coin.ogg b/public/audio/coin.ogg
diff --git a/public/audio/fx/1up.ogg b/public/audio/fx/1up.ogg
diff --git a/public/audio/fx/bowser-die.ogg b/public/audio/fx/bowser-die.ogg
diff --git a/public/audio/fx/bowser-fire.ogg b/public/audio/fx/bowser-fire.ogg
diff --git a/public/audio/fx/brick-bump.ogg b/public/audio/fx/brick-bump.ogg
diff --git a/public/audio/fx/brick-destroy.ogg b/public/audio/fx/brick-destroy.ogg
diff --git a/public/audio/fx/coin.ogg b/public/audio/fx/coin.ogg
diff --git a/public/audio/fx/fireball.ogg b/public/audio/fx/fireball.ogg
diff --git a/public/audio/fx/fireworks.ogg b/public/audio/fx/fireworks.ogg
diff --git a/public/audio/fx/flagpole.ogg b/public/audio/fx/flagpole.ogg
diff --git a/public/audio/fx/jump-large.ogg b/public/audio/fx/jump-large.ogg
diff --git a/public/audio/fx/jump.ogg b/public/audio/fx/jump.ogg
diff --git a/public/audio/fx/kick.ogg b/public/audio/fx/kick.ogg
diff --git a/public/audio/fx/pause.ogg b/public/audio/fx/pause.ogg
diff --git a/public/audio/fx/pipe.ogg b/public/audio/fx/pipe.ogg
diff --git a/public/audio/fx/power-up-appears.ogg b/public/audio/fx/power-up-appears.ogg
diff --git a/public/audio/fx/power-up-consume.ogg b/public/audio/fx/power-up-consume.ogg
diff --git a/public/audio/fx/stomp.ogg b/public/audio/fx/stomp.ogg
diff --git a/public/audio/fx/thwomp.ogg b/public/audio/fx/thwomp.ogg
diff --git a/public/audio/fx/vine.ogg b/public/audio/fx/vine.ogg
diff --git a/public/audio/jump.ogg b/public/audio/jump.ogg
diff --git a/public/audio/music/castle-clear.ogg b/public/audio/music/castle-clear.ogg
diff --git a/public/audio/music/castle.ogg b/public/audio/music/castle.ogg
diff --git a/public/audio/music/die.ogg b/public/audio/music/die.ogg
diff --git a/public/audio/music/game-over.ogg b/public/audio/music/game-over.ogg
diff --git a/public/audio/music/hurry.ogg b/public/audio/music/hurry.ogg
diff --git a/public/audio/music/level-clear.ogg b/public/audio/music/level-clear.ogg
diff --git a/public/audio/music/overworld.ogg b/public/audio/music/overworld.ogg
diff --git a/public/audio/music/princess.ogg b/public/audio/music/princess.ogg
diff --git a/public/audio/music/starman.ogg b/public/audio/music/starman.ogg
diff --git a/public/audio/music/underwater.ogg b/public/audio/music/underwater.ogg
diff --git a/public/audio/music/underworld.ogg b/public/audio/music/underworld.ogg
diff --git a/public/audio/music/uw-entrance.ogg b/public/audio/music/uw-entrance.ogg
diff --git a/public/audio/stomp.ogg b/public/audio/stomp.ogg
diff --git a/public/audio/thwomp.ogg b/public/audio/thwomp.ogg
diff --git a/public/css/main.css b/public/css/main.css
@@ -0,0 +1,22 @@
+body {
+    background: #000;
+    margin: 0;
+}
+
+#screen {
+    display: block;
+    image-rendering: pixelated;
+    margin: auto;
+    width: 100vw;
+    max-height: 100vh;
+}
+
+.aspect-4-3 {
+    height: 75vw;
+    max-width: 133.3vh;
+}
+
+.aspect-16-9 {
+    height: 56.25vw;
+    max-width: 177.7vh;
+}
diff --git a/public/img/characters.gif b/public/img/characters.gif
diff --git a/public/img/font.png b/public/img/font.png
diff --git a/public/img/points.png b/public/img/points.png
diff --git a/public/img/sprites.png b/public/img/sprites.png
diff --git a/public/img/tiles.png b/public/img/tiles.png
diff --git a/public/index.html b/public/index.html
@@ -2,22 +2,10 @@
 <html>
 <head>
     <title>Super Mario</title>
-    <style>
-        body {
-            background: #000;
-            margin: 0;
-        }
-
-        #screen {
-            display: block;
-            image-rendering: pixelated;
-            height: 100vh;
-            margin: auto;
-        }
-    </style>
+    <link rel="stylesheet" href="/css/main.css"/>
     <script type="module" src="/js/main.js"></script>
 </head>
 <body>
-    <canvas id="screen" width="256" height="240"></canvas>
+    <canvas id="screen" width="256" height="240" class="aspect-4-3"></canvas>
 </body>
 </html>
diff --git a/public/js/BoundingBox.js b/public/js/BoundingBox.js
@@ -1,3 +1,5 @@
+import { Vec2 } from "./math.js";
+
 export default class BoundingBox {
     constructor(pos, size, offset) {
         this.pos = pos;
@@ -12,6 +14,31 @@ export default class BoundingBox {
             && this.right > box.left;
     }
 
+    getCenter() {
+        return new Vec2(this.meridian, this.equator);
+    }
+
+    setCenter(vec2) {
+        this.meridian = vec2.x;
+        this.equator = vec2.y;
+    }
+
+    get meridian() {
+        return this.pos.x + this.offset.x + this.size.x / 2;
+    }
+
+    set meridian(c) {
+        this.pos.x = c - (this.size.x / 2 + this.offset.x);
+    }
+
+    get equator() {
+        return this.pos.y + this.offset.y + this.size.y / 2;
+    }
+
+    set equator(c) {
+        this.pos.y = c - (this.size.y / 2 + this.offset.y);
+    }
+
     get bottom() {
         return this.pos.y + this.size.y + this.offset.y;
     }

diff --git a/public/js/Camera.js b/public/js/Camera.js
@@ -4,5 +4,8 @@ export default class Camera {
     constructor() {
         this.pos = new Vec2(0, 0);
         this.size = new Vec2(256, 224);
+
+        this.min = new Vec2(0, 0);
+        this.max = new Vec2(Infinity, Infinity);
     }
 }
diff --git a/public/js/Entity.js b/public/js/Entity.js
@@ -1,8 +1,30 @@
 import {Vec2} from './math.js';
-import Trait from './Trait.js';
 import AudioBoard from './AudioBoard.js';
 import BoundingBox from './BoundingBox.js';
 import EventBuffer from './EventBuffer.js';
+import Trait from './Trait.js';
+
+export const Align = {
+    center(target, subject) {
+        subject.bounds.setCenter(target.bounds.getCenter());
+    },
+
+    bottom(target, subject) {
+        subject.bounds.bottom = target.bounds.bottom;
+    },
+
+    top(target, subject) {
+        subject.bounds.top = target.bounds.top;
+    },
+
+    left(target, subject) {
+        subject.bounds.left = target.bounds.left;
+    },
+
+    right(target, subject) {
+        subject.bounds.right = target.bounds.right;
+    },
+};
 
 export const Sides = {
     TOP: Symbol('top'),
@@ -13,12 +35,11 @@ export const Sides = {
 
 export default class Entity {
     constructor() {
+        this.id = null;
         this.audio = new AudioBoard();
         this.events = new EventBuffer();
         this.sounds = new Set();
 
-        this.events = new EventBuffer();
-
         this.pos = new Vec2(0, 0);
         this.vel = new Vec2(0, 0);
         this.size = new Vec2(0, 0);
@@ -45,10 +66,6 @@ export default class Entity {
         });
     }
 
-    draw() {
-
-    }
-
     finalize() {
         this.events.emit(Trait.EVENT_TASK, this);
 

diff --git a/public/js/Level.js b/public/js/Level.js
@@ -1,34 +1,49 @@
 import Camera from './Camera.js';
-import Compositor from './Compositor.js';
-import EventEmitter from './EventEmitter.js';
 import MusicController from './MusicController.js';
 import EntityCollider from './EntityCollider.js';
 import Scene from './Scene.js';
 import TileCollider from './TileCollider.js';
+import { clamp } from './math.js';
 import { findPlayers } from './player.js';
 
 function focusPlayer(level) {
     for (const player of findPlayers(level.entities)) {
-        level.camera.pos.x = Math.max(0, player.pos.x - 100);
+        level.camera.pos.x = clamp(
+            player.pos.x - 100,
+            level.camera.min.x,
+            level.camera.max.x - level.camera.size.x);
+    }
+}
+
+class EntityCollection extends Set {
+    get(id) {
+        for (const entity of this) {
+            if (entity.id === id) {
+                return entity;
+            }
+        }
     }
 }
 
 export default class Level extends Scene {
     static EVENT_TRIGGER = Symbol('trigger');
+    static EVENT_COMPLETE = Symbol('complete');
 
     constructor() {
         super();
 
         this.name = "";
 
+        this.checkpoints = [];
+
         this.gravity = 1500;
         this.totalTime = 0;
 
         this.camera = new Camera();
 
         this.music = new MusicController();
 
-        this.entities = new Set();
+        this.entities = new EntityCollection();
 
         this.entityCollider = new EntityCollider(this.entities);
         this.tileCollider = new TileCollider();

diff --git a/public/js/TileCollider.js b/public/js/TileCollider.js
@@ -69,7 +69,7 @@ export default class TileCollider {
             level,
         };
 
-        const handler = handlers[match.tile.type];
+        const handler = handlers[match.tile.behavior];
         if (handler) {
             handler[index](tileCollisionContext);
         }

diff --git a/public/js/entities.js b/public/js/entities.js
@@ -1,23 +1,68 @@
 import {loadMario} from './entities/Mario.js';
-import {loadGoomba} from './entities/Goomba.js';
-import {loadKoopa} from './entities/Koopa.js';
+import {loadGoombaBrown, loadGoombaBlue} from './entities/Goomba.js';
+import {loadKoopaGreen, loadKoopaBlue} from './entities/Koopa.js';
+import {loadPiranhaPlant} from './entities/PiranhaPlant.js';
 import {loadBullet} from './entities/Bullet.js';
 import {loadCannon} from './entities/Cannon.js';
+import {loadBrickShrapnel} from './entities/BrickShrapnel.js';
+import {loadPipePortal} from './entities/PipePortal.js';
+import {loadFlagPole} from './entities/FlagPole.js';
 
-export function loadEntities(audioContext) {
+function createPool(size) {
+    const pool = [];
+
+    return function createPooledFactory(factory) {
+        for (let i = 0; i < size; i++) {
+            pool.push(factory());
+        }
+
+        let count = 0;
+        return function pooledFactory() {
+            const entity = pool[count++ % pool.length];
+            entity.lifetime = 0;
+            return entity;
+        }
+    }
+}
+
+export async function loadEntities(audioContext) {
     const entityFactories = {};
 
+    function setup(loader) {
+        return loader(audioContext);
+    }
+
     function addAs(name) {
-        return factory => entityFactories[name] = factory;
+        return function addFactory(factory) {
+            entityFactories[name] = factory;
+        }
     }
 
-    return Promise.all([
-        loadMario(audioContext).then(addAs('mario')),
-        loadGoomba(audioContext).then(addAs('goomba')),
-        loadKoopa(audioContext).then(addAs('koopa')),
-        loadBullet(audioContext).then(addAs('bullet')),
-        loadCannon(audioContext).then(addAs('cannon')),
+    await Promise.all([
+        setup(loadMario)
+            .then(addAs('mario')),
+        setup(loadPiranhaPlant)
+            .then(addAs('piranha-plant')),
+        setup(loadGoombaBrown)
+            .then(addAs('goomba-brown')),
+        setup(loadGoombaBlue)
+            .then(addAs('goomba-blue')),
+        setup(loadKoopaGreen)
+            .then(addAs('koopa-green')),
+        setup(loadKoopaBlue)
+            .then(addAs('koopa-blue')),
+        setup(loadBullet)
+            .then(addAs('bullet')),
+        setup(loadCannon)
+            .then(addAs('cannon')),
+        setup(loadPipePortal)
+            .then(addAs('pipe-portal')),
+        setup(loadFlagPole)
+            .then(addAs('flag-pole')),
+        setup(loadBrickShrapnel)
+            .then(createPool(8))
+            .then(addAs('brickShrapnel')),
+    ]);
 
-    ])
-    .then(() => entityFactories);
+    return entityFactories;
 }
diff --git a/public/js/entities/BrickShrapnel.js b/public/js/entities/BrickShrapnel.js
@@ -0,0 +1,35 @@
+import Entity from '../Entity.js';
+import LifeLimit from '../traits/LifeLimit.js';
+import Gravity from '../traits/Gravity.js';
+import Velocity from '../traits/Velocity.js';
+import {loadAudioBoard} from '../loaders/audio.js';
+import {loadSpriteSheet} from '../loaders/sprite.js';
+
+export function loadBrickShrapnel(audioContext) {
+    return Promise.all([
+        loadSpriteSheet('brick-shrapnel'),
+        loadAudioBoard('brick-shrapnel', audioContext),
+    ])
+    .then(([sprite, audio]) => {
+        return createFactory(sprite, audio);
+    });
+}
+
+function createFactory(sprite, audio) {
+    const spinBrick = sprite.animations.get('spinning-brick');
+
+    function draw(context) {
+        sprite.draw(spinBrick(this.lifetime), context, 0, 0);
+    }
+
+    return function createBrickShrapnel() {
+        const entity = new Entity();
+        entity.audio = audio;
+        entity.size.set(8, 8);
+        entity.addTrait(new LifeLimit());
+        entity.addTrait(new Gravity());
+        entity.addTrait(new Velocity());
+        entity.draw = draw;
+        return entity;
+    };
+}
diff --git a/public/js/entities/Bullet.js b/public/js/entities/Bullet.js
@@ -1,8 +1,8 @@
-import Entity, {Sides} from '../Entity.js';
+import Entity from '../Entity.js';
 import Trait from '../Trait.js';
 import Killable from '../traits/Killable.js';
-import Stomper from '../traits/Stomper.js';
 import Gravity from '../traits/Gravity.js';
+import Stomper from '../traits/Stomper.js';
 import Velocity from '../traits/Velocity.js';
 import {loadSpriteSheet} from '../loaders/sprite.js';
 
@@ -44,7 +44,7 @@ class Behavior extends Trait {
 
 function createBulletFactory(sprite) {
     function drawBullet(context) {
-        sprite.draw('bullet', context, 0, 0, this.vel.x < 0);
+        sprite.draw('bullet', context, 0, 0, this.vel.x > 0);
     }
 
     return function createBullet() {

diff --git a/public/js/entities/FlagPole.js b/public/js/entities/FlagPole.js
@@ -0,0 +1,24 @@
+import Entity from '../Entity.js';
+import Pole from '../traits/Pole.js';
+import {loadAudioBoard} from '../loaders/audio.js';
+
+export function loadFlagPole(audioContext) {
+    return Promise.all([
+        loadAudioBoard('flag-pole', audioContext),
+    ])
+    .then(([audio]) => {
+        return createFactory(audio);
+    });
+}
+
+function createFactory(audio) {
+    return function createFlagPole() {
+        const entity = new Entity();
+        const pole = new Pole();
+        entity.audio = audio;
+        entity.size.set(8, 144);
+        entity.offset.set(4, 0);
+        entity.addTrait(pole);
+        return entity;
+    };
+}