From ad04b0593f5df15cfafc0e13cd3930bf62775eee Mon Sep 17 00:00:00 2001 From: Marklogo Date: Mon, 25 Mar 2024 13:51:56 +0100 Subject: [PATCH] sistema de coordenadas --- Barco.js | 9 ++++++++ Mapa.js | 51 +++++++++++++++++++++++++++++++++----------- PartidaBattle.js | 55 ++++++++++++++++++++++-------------------------- game.js | 17 ++------------- 4 files changed, 75 insertions(+), 57 deletions(-) diff --git a/Barco.js b/Barco.js index 32c6707..6dcae22 100644 --- a/Barco.js +++ b/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([]); + } } } diff --git a/Mapa.js b/Mapa.js index d5128a7..71cfcb9 100644 --- a/Mapa.js +++ b/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(); } } diff --git a/PartidaBattle.js b/PartidaBattle.js index 907ac7c..0ae0cc9 100644 --- a/PartidaBattle.js +++ b/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; \ No newline at end of file + + draw() { + this.mapaAtaque.draw(); + this.mapaFlota.draw(); + } +} +export default PartidaBattle; diff --git a/game.js b/game.js index bafa77d..7343b8a 100644 --- a/game.js +++ b/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();