diff --git a/assets/image/hedge.png b/assets/image/hedge.png index 505d494..3fc280d 100644 Binary files a/assets/image/hedge.png and b/assets/image/hedge.png differ diff --git a/src/entities/lava.js b/src/entities/lava.js index c0389bc..bd1ca04 100644 --- a/src/entities/lava.js +++ b/src/entities/lava.js @@ -4,12 +4,7 @@ game.createLava = () => { lava.addComponent(game.components.LoadPriority({priority: 5})); lava.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100})); lava.addComponent(game.components.Alive()); - lava.sprite = game.graphics.Sprite({ - image: game.assets.lava, - spriteHeight: 24, - spriteWidth: 24, - numFrames: 3, - timePerFrame: 100, - }); + lava.sprite = game.sprites.lava; + return lava; } diff --git a/src/entities/wordIs.js b/src/entities/wordIs.js index a32bfa1..ca00856 100644 --- a/src/entities/wordIs.js +++ b/src/entities/wordIs.js @@ -2,7 +2,8 @@ game.createWordIs = () => { const wordIs = game.Entity(); wordIs.addComponent(game.components.LoadPriority({priority: 3})); wordIs.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100})); - wordIs.addComponent(game.components.Stop({stop: true})); + // wordIs.addComponent(game.components.Stop({stop: true})); + wordIs.addComponent(game.components.Pushable()); wordIs.addComponent(game.components.Alive()); wordIs.sprite = game.sprites.wordIs; return wordIs; diff --git a/src/render/graphics.js b/src/render/graphics.js index 6a199f0..8a4cb1c 100644 --- a/src/render/graphics.js +++ b/src/render/graphics.js @@ -6,7 +6,7 @@ game.graphics = ( context.clearRect(0, 0, game.canvas.width, game.canvas.height); }; - const Sprite = ({image, spriteX, spriteY, spriteWidth, spriteHeight, timePerFrame, cols, rows, numFrames, drawFunction}) => { + const Sprite = ({image, spriteX, spriteY, spriteWidth, spriteHeight, timePerFrame, cols, rows, numFrames, color, drawFunction}) => { timePerFrame = timePerFrame ?? 100; numFrames = numFrames ?? 1; cols = cols ?? numFrames; @@ -33,6 +33,15 @@ game.graphics = ( 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); + + // apply color to sprite + if (color) { + context.globalAlpha=0.7; + context.globalCompositeOperation="source-atop"; + context.fillStyle=color; + context.fillRect(x, y, width, height); + } + context.restore(); }; } else { @@ -43,4 +52,4 @@ game.graphics = ( return { clear, Sprite }; } -)(document.getElementById("game-canvas").getContext("2d")); \ No newline at end of file +)(document.getElementById("game-canvas").getContext("2d")); diff --git a/src/render/sprites.js b/src/render/sprites.js index d8ae126..9626b00 100644 --- a/src/render/sprites.js +++ b/src/render/sprites.js @@ -12,6 +12,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#ede285", }), floor: game.graphics.Sprite({ image: game.assets.floor, @@ -19,6 +20,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#404040", }), hedge: game.graphics.Sprite({ image: game.assets.hedge, @@ -26,6 +28,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 250, + color: "#5c8339", }), grass: game.graphics.Sprite({ image: game.assets.grass, @@ -33,6 +36,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#5c8339", }), lava: game.graphics.Sprite({ image: game.assets.lava, @@ -40,6 +44,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#e49950", }), rock: game.graphics.Sprite({ image: game.assets.rock, @@ -47,6 +52,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#90673e", }), wall: game.graphics.Sprite({ image: game.assets.wall, @@ -54,6 +60,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#707070", }), water: game.graphics.Sprite({ image: game.assets.water, @@ -61,6 +68,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#5f9dd1", }), wordBigBlue: game.graphics.Sprite({ image: game.assets.wordBigBlue, @@ -68,6 +76,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#0f2439", }), wordFlag: game.graphics.Sprite({ image: game.assets.wordFlag, @@ -75,6 +84,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#ede285", }), wordIs: game.graphics.Sprite({ image: game.assets.wordIs, @@ -82,6 +92,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#ffffff", }), wordKill: game.graphics.Sprite({ image: game.assets.wordKill, @@ -89,6 +100,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#e49950", }), wordLava: game.graphics.Sprite({ image: game.assets.wordLava, @@ -96,6 +108,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#e49950", }), wordPush: game.graphics.Sprite({ image: game.assets.wordPush, @@ -103,6 +116,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#90673e", }), wordRock: game.graphics.Sprite({ image: game.assets.wordRock, @@ -110,6 +124,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#90673e", }), wordSink: game.graphics.Sprite({ image: game.assets.wordSink, @@ -117,6 +132,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#5f9dd1", }), wordStop: game.graphics.Sprite({ image: game.assets.wordStop, @@ -124,6 +140,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#252e0e", }), wordWall: game.graphics.Sprite({ image: game.assets.wordWall, @@ -131,6 +148,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#707070", }), wordWater: game.graphics.Sprite({ image: game.assets.wordWater, @@ -138,6 +156,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#5f9dd1", }), wordWin: game.graphics.Sprite({ image: game.assets.wordWin, @@ -145,6 +164,7 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#ede285", }), wordYou: game.graphics.Sprite({ image: game.assets.wordYou, @@ -152,5 +172,6 @@ game.sprites = { spriteWidth: 24, numFrames: 3, timePerFrame: 100, + color: "#0f2439", }), };