diff --git a/Barco.js b/Barco.js index 64951a5..90a60b9 100644 --- a/Barco.js +++ b/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); + } } } diff --git a/Mapa.js b/Mapa.js index af905a2..0813e95 100644 --- a/Mapa.js +++ b/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); + } + } } } diff --git a/PartidaBattle.js b/PartidaBattle.js index e454f30..3e7257a 100644 --- a/PartidaBattle.js +++ b/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); } diff --git a/assets/Naval Battle Assets.zip b/assets/Naval Battle Assets.zip deleted file mode 100644 index 8669879..0000000 Binary files a/assets/Naval Battle Assets.zip and /dev/null differ diff --git a/assets/Naval Battle Assets/BattleShipSheet_final.png b/assets/Naval Battle Assets/BattleShipSheet_final.png deleted file mode 100644 index fa339ff..0000000 Binary files a/assets/Naval Battle Assets/BattleShipSheet_final.png and /dev/null differ diff --git a/assets/Naval Battle Assets/NavalBattle - ReadMe.txt b/assets/Naval Battle Assets/NavalBattle - ReadMe.txt deleted file mode 100644 index 730570d..0000000 --- a/assets/Naval Battle Assets/NavalBattle - ReadMe.txt +++ /dev/null @@ -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. \ No newline at end of file diff --git a/assets/Naval Battle Assets/Non-Transparent/BattleShipSheet_final_Non-transparent.png b/assets/Naval Battle Assets/Non-Transparent/BattleShipSheet_final_Non-transparent.png deleted file mode 100644 index 07c1da6..0000000 Binary files a/assets/Naval Battle Assets/Non-Transparent/BattleShipSheet_final_Non-transparent.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Non-Transparent/tokens_non-transparent.png b/assets/Naval Battle Assets/Non-Transparent/tokens_non-transparent.png deleted file mode 100644 index 39571c2..0000000 Binary files a/assets/Naval Battle Assets/Non-Transparent/tokens_non-transparent.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Printable/PaperBattleShipGridandShips.png b/assets/Naval Battle Assets/Printable/PaperBattleShipGridandShips.png deleted file mode 100644 index 95740be..0000000 Binary files a/assets/Naval Battle Assets/Printable/PaperBattleShipGridandShips.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Printable/PaperBattleShipTokens.png b/assets/Naval Battle Assets/Printable/PaperBattleShipTokens.png deleted file mode 100644 index a0e3bb9..0000000 Binary files a/assets/Naval Battle Assets/Printable/PaperBattleShipTokens.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Scraps/metalic_panel.png b/assets/Naval Battle Assets/Scraps/metalic_panel.png deleted file mode 100644 index a38ae43..0000000 Binary files a/assets/Naval Battle Assets/Scraps/metalic_panel.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Scraps/oceangrid.png b/assets/Naval Battle Assets/Scraps/oceangrid.png deleted file mode 100644 index a74e93e..0000000 Binary files a/assets/Naval Battle Assets/Scraps/oceangrid.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Scraps/radargrid.png b/assets/Naval Battle Assets/Scraps/radargrid.png deleted file mode 100644 index 76fa1c4..0000000 Binary files a/assets/Naval Battle Assets/Scraps/radargrid.png and /dev/null differ diff --git a/assets/Naval Battle Assets/Tokens.png b/assets/Naval Battle Assets/Tokens.png deleted file mode 100644 index f8717b7..0000000 Binary files a/assets/Naval Battle Assets/Tokens.png and /dev/null differ diff --git a/assets/Naval Battle Assets/oceangrid_final.png b/assets/Naval Battle Assets/oceangrid_final.png deleted file mode 100644 index babed2b..0000000 Binary files a/assets/Naval Battle Assets/oceangrid_final.png and /dev/null differ diff --git a/assets/Naval Battle Assets/radargrid_final.png b/assets/Naval Battle Assets/radargrid_final.png deleted file mode 100644 index 8b13a93..0000000 Binary files a/assets/Naval Battle Assets/radargrid_final.png and /dev/null differ diff --git a/assets/Sea Warfare Set.zip b/assets/Sea Warfare Set.zip deleted file mode 100644 index 7dba882..0000000 Binary files a/assets/Sea Warfare Set.zip and /dev/null differ diff --git a/assets/Sea Warfare Set/Battleship/ShipBattleshipHull.png b/assets/Sea Warfare Set/Battleship/ShipBattleshipHull.png deleted file mode 100644 index 7b21e88..0000000 Binary files a/assets/Sea Warfare Set/Battleship/ShipBattleshipHull.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Battleship/WeaponBattleshipStandardGun.png b/assets/Sea Warfare Set/Battleship/WeaponBattleshipStandardGun.png deleted file mode 100644 index a4e2202..0000000 Binary files a/assets/Sea Warfare Set/Battleship/WeaponBattleshipStandardGun.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Carrier/ShipCarrierHull.png b/assets/Sea Warfare Set/Carrier/ShipCarrierHull.png deleted file mode 100644 index 7276d12..0000000 Binary files a/assets/Sea Warfare Set/Carrier/ShipCarrierHull.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Cruiser/ShipCruiserHull.png b/assets/Sea Warfare Set/Cruiser/ShipCruiserHull.png deleted file mode 100644 index 064c800..0000000 Binary files a/assets/Sea Warfare Set/Cruiser/ShipCruiserHull.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Cruiser/WeaponCruiserStandardSTSM.png b/assets/Sea Warfare Set/Cruiser/WeaponCruiserStandardSTSM.png deleted file mode 100644 index 9427d35..0000000 Binary files a/assets/Sea Warfare Set/Cruiser/WeaponCruiserStandardSTSM.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Destroyer/ShipDestroyerHull.png b/assets/Sea Warfare Set/Destroyer/ShipDestroyerHull.png deleted file mode 100644 index f3273ab..0000000 Binary files a/assets/Sea Warfare Set/Destroyer/ShipDestroyerHull.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Destroyer/WeaponDestroyerStandardGun.png b/assets/Sea Warfare Set/Destroyer/WeaponDestroyerStandardGun.png deleted file mode 100644 index 600a181..0000000 Binary files a/assets/Sea Warfare Set/Destroyer/WeaponDestroyerStandardGun.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Display.png b/assets/Sea Warfare Set/Display.png deleted file mode 100644 index c8a9d3c..0000000 Binary files a/assets/Sea Warfare Set/Display.png and /dev/null differ diff --git a/assets/Sea Warfare Set/PatrolBoat/ShipPatrolHull.png b/assets/Sea Warfare Set/PatrolBoat/ShipPatrolHull.png deleted file mode 100644 index 847b0d4..0000000 Binary files a/assets/Sea Warfare Set/PatrolBoat/ShipPatrolHull.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Plane/Missile.png b/assets/Sea Warfare Set/Plane/Missile.png deleted file mode 100644 index f0898d4..0000000 Binary files a/assets/Sea Warfare Set/Plane/Missile.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Plane/PlaneF-35Lightning2.png b/assets/Sea Warfare Set/Plane/PlaneF-35Lightning2.png deleted file mode 100644 index b593fa5..0000000 Binary files a/assets/Sea Warfare Set/Plane/PlaneF-35Lightning2.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Rescue Ship/ShipRescue.png b/assets/Sea Warfare Set/Rescue Ship/ShipRescue.png deleted file mode 100644 index 7aa1384..0000000 Binary files a/assets/Sea Warfare Set/Rescue Ship/ShipRescue.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Submarine/ShipSubMarineHull.png b/assets/Sea Warfare Set/Submarine/ShipSubMarineHull.png deleted file mode 100644 index 5e68ef8..0000000 Binary files a/assets/Sea Warfare Set/Submarine/ShipSubMarineHull.png and /dev/null differ diff --git a/assets/Sea Warfare Set/Submarine/WeaponSubmarineStandard.png b/assets/Sea Warfare Set/Submarine/WeaponSubmarineStandard.png deleted file mode 100644 index 4535567..0000000 Binary files a/assets/Sea Warfare Set/Submarine/WeaponSubmarineStandard.png and /dev/null differ diff --git a/assets/barcos.png b/assets/barcos.png index 2d8a88f..4a2b45d 100644 Binary files a/assets/barcos.png and b/assets/barcos.png differ diff --git a/assets/barcos.xcf b/assets/barcos.xcf index 7e67df1..4846c26 100644 Binary files a/assets/barcos.xcf and b/assets/barcos.xcf differ diff --git a/assets/calm-water-autotiles-anim.png b/assets/calm-water-autotiles-anim.png new file mode 100644 index 0000000..7e468fc Binary files /dev/null and b/assets/calm-water-autotiles-anim.png differ diff --git a/assets/ocean-autotiles-anim.png b/assets/ocean-autotiles-anim.png new file mode 100644 index 0000000..b8d3b45 Binary files /dev/null and b/assets/ocean-autotiles-anim.png differ diff --git a/assets/shipz.zip b/assets/shipz.zip deleted file mode 100644 index fc3ba20..0000000 Binary files a/assets/shipz.zip and /dev/null differ diff --git a/assets/waterfall-autotiles-anim.png b/assets/waterfall-autotiles-anim.png new file mode 100644 index 0000000..46b243a Binary files /dev/null and b/assets/waterfall-autotiles-anim.png differ diff --git a/game.js b/game.js index 4602892..8d51deb 100644 --- a/game.js +++ b/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); + } +} +