drag&drop

Barco.js

@@ -6,43 +6,52 @@ export const BarcoTipo = Object.freeze({
 });
 
 class Barco {
-  seleccionado = true;
   constructor(x, y, longitud, orientacion) {
-    this.x = x;
-    this.y = y;
+    this.xIni = this.x = x;
+    this.yIni = this.y = y;
     this.longitud = longitud;
     this.orientacion = orientacion;
-    this.dragging = false;
-    this.offsetX = 0;
-    this.offsetY = 0;
+    this.seleccionado = false;
   }
 
-  iniciarArrastre(event) {
-    this.dragging = true;
-    this.offsetX = event.offsetX;
-    this.offsetY = event.offsetY;
-  }
-  moverBarco(event, canvas) {
-    if (this.dragging) {
-      const rect = canvas.getBoundingClientRect();
-      this.x = event.clientX - rect.left - this.offsetX;
-      this.y = event.clientY - rect.top - this.offsetY;
+  clickado(clickX, clickY) {
+    if (this.orientacion === "VERTICAL") {
+      return (
+        clickX === this.x && clickY >= this.y && clickY < this.y + this.longitud
+      );
+    } else {
+      return (
+        clickY === this.y && clickX >= this.x && clickX < this.x + this.longitud
+      );
     }
   }
-  finalizarArrastre() {
-    this.dragging = false;
+
+  saveIniPos() {
+    this.xIni = this.x;
+    this.yIni = this.y;
+  }
+
+  restoreIniPos() {
+    this.x = this.xIni;
+    this.y = this.yIni;
+  }
+
+  setXY(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  giraBarco() {
+    this.orientacion === "VERTICAL"
+      ? (this.orientacion = "HORIZONTAL")
+      : (this.orientacion = "VERTICAL");
   }
 
   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([]);
-    }
+    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);
   }
 }
 

Mapa.js

@@ -1,47 +1,137 @@
 class Mapa {
   celdas = [];
   barcos = [];
+  barcoSeleccionado;
 
-  constructor(canvas, size = 320, scale = 1) {
+  constructor(canvas, size, scale) {
     this.canvas = canvas;
     this.canvas.width = size;
     this.canvas.height = size;
+    this.width = size / scale;
+    this.height = size / scale;
     this.ctx = this.canvas.getContext("2d");
     this.scale = scale;
     this.ctx.scale(this.scale, this.scale);
 
-    this.casillaSize = 32;
+    this.casillaSize = 64;
     this.numFilas = 10;
     this.numColumnas = 10;
 
-    for (let x = 0; x < this.numFilas * this.numColumnas; x++) {
-      this.celdas[x] = 0;
-    }
+    this.inicializarCeldas();
 
-    this.getPosClick = this.getPosClick.bind(this);
     canvas.addEventListener("click", this.getPosClick);
+    canvas.addEventListener("contextmenu", this.giraBarcoSeleccionado);
+    canvas.addEventListener("mousemove", this.mueveBarcoSeleccionado);
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  inicializarCeldas() {
+    for (let i = 0; i < this.numFilas; i++) {
+      this.celdas[i] = new Array(this.numColumnas).fill(0);
+    }
   }
 
   setBarcos(barcos) {
-    this.barcos.push(...(Array.isArray(barcos) ? barcos : [barcos]));
+    const barcosArray = Array.isArray(barcos) ? barcos : [barcos];
+    for (const barco of barcosArray) {
+      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;
+        this.celdas[fila][columna] = barco.longitud;
+      }
+    }
+    this.barcos.push(...barcosArray);
   }
 
-  getPosClick(event) {
+  calcularCoordenadas(event) {
     const rect = this.canvas.getBoundingClientRect();
     const x = Math.floor(
-      (event.x - rect.left) / (this.casillaSize * this.scale)
+      (event.clientX - rect.left) / (this.casillaSize * this.scale)
     );
     const y = Math.floor(
-      (event.y - rect.top) / (this.casillaSize * this.scale)
+      (event.clientY - rect.top) / (this.casillaSize * this.scale)
     );
-    console.log(x, y);
+    return { x, y };
+  }
+
+  //Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
+  handleKeyDown = (event) => {
+    const canvasFocused = document.activeElement === this.canvas;
+    if (canvasFocused && event.key === "Escape" && this.barcoSeleccionado) {
+      this.barcoSeleccionado.restoreIniPos();
+      this.posicionaBarcoSeleccionado();
+    }
+  };
+  //Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
+  giraBarcoSeleccionado = (event) => {
+    event.preventDefault();
+    if (this.barcoSeleccionado) {
+      if (
+        this.barcoSeleccionado.x + this.barcoSeleccionado.longitud <=
+          this.numColumnas &&
+        this.barcoSeleccionado.y + this.barcoSeleccionado.longitud <=
+          this.numFilas
+      ) {
+        this.barcoSeleccionado.giraBarco();
+      }
+    }
+  };
+  //Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
+  getPosClick = (event) => {
+    const { x, y } = this.calcularCoordenadas(event);
+    if (!this.barcoSeleccionado) {
+      const index = this.barcos.findIndex((barco) => barco.clickado(x, y));
+      if (index != -1) this.seleccionaBarco(index);
+    } else {
+      this.posicionaBarcoSeleccionado();
+    }
+  };
+
+  seleccionaBarco(index_barco) {
+    this.barcoSeleccionado = this.barcos[index_barco];
+    this.barcoSeleccionado.seleccionado = true;
+    this.barcoSeleccionado.saveIniPos();
+    this.barcos.splice(index_barco, 1);
+    const incFila = this.barcoSeleccionado.orientacion === "VERTICAL" ? 1 : 0;
+    const incColumna =
+      this.barcoSeleccionado.orientacion === "HORIZONTAL" ? 1 : 0;
+    for (let i = 0; i < this.barcoSeleccionado.longitud; i++) {
+      const fila = this.barcoSeleccionado.y + i * incFila;
+      const columna = this.barcoSeleccionado.x + i * incColumna;
+      this.celdas[fila][columna] = 0;
+    }
+  }
+  //Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
+  mueveBarcoSeleccionado = (event) => {
+    if (this.barcoSeleccionado) {
+      const { x, y } = this.calcularCoordenadas(event);
+      if (!this.colisionBorde(x, y)) this.barcoSeleccionado.setXY(x, y);
+    }
+  };
+  posicionaBarcoSeleccionado() {
+    this.setBarcos(this.barcoSeleccionado);
+    this.barcoSeleccionado = null;
+  }
+  colisionBorde(x, y) {
+    const barco = this.barcoSeleccionado;
+    const longitud = barco.longitud;
+    const orientacion = barco.orientacion;
+    return orientacion === "VERTICAL"
+      ? x < 0 || x >= this.numColumnas || y < 0 || y + longitud > this.numFilas
+      : x < 0 || x + longitud > this.numColumnas || y < 0 || y > this.numFilas;
   }
 
   draw() {
+    this.ctx.clearRect(0, 0, this.width, this.height);
     this.barcos.forEach((barco) => {
       barco.draw(this.ctx);
     });
 
+    if (this.barcoSeleccionado) this.barcoSeleccionado.draw(this.ctx);
+
     this.ctx.beginPath();
     for (let i = 0; i <= this.numFilas; i++) {
       const y = i * this.casillaSize;
@@ -53,7 +143,7 @@ class Mapa {
       this.ctx.moveTo(x, 0);
       this.ctx.lineTo(x, this.casillaSize * this.numFilas);
     }
-    this.ctx.strokeStyle = "#15ff00";
+    this.ctx.strokeStyle = "#15ff0040";
     this.ctx.stroke();
   }
 }

PartidaBattle.js

@@ -5,8 +5,8 @@ class PartidaBattle {
   constructor(canvasAtaque, canvasFlota) {
     this.canvasAtaque = canvasAtaque;
     this.canvasFloat = canvasFlota;
-    this.mapaAtaque = new Mapa(canvasAtaque, 640, 2);
-    this.mapaFlota = new Mapa(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"),
@@ -20,7 +20,7 @@ class PartidaBattle {
     ]);
     this.mapaFlota.setBarcos(this.mapaAtaque.barcos);
   }
-
+ 
   draw() {
     this.mapaAtaque.draw();
     this.mapaFlota.draw();

assets/Naval Battle Assets/NavalBattle - ReadMe.txt

@@ -0,0 +1,28 @@
+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.

assets/shipz/images/desktop.ini

@@ -0,0 +1,5 @@
+[.ShellClassInfo]
+InfoTip=This folder is shared online.
+IconFile=C:\Program Files (x86)\Google\Drive\googledrivesync.exe
+IconIndex=12
+    

assets/shipz/water_units.json

@@ -0,0 +1,452 @@
+{"frames": {
+
+"ship_big_gun.png":
+{
+	"frame": {"x":660,"y":70,"w":32,"h":60},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":60},
+	"sourceSize": {"w":32,"h":60}
+},
+"ship_big_gun_destroyed.png":
+{
+	"frame": {"x":654,"y":337,"w":32,"h":60},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":60},
+	"sourceSize": {"w":32,"h":60}
+},
+"ship_big_gun_dual.png":
+{
+	"frame": {"x":660,"y":2,"w":32,"h":66},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
+	"sourceSize": {"w":32,"h":66}
+},
+"ship_big_gun_dual_destroyed.png":
+{
+	"frame": {"x":674,"y":467,"w":32,"h":66},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
+	"sourceSize": {"w":32,"h":66}
+},
+"ship_big_gun_dual_hit.png":
+{
+	"frame": {"x":674,"y":399,"w":32,"h":66},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
+	"sourceSize": {"w":32,"h":66}
+},
+"ship_big_gun_hit.png":
+{
+	"frame": {"x":620,"y":337,"w":32,"h":60},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":60},
+	"sourceSize": {"w":32,"h":60}
+},
+"ship_gun_base.png":
+{
+	"frame": {"x":720,"y":92,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_base_big.png":
+{
+	"frame": {"x":674,"y":535,"w":28,"h":28},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":28,"h":28},
+	"sourceSize": {"w":28,"h":28}
+},
+"ship_gun_base_big_destroyed.png":
+{
+	"frame": {"x":630,"y":755,"w":28,"h":28},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":28,"h":28},
+	"sourceSize": {"w":28,"h":28}
+},
+"ship_gun_base_dark.png":
+{
+	"frame": {"x":694,"y":101,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_base_dark_destroyed.png":
+{
+	"frame": {"x":686,"y":190,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_base_destroyed.png":
+{
+	"frame": {"x":660,"y":190,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_dual_gray.png":
+{
+	"frame": {"x":676,"y":274,"w":34,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":56},
+	"sourceSize": {"w":34,"h":56}
+},
+"ship_gun_dual_gray_destroyed.png":
+{
+	"frame": {"x":676,"y":216,"w":34,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":56},
+	"sourceSize": {"w":34,"h":56}
+},
+"ship_gun_dual_gray_hit.png":
+{
+	"frame": {"x":660,"y":132,"w":34,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":56},
+	"sourceSize": {"w":34,"h":56}
+},
+"ship_gun_dual_green.png":
+{
+	"frame": {"x":712,"y":50,"w":32,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":40},
+	"sourceSize": {"w":32,"h":40}
+},
+"ship_gun_dual_green_destroyed.png":
+{
+	"frame": {"x":360,"y":789,"w":32,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":40},
+	"sourceSize": {"w":32,"h":40}
+},
+"ship_gun_dual_green_hit.png":
+{
+	"frame": {"x":326,"y":789,"w":32,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":40},
+	"sourceSize": {"w":32,"h":40}
+},
+"ship_gun_gray.png":
+{
+	"frame": {"x":714,"y":127,"w":16,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":40},
+	"sourceSize": {"w":16,"h":40}
+},
+"ship_gun_gray_destroyed.png":
+{
+	"frame": {"x":712,"y":175,"w":16,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":40},
+	"sourceSize": {"w":16,"h":40}
+},
+"ship_gun_gray_hit.png":
+{
+	"frame": {"x":730,"y":2,"w":16,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":40},
+	"sourceSize": {"w":16,"h":40}
+},
+"ship_gun_green.png":
+{
+	"frame": {"x":694,"y":53,"w":16,"h":46},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":46},
+	"sourceSize": {"w":16,"h":46}
+},
+"ship_gun_green_destroyed.png":
+{
+	"frame": {"x":712,"y":2,"w":16,"h":46},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":46},
+	"sourceSize": {"w":16,"h":46}
+},
+"ship_gun_green_hit.png":
+{
+	"frame": {"x":696,"y":127,"w":16,"h":46},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":46},
+	"sourceSize": {"w":16,"h":46}
+},
+"ship_gun_huge.png":
+{
+	"frame": {"x":640,"y":477,"w":32,"h":76},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":76},
+	"sourceSize": {"w":32,"h":76}
+},
+"ship_gun_huge_destroyed.png":
+{
+	"frame": {"x":640,"y":399,"w":32,"h":76},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":76},
+	"sourceSize": {"w":32,"h":76}
+},
+"ship_gun_huge_hit.png":
+{
+	"frame": {"x":630,"y":677,"w":32,"h":76},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":76},
+	"sourceSize": {"w":32,"h":76}
+},
+"ship_gun_red.png":
+{
+	"frame": {"x":694,"y":2,"w":16,"h":49},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":49},
+	"sourceSize": {"w":16,"h":49}
+},
+"ship_gun_red_destroyed.png":
+{
+	"frame": {"x":706,"y":332,"w":16,"h":49},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":49},
+	"sourceSize": {"w":16,"h":49}
+},
+"ship_gun_red_hit.png":
+{
+	"frame": {"x":688,"y":332,"w":16,"h":49},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":49},
+	"sourceSize": {"w":16,"h":49}
+},
+"ship_large_body.png":
+{
+	"frame": {"x":450,"y":419,"w":122,"h":368},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":122,"h":368},
+	"sourceSize": {"w":122,"h":368}
+},
+"ship_large_body_destroyed.png":
+{
+	"frame": {"x":326,"y":419,"w":122,"h":368},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":122,"h":368},
+	"sourceSize": {"w":122,"h":368}
+},
+"ship_medium_body.png":
+{
+	"frame": {"x":194,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_medium_body_b.png":
+{
+	"frame": {"x":130,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_medium_body_b_destroyed.png":
+{
+	"frame": {"x":66,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_medium_body_destroyed.png":
+{
+	"frame": {"x":2,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_small_b_body.png":
+{
+	"frame": {"x":630,"y":570,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"ship_small_body.png":
+{
+	"frame": {"x":574,"y":677,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"ship_small_body_b_destroyed.png":
+{
+	"frame": {"x":574,"y":570,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"ship_small_body_destroyed.png":
+{
+	"frame": {"x":620,"y":230,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"water_ripple_big_000.png":
+{
+	"frame": {"x":326,"y":2,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_001.png":
+{
+	"frame": {"x":164,"y":419,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_002.png":
+{
+	"frame": {"x":164,"y":2,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_003.png":
+{
+	"frame": {"x":2,"y":419,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_004.png":
+{
+	"frame": {"x":2,"y":2,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_medium_000.png":
+{
+	"frame": {"x":574,"y":2,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_001.png":
+{
+	"frame": {"x":488,"y":2,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_002.png":
+{
+	"frame": {"x":566,"y":789,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_003.png":
+{
+	"frame": {"x":480,"y":789,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_004.png":
+{
+	"frame": {"x":394,"y":789,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_small_000.png":
+{
+	"frame": {"x":574,"y":400,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_001.png":
+{
+	"frame": {"x":554,"y":230,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_002.png":
+{
+	"frame": {"x":488,"y":230,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_003.png":
+{
+	"frame": {"x":324,"y":836,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_004.png":
+{
+	"frame": {"x":258,"y":836,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+}},
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "water_units.png",
+	"format": "RGBA8888",
+	"size": {"w":1024,"h":1024},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:0588f1382f7fc792c1ff1dac58116cb7$"
+}
+}

game.js

@@ -2,5 +2,17 @@ import PartidaBattle from "./PartidaBattle.js";
 const canvasMapa = document.getElementById("mapa");
 const canvasMiniMapa = document.getElementById("minimapa");
 
+
+
+
+
+
 const partida = new PartidaBattle(canvasMapa, canvasMiniMapa);
-partida.draw();
+function gameLoop() {
+    partida.draw();
+    window.requestAnimationFrame(gameLoop)
+}
+gameLoop();
+
+
+

index.html

@@ -13,10 +13,10 @@
 <body>
     <div id="container">
         <div id="sub-container">
-            <canvas id="mapa"></canvas>
+            <canvas id="mapa" tabindex="0" ></canvas>
         </div>
         <div id="sub-container">
-            <canvas id="minimapa"></canvas>
+            <canvas id="minimapa" tabindex="1"></canvas>
             <textarea id="chat" readonly></textarea>
             <input type="text" name="" id="">
         </div>