convert hedge to grayscale, fix lava entity to use the new sprites, wordIs is pushable, dynamically color sprites

2 files changed, 32 insertions, 2 deletions

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",
   }),
 };