diff --git a/assets/sound/.DS_Store b/assets/sound/.DS_Store
index 7b7843b..b398fa8 100644
Binary files a/assets/sound/.DS_Store and b/assets/sound/.DS_Store differ
diff --git a/assets/sound/background-music.mp3 b/assets/sound/background-music.mp3
deleted file mode 100644
index 9f5051d..0000000
Binary files a/assets/sound/background-music.mp3 and /dev/null differ
diff --git a/assets/sound/death.mp3 b/assets/sound/death.mp3
new file mode 100644
index 0000000..b60a956
Binary files /dev/null and b/assets/sound/death.mp3 differ
diff --git a/assets/sound/death.wav b/assets/sound/death.wav
deleted file mode 100644
index 0ec4d5f..0000000
Binary files a/assets/sound/death.wav and /dev/null differ
diff --git a/assets/sound/move.mp3 b/assets/sound/move.mp3
new file mode 100644
index 0000000..59d2de5
Binary files /dev/null and b/assets/sound/move.mp3 differ
diff --git a/assets/sound/move.wav b/assets/sound/move.wav
deleted file mode 100644
index 62fa5fb..0000000
Binary files a/assets/sound/move.wav and /dev/null differ
diff --git a/assets/sound/win.mp3 b/assets/sound/win.mp3
new file mode 100644
index 0000000..ad2887c
Binary files /dev/null and b/assets/sound/win.mp3 differ
diff --git a/assets/sound/win.wav b/assets/sound/win.wav
deleted file mode 100644
index dd872c2..0000000
Binary files a/assets/sound/win.wav and /dev/null differ
diff --git a/index.html b/index.html
index 9fdf822..e7d2a14 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
- Centipede
+ Big Blue Is You!
diff --git a/src/bootstrap.js b/src/bootstrap.js
index 39453ff..d18442a 100644
--- 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());
})
-
})();
\ No newline at end of file
diff --git a/src/components/appearence.js b/src/components/appearence.js
new file mode 100644
index 0000000..8c2130a
--- /dev/null
+++ b/src/components/appearence.js
@@ -0,0 +1 @@
+game.components.Appearance = ({rot, width, height}) => game.Component('appearance', {rot, width, height});
\ No newline at end of file
diff --git a/src/components/component.js b/src/components/component.js
new file mode 100644
index 0000000..be59367
--- /dev/null
+++ b/src/components/component.js
@@ -0,0 +1,8 @@
+game.components = {};
+
+game.Component = (name, spec) => {
+ return {
+ name,
+ ...spec
+ }
+};
diff --git a/src/components/position.js b/src/components/position.js
new file mode 100644
index 0000000..072a1a6
--- /dev/null
+++ b/src/components/position.js
@@ -0,0 +1 @@
+game.components.Position = ({x, y}) => game.Component('position', {x, y})
\ No newline at end of file
diff --git a/src/entities/bigblue.js b/src/entities/bigblue.js
new file mode 100644
index 0000000..475740e
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/entities/entity.js b/src/entities/entity.js
new file mode 100644
index 0000000..33d1031
--- /dev/null
+++ 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
+ };
+}
\ No newline at end of file
diff --git a/src/game.js b/src/game.js
index 4efceae..c1b9c05 100644
--- 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);
}
diff --git a/src/render/graphics.js b/src/render/graphics.js
new file mode 100644
index 0000000..de98633
--- /dev/null
+++ 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"));
\ No newline at end of file
diff --git a/src/systems/render.js b/src/systems/render.js
new file mode 100644
index 0000000..c8eff4b
--- /dev/null
+++ 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);
\ No newline at end of file