Coisas que faltaram, desculpa pelo commit preguiçoso

Author: pietrobs

control/GameScreen.js

@@ -4,6 +4,8 @@ class GameScreen {
     this.ctx = this.canvas.getContext("2d");
     this.width = this.canvas.width;
     this.height = this.canvas.height;
+    this.background = new Image(Consts.CELL_SIZE, Consts.CELL_SIZE);
+    this.background.src = `${Consts.IMG_PATH}/bricks.png`;
 
     this.gameController = new GameController();
     this.elements = [];
@@ -34,20 +36,29 @@ class GameScreen {
     return this.canvas.getContext("2d");
   }
 
-  draw() {
+  paint() {
     Drawing.clear();
+    for (let x = 0; x < Consts.NUM_CELLS; x++) {
+      for (let y = 0; y < Consts.NUM_CELLS; y++) {
+        Drawing.draw(
+          x * Consts.CELL_SIZE,
+          y * Consts.CELL_SIZE,
+          this.background
+        );
+      }
+    }
     this.gameController.processAllElements(this.elements);
     this.gameController.drawAllElement(this.elements);
   }
 
   loop = () => {
-    this.draw();
+    this.paint();
     document.title = this.lolo.getStringPosition();
   };
 
   go() {
     this.keyPressed();
-    
+
     this.addElement(this.lolo);
     this.addElement(new Skull(0, 250));
 

control/Main.js

@@ -1,6 +1,5 @@
 class Main {
-
-    static main(){
-        new GameScreen({ canvasId: "canvas" });
-    }
-}
+  static main() {
+    new GameScreen({ canvasId: "canvas" });
+  }
+}

elements/Fire.js

@@ -6,7 +6,7 @@ class Fire extends Element {
   }
 
   autoDraw() {
-    Drawing.drawImg(this.pos.getX(), this.pos.getY(), this.imageIcon);
+    Drawing.draw(this.pos.getX(), this.pos.getY(), this.imageIcon);
 
     this.countDelay++;
     if (this.countDelay === this.DELAY_MOVIMENT) {

elements/Lolo.js

@@ -5,7 +5,7 @@ class Lolo extends Element {
   }
 
   autoDraw() {
-    Drawing.drawImg(this.pos.getX(), this.pos.getY(), this.imageIcon);
+    Drawing.draw(this.pos.getX(), this.pos.getY(), this.imageIcon);
   }
 
   backToLastPosition() {

elements/Skull.js

@@ -8,11 +8,11 @@ class Skull extends Element {
       imageIcon: "skull.png"
     });
     this.countIntervals = 0;
-    this.TIME_FIRE = 300;
+    this.TIME_FIRE = 150;
   }
 
   autoDraw() {
-    Drawing.drawImg(this.pos.getX(), this.pos.getY(), this.imageIcon);
+    Drawing.draw(this.pos.getX(), this.pos.getY(), this.imageIcon);
 
     this.countIntervals++;
 
@@ -21,6 +21,7 @@ class Skull extends Element {
         this.pos.getX() + Consts.CELL_SIZE,
         this.pos.getY()
       );
+
       Drawing.getGameScreen().addElement(fire);
       this.countIntervals = 0;
     }

index.html

@@ -20,7 +20,7 @@
         color: white;
       }
       canvas {
-        background-image: url("assets/unesp.jpg");
+        /* background-image: url("assets/unesp.jpg"); */
         background-size: cover;
         border: 1px solid black;
       }

utils/Drawing.js

@@ -11,20 +11,7 @@ class Drawing {
     this.gameScreen = gameScreen;
   }
 
-  static drawRect(x, y, color) {
-    const { ctx } = this.gameScreen;
-    ctx.beginPath();
-    ctx.rect(x, y, Consts.CELL_SIZE, Consts.CELL_SIZE);
-    ctx.fillStyle = color;
-    ctx.shadowColor = "black";
-    ctx.shadowBlur = 4;
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 2;
-    ctx.fill();
-    ctx.closePath();
-  }
-
-  static drawImg(x, y, img) {
+  static draw(x, y, img) {
     const { ctx } = this.gameScreen;
     ctx.drawImage(img, x, y, img.width, img.height);
   }