marklogo/BattleShip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

oceano

Browse Source
This commit is contained in:
Marklogo 2024-03-27 13:42:31 +01:00
parent b6a7efe30c
commit aafccd3c9b
11 changed files with 85 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Barco.js
View File

@ -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)

64
Mapa.js
View File

@ -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);
// }
// }
}
}

31
PartidaBattle.js
View File

@ -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();

BIN
assets/barcos.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 194 KiB

BIN
assets/barcos.xcf
View File

Binary file not shown.

BIN
assets/ocean-autotiles-anim.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/ship_large_body.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
assets/waterfall-autotiles-anim.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.6 KiB

19
game.js
View File

@ -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");

2
index.html
View File

@ -13,7 +13,7 @@
<body>
<div id="container">
<div id="sub-container">
<canvas id="mapa" tabindex="0" ></canvas>
<canvas id="mapa" tabindex="0"></canvas>
</div>
<div id="sub-container">
<canvas id="minimapa" tabindex="1"></canvas>

21
oceano.js Normal file
View File

@ -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;