Fix sprites

2022-04-01 17:12:37 -06:00 · 2022-04-01 17:12:37 -06:00 · 100bbecccb
commit 100bbecccb
parent 4cabba2561
18 changed files with 147 additions and 20 deletions
--- a/assets/sound/.DS_Store
+++ b/assets/sound/.DS_Store
--- a/assets/sound/background-music.mp3
+++ b/assets/sound/background-music.mp3
--- a/assets/sound/death.mp3
+++ b/assets/sound/death.mp3
--- a/assets/sound/death.wav
+++ b/assets/sound/death.wav
--- a/assets/sound/move.mp3
+++ b/assets/sound/move.mp3
--- a/assets/sound/move.wav
+++ b/assets/sound/move.wav
--- a/assets/sound/win.mp3
+++ b/assets/sound/win.mp3
--- a/assets/sound/win.wav
+++ b/assets/sound/win.wav
--- a/index.html
+++ b/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <title>Centipede</title>
+    <title>Big Blue Is You!</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>

--- a/src/bootstrap.js
+++ b/src/bootstrap.js
@ -1,19 +1,32 @@
-game.bootstrap = (function() {
+game.bootstrap = (() => {
  const scripts = [
+    { src: ['src/render/graphics.js'], id: 'render' },
+    { src: ['src/components/component.js', 'src/components/position.js', 'src/components/appearence.js'], id: 'components' },
+    { src: ['src/entities/entity.js'], id: 'entity' },
+    { src: ['src/entities/bigblue.js'], id: 'entities' },
+    { src: ['src/systems/render.js'], id: 'systems' },
    { src: ['src/game.js'], id: 'game' },
  ];
-  const assets = {
-    bigblue: 'assets/image/bigblue.png',
-  };
+  const assets = {};
+  [
+    "bigblue", "flag", "floor", "grass", "hedge", "liquid", "rock", 
+    "wall", "wordBigBlue", "wordFlag", "wordIs", "wordKill", "wordLava", 
+    "wordPush", "wordRock", "wordSink", "wordStop", "wordWall", "wordWater", 
+    "wordWin", "wordYou"
+  ].map((x) => assets[x] = `assets/image/${x}.png`);
+  [
+    "background-music", "death", "move", "win"
+  ].map((x) => assets[x] = `assets/sound/${x}.mp3`);

  const loadScripts = function(onDone) {
-    while (scripts.length) {
+    if (scripts.length) {
      let script = scripts.shift();
      require(script.src, () => {
-        onDone(script);
+        loadScripts(onDone);
      });
+    } else {
+      onDone();
    }
-    console.log('scripts loaded');
  }

  const loadAsset = (source) => {
@ -28,6 +41,7 @@ game.bootstrap = (function() {
        asset = new Audio();
      }
      asset.src = URL.createObjectURL(r);
+      asset.onload = () => URL.revokeObjectURL(asset.src);
      return asset;
    })
  }
@ -48,9 +62,6 @@ game.bootstrap = (function() {

  game.assets = {};
  loadAssets().then(() => {
-    loadScripts((script) => {
-      game.initialize();
-    });
+    loadScripts(() => game.initialize());
  })
-  
 })();
--- a/src/components/appearence.js
+++ b/src/components/appearence.js
@ -0,0 +1 @@
+game.components.Appearance = ({rot, width, height}) => game.Component('appearance', {rot, width, height});
--- a/src/components/component.js
+++ b/src/components/component.js
@ -0,0 +1,8 @@
+game.components = {};
+
+game.Component = (name, spec) => {
+  return {
+    name,
+    ...spec
+  }
+};
--- a/src/components/position.js
+++ b/src/components/position.js
@ -0,0 +1 @@
+game.components.Position = ({x, y}) => game.Component('position', {x, y})
--- a/src/entities/bigblue.js
+++ b/src/entities/bigblue.js
@ -0,0 +1,13 @@
+game.createBigBlue = () => {
+  const bigBlue = game.Entity();
+  bigBlue.addComponent(game.components.Position({x: 0, y: 0}));
+  bigBlue.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
+  bigBlue.sprite = game.graphics.Sprite({
+    image: game.assets.bigblue,
+    spriteHeight: 24,
+    spriteWidth: 24,
+    numFrames: 3,
+    timePerFrame: 100,
+  });
+  return bigBlue;
+}
--- a/src/entities/entity.js
+++ b/src/entities/entity.js
@ -0,0 +1,23 @@
+game.nextId = 0;
+
+game.Entity = (id=game.nextId++) => {
+  const components = {};
+
+  const addComponent = (component) => {
+    components[component.name] = component;
+  }
+  const removeComponent = (component) => {
+    delete components[component.name];
+  }
+  const hasComponent = (component) => {
+    components[component.name] !== undefined;
+  }
+
+  return {
+    id,
+    components,
+    addComponent,
+    removeComponent,
+    hasComponent
+  };
+}
--- a/src/game.js
+++ b/src/game.js
@ -1,10 +1,15 @@
-const context = document.getElementById('game-canvas').getContext('2d');
-context.imageSmoothingEnabled = false;
+game.loop = (elapsedTime) => {
+  game.systems.Render.update(elapsedTime);

-console.log("HELLO")
-game.initialize = () => {
-  context.clearRect(0, 0, game.width, game.height);
-  context.drawImage(game.assets.bigblue, 0, 0, game.width, game.height);
-
-  console.log("BITCH")
+  requestAnimationFrame(game.loop);
+}
+
+game.initialize = () => {
+  game.entities = {};
+  game.bigBlue = game.createBigBlue();
+  game.entities[game.bigBlue.id] = game.bigBlue;
+  game.bigBlue2 = game.createBigBlue();
+  game.bigBlue2.components.position = game.components.Position({x: 200, y: 100});
+  game.entities[game.bigBlue2.id] = game.bigBlue2;
+  requestAnimationFrame(game.loop);
 }
--- a/src/render/graphics.js
+++ b/src/render/graphics.js
@ -0,0 +1,47 @@
+// Pretty much a copy of my centipede code
+game.graphics = (
+  (context) => {
+    context.imageSmoothingEnabled = false;
+    const clear = () => {
+      context.clearRect(0, 0, game.width, game.height);
+    };
+    
+    // Maybe this should be a component?
+    const Sprite = ({image, spriteX, spriteY, spriteWidth, spriteHeight, timePerFrame, cols, rows, numFrames, drawFunction}) => {
+      timePerFrame = timePerFrame ?? 100;
+      numFrames = numFrames ?? 1;
+      cols = cols ?? numFrames;
+      rows = rows ?? 1;
+      spriteX = spriteX ?? 0;
+      spriteY = spriteY ?? 0;
+
+      let currentFrame = 0;
+      let lastTime = performance.now();
+
+      let draw;
+      if (!drawFunction) {
+        draw = (_elapsedTime, {x, y, rot, width, height}) => {
+          if (numFrames > 1) {
+            if (performance.now()-lastTime > timePerFrame) {
+              lastTime = performance.now();
+              currentFrame = (currentFrame + 1) % numFrames;
+            }
+          }
+          context.save();
+          context.translate(x+width/2, y+height/2);
+          context.rotate(rot * Math.PI / 180);
+          context.translate(-x-width/2, -y-height/2);
+          const row = currentFrame % rows;
+          const col = Math.floor(currentFrame / rows);
+          context.drawImage(image, spriteX+col*spriteWidth, spriteY+row*spriteHeight, spriteWidth, spriteHeight, x, y, width, height);
+          context.restore();
+        };
+      } else {
+        draw = (elapsedTime, drawSpec) => drawFunction(elapsedTime, drawSpec, context);
+      }
+      return { draw };
+    }
+
+    return { clear, Sprite };
+  }
+)(document.getElementById("game-canvas").getContext("2d"));
--- a/src/systems/render.js
+++ b/src/systems/render.js
@ -0,0 +1,18 @@
+game.systems = {};
+game.systems.Render = ((graphics) => {
+  const renderEntities = (elapsedTime, entities) => {
+    for (let id in entities) {
+      const entity = entities[id];
+      if (entity.sprite && entity.components.position && entity.components.appearance) {
+//        document.getElementById("game-canvas").getContext("2d").drawImage(game.assets.bigblue, 100, 100, 100, 100);
+        entity.sprite.draw(elapsedTime, {...entity.components.position, ...entity.components.appearance});
+      }
+    }
+  }
+
+  const update = (elapsedTime) => {
+    graphics.clear();
+    renderEntities(elapsedTime, game.entities);
+  }
+  return { update };
+})(game.graphics);
				`@ -0,0 +1 @@`
				`game.components.Appearance = ({rot, width, height}) => game.Component('appearance', {rot, width, height});`
				`@ -0,0 +1 @@`
				`game.components.Position = ({x, y}) => game.Component('position', {x, y})`