From 51e4fd5be2fcc354fa4ce1c8ba77a420b88a2a9f Mon Sep 17 00:00:00 2001 From: Marklogo Date: Mon, 25 Mar 2024 02:24:24 +0100 Subject: [PATCH] first commit --- .vscode/settings.json | 3 +++ Barco.js | 40 ++++++++++++++++++++++++++++++++ Mapa.js | 34 +++++++++++++++++++++++++++ PartidaBattle.js | 34 +++++++++++++++++++++++++++ README.md | 0 game.js | 19 +++++++++++++++ index.html | 27 ++++++++++++++++++++++ style.css | 54 +++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 211 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 Barco.js create mode 100644 Mapa.js create mode 100644 PartidaBattle.js create mode 100644 README.md create mode 100644 game.js create mode 100644 index.html create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Barco.js b/Barco.js new file mode 100644 index 0000000..32c6707 --- /dev/null +++ b/Barco.js @@ -0,0 +1,40 @@ +export const BarcoTipo = Object.freeze({ + FRAGATA: 1, + DESTRUCTOR: 2, + ACORAZADO: 3, + PORTAAVIONES: 4, +}); + +class Barco { + constructor(x, y, longitud, orientacion) { + this.x = x; + this.y = y; + this.longitud = longitud; + this.orientacion = orientacion; + this.dragging = false; + this.offsetX = 0; + this.offsetY = 0; + } + 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; + } + } + finalizarArrastre() { + this.dragging = false; + } + + draw(ctx) { + ctx.fillStyle = "red"; + ctx.fillRect(this.x * 32, this.y * 32, 32, 32 * this.longitud); + } +} + +export default Barco; diff --git a/Mapa.js b/Mapa.js new file mode 100644 index 0000000..d5128a7 --- /dev/null +++ b/Mapa.js @@ -0,0 +1,34 @@ +class Mapa { + celdas = []; + constructor() { + this.casillaSize = 32; + this.numFilas = 10; + this.numColumnas = 10; + for (let x = 0; x < this.numFilas * this.numColumnas; x++) { + this.celdas[x] = 0; + } + } + + getPos(event) { + console.log(event.x, event.y); + } + + draw(ctx) { + 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); + } + + for (let i = 0; i <= this.numColumnas; i++) { + const x = i * this.casillaSize; + ctx.moveTo(x, 0); + ctx.lineTo(x, this.casillaSize*this.numFilas); + } + ctx.strokeStyle = "#15ff00"; // Color de las líneas + ctx.stroke(); + } +} + +export default Mapa; diff --git a/PartidaBattle.js b/PartidaBattle.js new file mode 100644 index 0000000..907ac7c --- /dev/null +++ b/PartidaBattle.js @@ -0,0 +1,34 @@ +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); + }) + } + + } + export default PartidaBattle; \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/game.js b/game.js new file mode 100644 index 0000000..bafa77d --- /dev/null +++ b/game.js @@ -0,0 +1,19 @@ +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); diff --git a/index.html b/index.html new file mode 100644 index 0000000..b4281e1 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + BattleShip + + + +
+
+ +
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0db7620 --- /dev/null +++ b/style.css @@ -0,0 +1,54 @@ +* { + box-sizing: border-box; + min-width: 0; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + padding: 1rem; + background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364); + color: white; + font-family: "Press Start 2P", cursive; + text-align: center; +} + +#container { + height: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +#sub-container { + height: 648px; + display: flex; + flex-direction: column; + border: 4px solid white; +} + +#mapa { + width: 640px; + height: 640px; + background-color: #2c5364; +} + +#minimapa { + width: 320px; + height: 320px; + flex-shrink: 0; + background-color: #2c5364; +} + +#chat { + resize: none; + width: 320px; + height: 100%; + background-color: transparent; +}