diff --git a/Barco.js b/Barco.js index 90a60b9..81b2895 100644 --- a/Barco.js +++ b/Barco.js @@ -15,7 +15,6 @@ class Barco { this.seleccionado = false; this.posIncorrecta = true; } - clickado(clickX, clickY) { if (this.orientacion === "VERTICAL") { return ( @@ -27,30 +26,25 @@ 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; } - setXY(x, y) { this.x = x; this.y = y; } - giraBarco() { this.orientacion === "VERTICAL" ? (this.orientacion = "HORIZONTAL") : (this.orientacion = "VERTICAL"); } - draw(ctx) { this.orientacion === "VERTICAL" ? ctx.drawImage(this.barcoImg[0], this.x * 64, this.y * 64) diff --git a/Mapa.js b/Mapa.js index 0813e95..72e0f64 100644 --- a/Mapa.js +++ b/Mapa.js @@ -1,9 +1,11 @@ +import Oceano from "./oceano.js"; + class Mapa { celdas = []; barcos = []; barcoSeleccionado; - constructor(canvas, size, scale) { + constructor(canvas, size, scale, oceanoImg) { this.canvas = canvas; this.canvas.width = size; this.canvas.height = size; @@ -12,7 +14,8 @@ class Mapa { this.ctx = this.canvas.getContext("2d"); this.scale = scale; this.ctx.scale(this.scale, this.scale); - + this.oceano = new Oceano(this.width, this.height, 32, oceanoImg); + this.casillaSize = 64; this.numFilas = 10; this.numColumnas = 10; @@ -24,13 +27,11 @@ class Mapa { 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) { const barcosArray = Array.isArray(barcos) ? barcos : [barcos]; for (const barco of barcosArray) { @@ -46,7 +47,6 @@ class Mapa { } this.barcos.push(...barcosArray); } - calcularCoordenadas(event) { const rect = this.canvas.getBoundingClientRect(); const x = Math.floor( @@ -57,7 +57,6 @@ class Mapa { ); 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; @@ -91,7 +90,6 @@ class Mapa { this.posicionaBarcoSeleccionado(); } }; - seleccionaBarco(index_barco) { this.barcoSeleccionado = this.barcos[index_barco]; this.barcoSeleccionado.seleccionado = true; @@ -114,7 +112,6 @@ class Mapa { this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar(); } }; - posicionaBarcoSeleccionado() { this.setBarcos(this.barcoSeleccionado); this.barcoSeleccionado = null; @@ -127,7 +124,6 @@ class Mapa { ? x < 0 || x >= this.numColumnas || y < 0 || y + longitud > this.numFilas : x < 0 || x + longitud > this.numColumnas || y < 0 || y > this.numFilas; } - sePuedeColocar() { const x = this.barcoSeleccionado.x; const y = this.barcoSeleccionado.y; @@ -168,39 +164,39 @@ class Mapa { return suma; } - draw() { this.ctx.clearRect(0, 0, this.width, this.height); + this.oceano.draw(this.ctx); + 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; - 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; - this.ctx.moveTo(x, 0); - this.ctx.lineTo(x, this.casillaSize * this.numFilas); - } - this.ctx.strokeStyle = "rgba(0, 255, 0, 0.2)"; - this.ctx.stroke(); + // this.ctx.beginPath(); + // for (let i = 0; i <= this.numFilas; i++) { + // const y = i * this.casillaSize; + // 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; + // this.ctx.moveTo(x, 0); + // this.ctx.lineTo(x, this.casillaSize * this.numFilas); + // } + // 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); - } - } + // 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 3e7257a..b35bd73 100644 --- a/PartidaBattle.js +++ b/PartidaBattle.js @@ -2,27 +2,28 @@ import Barco, { BarcoTipo } from "./Barco.js"; import Mapa from "./Mapa.js"; class PartidaBattle { - - constructor(canvasAtaque, canvasFlota,barcosImgs) { - this.barcosImgs = barcosImgs; + constructor(canvasAtaque, canvasFlota,sprites) { + this.sprites = sprites; this.canvasAtaque = canvasAtaque; this.canvasFloat = canvasFlota; - this.mapaAtaque = new Mapa(canvasAtaque, 640, 1); - this.mapaFlota = new Mapa(canvasFlota, 320, .5 ); + + this.mapaAtaque = new Mapa(canvasAtaque, 640, 1,sprites['OCEANO']); + this.mapaFlota = new Mapa(canvasFlota, 320, .5, sprites['OCEANO']); + this.mapaAtaque.setBarcos([ - 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']), + new Barco(0, 0, BarcoTipo.PORTAAVIONES, "VERTICAL",this.sprites['PORTAAVIONES']), + new Barco(1, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.sprites['ACORAZADO']), + new Barco(2, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.sprites['ACORAZADO']), + new Barco(3, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.sprites['ACORAZADO']), + new Barco(4, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.sprites['DESTRUCTOR']), + new Barco(5, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.sprites['DESTRUCTOR']), + new Barco(6, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.sprites['DESTRUCTOR']), + new Barco(7, 0, BarcoTipo.FRAGATA, "VERTICAL",this.sprites['FRAGATA']), + new Barco(8, 0, BarcoTipo.FRAGATA, "VERTICAL",this.sprites['FRAGATA']), ]); this.mapaFlota.setBarcos(this.mapaAtaque.barcos); } - + draw() { this.mapaAtaque.draw(); this.mapaFlota.draw(); diff --git a/assets/barcos.png b/assets/barcos.png index 4a2b45d..f2b1c37 100644 Binary files a/assets/barcos.png and b/assets/barcos.png differ diff --git a/assets/barcos.xcf b/assets/barcos.xcf index 4846c26..39fd446 100644 Binary files a/assets/barcos.xcf and b/assets/barcos.xcf differ diff --git a/assets/ocean-autotiles-anim.png b/assets/ocean-autotiles-anim.png deleted file mode 100644 index b8d3b45..0000000 Binary files a/assets/ocean-autotiles-anim.png and /dev/null differ diff --git a/assets/ship_large_body.png b/assets/ship_large_body.png deleted file mode 100644 index 7a60795..0000000 Binary files a/assets/ship_large_body.png and /dev/null differ diff --git a/assets/waterfall-autotiles-anim.png b/assets/waterfall-autotiles-anim.png deleted file mode 100644 index 46b243a..0000000 Binary files a/assets/waterfall-autotiles-anim.png and /dev/null differ diff --git a/game.js b/game.js index 8d51deb..3ab948f 100644 --- a/game.js +++ b/game.js @@ -10,7 +10,6 @@ barcosImg.onload = function(){ iniciaJuego(); } - function getSprites(spriteSheet) { const sprites = { PORTAAVIONES: [ @@ -29,6 +28,23 @@ function getSprites(spriteSheet) { { x: 192, y: 0, width: 64, height: 64 }, { x: 256, y: 0, width: 64, height: 64 }, ], + + OCEANO: [ + { x: 320, y: 0, width: 32, height: 32 }, + { x: 384, y: 0, width: 32, height: 32 }, + { x: 416, y: 0, width: 32, height: 32 }, + + { x: 320, y: 32, width: 32, height: 32 }, + { x: 416, y: 64, width: 32, height: 32 }, + + { x: 320, y: 96, width: 32, height: 32 }, + { x: 384, y: 96, width: 32, height: 32 }, + { x: 416, y: 96, width: 32, height: 32 }, + + ] + + + }; const spritesObj = {}; @@ -61,7 +77,6 @@ function getSprites(spriteSheet) { return spritesObj; } - function iniciaJuego(){ const canvasMapa = document.getElementById("mapa"); const canvasMiniMapa = document.getElementById("minimapa"); diff --git a/index.html b/index.html index b1c4f0b..f600673 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- +
diff --git a/oceano.js b/oceano.js new file mode 100644 index 0000000..a5b149d --- /dev/null +++ b/oceano.js @@ -0,0 +1,21 @@ +class Oceano { + constructor(width, height, celdaSize, sprites) { + this.sprites = sprites; + this.celdaSize = celdaSize; + this.filas = Math.floor(height / celdaSize); + this.columnas = Math.floor(width / celdaSize); + } + + update() {} + + draw(ctx) { + for (let y = 0; y < this.filas; y++) { + ctx.drawImage(this.sprites[1], y * this.celdaSize, 0); + ctx.drawImage(this.sprites[6], y * this.celdaSize, (this.columnas-1)*32) + } + + for (let x = 0; x < this.filas; x++) {} + } +} + +export default Oceano;