simponic/BBIY
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sprites

Browse Source
This commit is contained in:
Logan Hunt 2022-04-01 17:12:37 -06:00
parent 4cabba2561
commit 100bbecccb
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
18 changed files with 147 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/sound/.DS_Store vendored
View File

Binary file not shown.

BIN
assets/sound/background-music.mp3
View File

Binary file not shown.

BIN
assets/sound/death.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sound/death.wav
View File

Binary file not shown.

BIN
assets/sound/move.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sound/move.wav
View File

Binary file not shown.

BIN
assets/sound/win.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sound/win.wav
View File

Binary file not shown.

2
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Centipede</title> <title>Big Blue Is You!</title>
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>

33
src/bootstrap.js vendored
View File

@ -1,19 +1,32 @@
game.bootstrap = (function() { game.bootstrap = (() => {
const scripts = [ 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' }, { src: ['src/game.js'], id: 'game' },
]; ];
const assets = { const assets = {};
bigblue: 'assets/image/bigblue.png', [
}; "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) { const loadScripts = function(onDone) {
while (scripts.length) { if (scripts.length) {
let script = scripts.shift(); let script = scripts.shift();
require(script.src, () => { require(script.src, () => {
onDone(script); loadScripts(onDone);
}); });
} else {
onDone();
} }
console.log('scripts loaded');
} }
const loadAsset = (source) => { const loadAsset = (source) => {
@ -28,6 +41,7 @@ game.bootstrap = (function() {
asset = new Audio(); asset = new Audio();
} }
asset.src = URL.createObjectURL(r); asset.src = URL.createObjectURL(r);
asset.onload = () => URL.revokeObjectURL(asset.src);
return asset; return asset;
}) })
} }
@ -48,9 +62,6 @@ game.bootstrap = (function() {
game.assets = {}; game.assets = {};
loadAssets().then(() => { loadAssets().then(() => {
loadScripts((script) => { loadScripts(() => game.initialize());
game.initialize();
});
}) })
})(); })();

1
src/components/appearence.js Normal file
View File

@ -0,0 +1 @@
game.components.Appearance = ({rot, width, height}) => game.Component('appearance', {rot, width, height});

8
src/components/component.js Normal file
View File

@ -0,0 +1,8 @@
game.components = {};
game.Component = (name, spec) => {
return {
name,
...spec
}
};

1
src/components/position.js Normal file
View File

@ -0,0 +1 @@
game.components.Position = ({x, y}) => game.Component('position', {x, y})

13
src/entities/bigblue.js Normal file
View File

@ -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;
}

23
src/entities/entity.js Normal file
View File

@ -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
};
}

21
src/game.js
View File

@ -1,10 +1,15 @@
const context = document.getElementById('game-canvas').getContext('2d'); game.loop = (elapsedTime) => {
context.imageSmoothingEnabled = false; game.systems.Render.update(elapsedTime);
console.log("HELLO") requestAnimationFrame(game.loop);
game.initialize = () => { }
context.clearRect(0, 0, game.width, game.height);
context.drawImage(game.assets.bigblue, 0, 0, game.width, game.height); game.initialize = () => {
game.entities = {};
console.log("BITCH") 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);
} }

47
src/render/graphics.js Normal file
View File

@ -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"));

18
src/systems/render.js Normal file
View File

@ -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);