debug y colisiones

Barco.js

@@ -6,13 +6,14 @@ export const BarcoTipo = Object.freeze({
 });
 
 class Barco {
-  constructor(x, y, longitud, orientacion) {
+  constructor(x, y, longitud, orientacion, barcoImg) {
+    this.barcoImg = barcoImg;
     this.xIni = this.x = x;
     this.yIni = this.y = y;
     this.longitud = longitud;
-    this.orientacion = orientacion;
+    this.orientacionIni = this.orientacion = orientacion;
     this.seleccionado = false;
-    this.superpuesto = false;
+    this.posIncorrecta = true;
   }
 
   clickado(clickX, clickY) {
@@ -28,11 +29,13 @@ class Barco {
   }
 
   saveIniPos() {
+    this.orientacionIni=this.orientacion;
     this.xIni = this.x;
     this.yIni = this.y;
   }
 
   restoreIniPos() {
+    this.orientacion=this.orientacionIni;
     this.x = this.xIni;
     this.y = this.yIni;
   }
@@ -49,10 +52,17 @@ class Barco {
   }
 
   draw(ctx) {
-    ctx.fillStyle = this.seleccionado ? "green" : "red";
     this.orientacion === "VERTICAL"
-      ? ctx.fillRect(this.x * 64, this.y * 64, 64, 64 * this.longitud)
-      : ctx.fillRect(this.x * 64, this.y * 64, 64 * this.longitud, 64);
+      ? ctx.drawImage(this.barcoImg[0], this.x * 64, this.y * 64)
+      : ctx.drawImage(this.barcoImg[1], this.x * 64, this.y * 64);
+    if (this.seleccionado) {
+      ctx.fillStyle = this.posIncorrecta
+        ? "rgba(255, 0, 0, 0.2)"
+        : "rgba(187, 187, 0, 0.2)";
+      this.orientacion === "VERTICAL"
+        ? ctx.fillRect(this.x * 64, this.y * 64, 64, 64 * this.longitud)
+        : ctx.fillRect(this.x * 64, this.y * 64, 64 * this.longitud, 64);
+    }
   }
 }
 

Mapa.js

@@ -37,6 +37,7 @@ class Mapa {
       barco.seleccionado = false;
       const incFila = barco.orientacion === "VERTICAL" ? 1 : 0;
       const incColumna = barco.orientacion === "HORIZONTAL" ? 1 : 0;
+
       for (let i = 0; i < barco.longitud; i++) {
         const fila = barco.y + i * incFila;
         const columna = barco.x + i * incColumna;
@@ -76,6 +77,7 @@ class Mapa {
           this.numFilas
       ) {
         this.barcoSeleccionado.giraBarco();
+        this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar();
       }
     }
   };
@@ -109,9 +111,10 @@ class Mapa {
     if (this.barcoSeleccionado) {
       const { x, y } = this.calcularCoordenadas(event);
       if (!this.colisionBorde(x, y)) this.barcoSeleccionado.setXY(x, y);
+      this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar();
     }
   };
-  
+
   posicionaBarcoSeleccionado() {
     this.setBarcos(this.barcoSeleccionado);
     this.barcoSeleccionado = null;
@@ -131,23 +134,41 @@ class Mapa {
     const longitud = this.barcoSeleccionado.longitud;
     const orientacion = this.barcoSeleccionado.orientacion;
     let suma = 0;
-    for (let f = -1; f <= longitud; f++) {
-      for (let c = -1; c < 2; c++) {
-        const fila = y + f;
-        const columna = x + c;
-        if (
-          fila >= 0 &&
-          fila < this.celdas.length &&
-          columna >= 0 &&
-          columna < this.celdas[0].length
-        ) {
-          suma += this.celdas[fila][columna];
+    if (orientacion === "VERTICAL") {
+      for (let f = -1; f <= longitud; f++) {
+        for (let c = -1; c < 2; c++) {
+          const fila = y + f;
+          const columna = x + c;
+          if (
+            fila >= 0 &&
+            fila < this.celdas.length &&
+            columna >= 0 &&
+            columna < this.celdas[0].length
+          ) {
+            suma += this.celdas[fila][columna];
+          }
+        }
+      }
+    } else {
+      for (let f = -1; f < 2; f++) {
+        for (let c = -1; c <= longitud; c++) {
+          const fila = y + f;
+          const columna = x + c;
+          if (
+            fila >= 0 &&
+            fila < this.celdas.length &&
+            columna >= 0 &&
+            columna < this.celdas[0].length
+          ) {
+            suma += this.celdas[fila][columna];
+          }
         }
       }
     }
     return suma;
   }
 
+
   draw() {
     this.ctx.clearRect(0, 0, this.width, this.height);
     this.barcos.forEach((barco) => {
@@ -167,8 +188,19 @@ class Mapa {
       this.ctx.moveTo(x, 0);
       this.ctx.lineTo(x, this.casillaSize * this.numFilas);
     }
-    this.ctx.strokeStyle = "#15ff0040";
+    this.ctx.strokeStyle = "rgba(0, 255, 0, 0.2)";
     this.ctx.stroke();
+
+    this.ctx.fillStyle = "red";
+    this.ctx.font = "bold 24px Arial";
+    for (let fila = 0; fila < this.numFilas; fila++) {
+      for (let columna = 0; columna < this.numColumnas; columna++) {
+        const valor = this.celdas[fila][columna];
+        const posX = columna * this.casillaSize + this.casillaSize / 2.3;
+        const posY = fila * this.casillaSize + this.casillaSize / 1.5;
+        this.ctx.fillText(valor, posX, posY);
+      }
+    }
   }
 }
 

PartidaBattle.js

@@ -2,21 +2,23 @@ import Barco, { BarcoTipo } from "./Barco.js";
 import Mapa from "./Mapa.js";
 
 class PartidaBattle {
-  constructor(canvasAtaque, canvasFlota) {
+
+    constructor(canvasAtaque, canvasFlota,barcosImgs) {
+    this.barcosImgs = barcosImgs;
     this.canvasAtaque = canvasAtaque;
     this.canvasFloat = canvasFlota;
     this.mapaAtaque = new Mapa(canvasAtaque, 640, 1);
     this.mapaFlota = new Mapa(canvasFlota, 320, .5 );
     this.mapaAtaque.setBarcos([
-      new Barco(0, 0, BarcoTipo.PORTAAVIONES, "VERTICAL"),
-      new Barco(1, 0, BarcoTipo.ACORAZADO, "VERTICAL"),
-      new Barco(2, 0, BarcoTipo.ACORAZADO, "VERTICAL"),
-      new Barco(3, 0, BarcoTipo.ACORAZADO, "VERTICAL"),
-      new Barco(4, 0, BarcoTipo.DESTRUCTOR, "VERTICAL"),
-      new Barco(5, 0, BarcoTipo.DESTRUCTOR, "VERTICAL"),
-      new Barco(6, 0, BarcoTipo.DESTRUCTOR, "VERTICAL"),
-      new Barco(7, 0, BarcoTipo.FRAGATA, "VERTICAL"),
-      new Barco(8, 0, BarcoTipo.FRAGATA, "VERTICAL"),
+      new Barco(0, 0, BarcoTipo.PORTAAVIONES, "VERTICAL",this.barcosImgs['PORTAAVIONES']),
+      new Barco(1, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.barcosImgs['ACORAZADO']),
+      new Barco(2, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.barcosImgs['ACORAZADO']),
+      new Barco(3, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.barcosImgs['ACORAZADO']),
+      new Barco(4, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.barcosImgs['DESTRUCTOR']),
+      new Barco(5, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.barcosImgs['DESTRUCTOR']),
+      new Barco(6, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.barcosImgs['DESTRUCTOR']),
+      new Barco(7, 0, BarcoTipo.FRAGATA, "VERTICAL",this.barcosImgs['FRAGATA']),
+      new Barco(8, 0, BarcoTipo.FRAGATA, "VERTICAL",this.barcosImgs['FRAGATA']),
     ]);
     this.mapaFlota.setBarcos(this.mapaAtaque.barcos);
   }

assets/Naval Battle Assets/NavalBattle - ReadMe.txt

@@ -1,28 +0,0 @@
-Credit: Molly "Cougarmint" Willits
-Created by hand using MS Paint and Photoshop Educational Edition 6.0.
-
-Licence: CC-BY 3.0.
-
-Free Commercial Use: Yes
-Free Personal Use: Yes
-
-Included in this Pack:
-BattleShipSheet_final.png
-oceangrid_final.png
-radargrid_final.png
-Tokens.png
-
-Non-Transparent Folder:
-BattleShipSheet_final_Non-transparent.png
-tokens_non-transparent.png
-
-Printable Folder:
-PaperBattleShipGridandShips.png
-PaperBattleShipTokens.png
-
-Scraps Folder:
-metalic_panel.png
-oceangrid.png
-radargrid.png
-
-Donations: Not needed, but appreciated. Contact me if you'd like to make a donation.

game.js

@@ -3,16 +3,77 @@ const canvasMapa = document.getElementById("mapa");
 const canvasMiniMapa = document.getElementById("minimapa");
 
 
+const barcosImg = new Image();
+barcosImg.src = "/assets/barcos.png";
+
+barcosImg.onload = function(){
+    iniciaJuego();
+} 
 
 
+function getSprites(spriteSheet) {
+  const sprites = {
+    PORTAAVIONES: [
+      { x: 0, y: 0, width: 64, height: 256 },
+      { x: 64, y: 192, width: 256, height: 64 },
+    ],
+    ACORAZADO: [
+      { x: 64, y: 0, width: 64, height: 192 },
+      { x: 128, y: 128, width: 192, height: 64 },
+    ],
+    DESTRUCTOR: [
+      { x: 128, y: 0, width: 64, height: 128 },
+      { x: 192, y: 64, width: 128, height: 64 },
+    ],
+    FRAGATA: [
+      { x: 192, y: 0, width: 64, height: 64 },
+      { x: 256, y: 0, width: 64, height: 64 },
+    ],
+  };
 
-
-const partida = new PartidaBattle(canvasMapa, canvasMiniMapa);
-function gameLoop() {
-    partida.draw();
-    window.requestAnimationFrame(gameLoop)
+  const spritesObj = {};
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  for (const key in sprites) {
+    if (Object.hasOwnProperty.call(sprites, key)) {
+      const spriteArray = sprites[key];
+      spritesObj[key] = spriteArray.map((sprite) => {
+        canvas.width = sprite.width;
+        canvas.height = sprite.height;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(
+          spriteSheet,
+          sprite.x,
+          sprite.y,
+          sprite.width,
+          sprite.height,
+          0,
+          0,
+          sprite.width,
+          sprite.height
+        );
+        const spriteImage = new Image();
+        spriteImage.src = canvas.toDataURL();
+        return spriteImage;
+      });
+    }
+  }
+  return spritesObj;
 }
-gameLoop();
 
 
+function iniciaJuego(){
+    const canvasMapa = document.getElementById("mapa");
+    const canvasMiniMapa = document.getElementById("minimapa");
+    const sprites = getSprites(barcosImg);
+    const partida = new PartidaBattle(canvasMapa, canvasMiniMapa,sprites);
+
+    gameLoop();
+
+    function gameLoop() {
+      partida.draw();
+      window.requestAnimationFrame(gameLoop);
+    }
+}
+