sistema de coordenadas

Barco.js

@@ -6,6 +6,7 @@ export const BarcoTipo = Object.freeze({
 });
 
 class Barco {
+  seleccionado = true;
   constructor(x, y, longitud, orientacion) {
     this.x = x;
     this.y = y;
@@ -15,6 +16,7 @@ class Barco {
     this.offsetX = 0;
     this.offsetY = 0;
   }
+
   iniciarArrastre(event) {
     this.dragging = true;
     this.offsetX = event.offsetX;
@@ -34,6 +36,13 @@ class Barco {
   draw(ctx) {
     ctx.fillStyle = "red";
     ctx.fillRect(this.x * 32, this.y * 32, 32, 32 * this.longitud);
+    if (this.seleccionado) {
+      ctx.strokeStyle = "blue";
+      ctx.setLineDash([5, 5]);
+      ctx.lineWidth = 2;
+      ctx.strokeRect(this.x * 32, this.y * 32, 32, 32 * this.longitud);
+      ctx.setLineDash([]);
+    }
   }
 }
 

Mapa.js

@@ -1,33 +1,60 @@
 class Mapa {
   celdas = [];
-  constructor() {
+  barcos = [];
+
+  constructor(canvas, size = 320, scale = 1) {
+    this.canvas = canvas;
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx = this.canvas.getContext("2d");
+    this.scale = scale;
+    this.ctx.scale(this.scale, this.scale);
+
     this.casillaSize = 32;
     this.numFilas = 10;
     this.numColumnas = 10;
+
     for (let x = 0; x < this.numFilas * this.numColumnas; x++) {
       this.celdas[x] = 0;
     }
+
+    this.getPosClick = this.getPosClick.bind(this);
+    canvas.addEventListener("click", this.getPosClick);
   }
 
-  getPos(event) {
-    console.log(event.x, event.y);
+  setBarcos(barcos) {
+    this.barcos.push(...(Array.isArray(barcos) ? barcos : [barcos]));
   }
 
-  draw(ctx) {
-    ctx.beginPath();
+  getPosClick(event) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = Math.floor(
+      (event.x - rect.left) / (this.casillaSize * this.scale)
+    );
+    const y = Math.floor(
+      (event.y - rect.top) / (this.casillaSize * this.scale)
+    );
+    console.log(x, y);
+  }
+
+  draw() {
+    this.barcos.forEach((barco) => {
+      barco.draw(this.ctx);
+    });
+
+    this.ctx.beginPath();
     for (let i = 0; i <= this.numFilas; i++) {
       const y = i * this.casillaSize;
-      ctx.moveTo(0, y);
-      ctx.lineTo(this.casillaSize * this.numColumnas, y);
+      this.ctx.moveTo(0, y);
+      this.ctx.lineTo(this.casillaSize * this.numColumnas, y);
     }
-
     for (let i = 0; i <= this.numColumnas; i++) {
       const x = i * this.casillaSize;
-      ctx.moveTo(x, 0);
-      ctx.lineTo(x, this.casillaSize*this.numFilas);
+      this.ctx.moveTo(x, 0);
+      this.ctx.lineTo(x, this.casillaSize * this.numFilas);
     }
-    ctx.strokeStyle = "#15ff00"; // Color de las líneas
-    ctx.stroke();
+    this.ctx.strokeStyle = "#15ff00";
+    this.ctx.stroke();
   }
 }
 

PartidaBattle.js

@@ -1,34 +1,29 @@
-import Barco,{BarcoTipo} from "./Barco.js";
+import Barco, { BarcoTipo } from "./Barco.js";
 import Mapa from "./Mapa.js";
 
 class PartidaBattle {
-    barcos = [];
-    casillaSize = 32;
-    numFilas = 10;
-    numColumnas = 10;
-  
-    constructor() {
-      this.mapaAtaque=new Mapa();
-      this.mapaFlota=new Mapa();
-      this.barcos.push(
-      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'));
-    }
-
-    draw(ctxMapa, ctxMiniMapa){
-      this.mapaAtaque.draw(ctxMapa);
-      this.mapaFlota.draw(ctxMiniMapa);
-      this.barcos.forEach((barco)=>{
-        barco.draw(ctxMapa);
-      })
-    }
-  
+  constructor(canvasAtaque, canvasFlota) {
+    this.canvasAtaque = canvasAtaque;
+    this.canvasFloat = canvasFlota;
+    this.mapaAtaque = new Mapa(canvasAtaque, 640, 2);
+    this.mapaFlota = new Mapa(canvasFlota);
+    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"),
+    ]);
+    this.mapaFlota.setBarcos(this.mapaAtaque.barcos);
   }
-  export default PartidaBattle;
+
+  draw() {
+    this.mapaAtaque.draw();
+    this.mapaFlota.draw();
+  }
+}
+export default PartidaBattle;

game.js

@@ -1,19 +1,6 @@
 import PartidaBattle from "./PartidaBattle.js";
-
 const canvasMapa = document.getElementById("mapa");
-const ctxMapa = canvasMapa.getContext("2d");
-canvasMapa.width = 640;
-canvasMapa.height = 640;
-const scale = 2;
-ctxMapa.scale(scale, scale);
-
 const canvasMiniMapa = document.getElementById("minimapa");
-const ctxMiniMapa = canvasMiniMapa.getContext("2d");
-canvasMiniMapa.width = 320;
-canvasMiniMapa.height = 320;
 
-
-
-
-const partida=new PartidaBattle();
-partida.draw(ctxMapa,ctxMiniMapa);
+const partida = new PartidaBattle(canvasMapa, canvasMiniMapa);
+partida.draw();