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.seleccionado = false;
this.posIncorrecta = true; this.posIncorrecta = true;
} }
clickado(clickX, clickY) { clickado(clickX, clickY) {
if (this.orientacion === "VERTICAL") { if (this.orientacion === "VERTICAL") {
return ( return (
@ -27,30 +26,25 @@ class Barco {
); );
} }
} }
saveIniPos() { saveIniPos() {
this.orientacionIni=this.orientacion; this.orientacionIni=this.orientacion;
this.xIni = this.x; this.xIni = this.x;
this.yIni = this.y; this.yIni = this.y;
} }
restoreIniPos() { restoreIniPos() {
this.orientacion=this.orientacionIni; this.orientacion=this.orientacionIni;
this.x = this.xIni; this.x = this.xIni;
this.y = this.yIni; this.y = this.yIni;
} }
setXY(x, y) { setXY(x, y) {
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
giraBarco() { giraBarco() {
this.orientacion === "VERTICAL" this.orientacion === "VERTICAL"
? (this.orientacion = "HORIZONTAL") ? (this.orientacion = "HORIZONTAL")
: (this.orientacion = "VERTICAL"); : (this.orientacion = "VERTICAL");
} }
draw(ctx) { draw(ctx) {
this.orientacion === "VERTICAL" this.orientacion === "VERTICAL"
? ctx.drawImage(this.barcoImg[0], this.x * 64, this.y * 64) ? 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 { class Mapa {
celdas = []; celdas = [];
barcos = []; barcos = [];
barcoSeleccionado; barcoSeleccionado;
constructor(canvas, size, scale) { constructor(canvas, size, scale, oceanoImg) {
this.canvas = canvas; this.canvas = canvas;
this.canvas.width = size; this.canvas.width = size;
this.canvas.height = size; this.canvas.height = size;
@ -12,7 +14,8 @@ class Mapa {
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.scale = scale; this.scale = scale;
this.ctx.scale(this.scale, this.scale); this.ctx.scale(this.scale, this.scale);
this.oceano = new Oceano(this.width, this.height, 32, oceanoImg);
this.casillaSize = 64; this.casillaSize = 64;
this.numFilas = 10; this.numFilas = 10;
this.numColumnas = 10; this.numColumnas = 10;
@ -24,13 +27,11 @@ class Mapa {
canvas.addEventListener("mousemove", this.mueveBarcoSeleccionado); canvas.addEventListener("mousemove", this.mueveBarcoSeleccionado);
document.addEventListener("keydown", this.handleKeyDown); document.addEventListener("keydown", this.handleKeyDown);
} }
inicializarCeldas() { inicializarCeldas() {
for (let i = 0; i < this.numFilas; i++) { for (let i = 0; i < this.numFilas; i++) {
this.celdas[i] = new Array(this.numColumnas).fill(0); this.celdas[i] = new Array(this.numColumnas).fill(0);
} }
} }
setBarcos(barcos) { setBarcos(barcos) {
const barcosArray = Array.isArray(barcos) ? barcos : [barcos]; const barcosArray = Array.isArray(barcos) ? barcos : [barcos];
for (const barco of barcosArray) { for (const barco of barcosArray) {
@ -46,7 +47,6 @@ class Mapa {
} }
this.barcos.push(...barcosArray); this.barcos.push(...barcosArray);
} }
calcularCoordenadas(event) { calcularCoordenadas(event) {
const rect = this.canvas.getBoundingClientRect(); const rect = this.canvas.getBoundingClientRect();
const x = Math.floor( const x = Math.floor(
@ -57,7 +57,6 @@ class Mapa {
); );
return { x, y }; return { x, y };
} }
//Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this //Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
handleKeyDown = (event) => { handleKeyDown = (event) => {
const canvasFocused = document.activeElement === this.canvas; const canvasFocused = document.activeElement === this.canvas;
@ -91,7 +90,6 @@ class Mapa {
this.posicionaBarcoSeleccionado(); this.posicionaBarcoSeleccionado();
} }
}; };
seleccionaBarco(index_barco) { seleccionaBarco(index_barco) {
this.barcoSeleccionado = this.barcos[index_barco]; this.barcoSeleccionado = this.barcos[index_barco];
this.barcoSeleccionado.seleccionado = true; this.barcoSeleccionado.seleccionado = true;
@ -114,7 +112,6 @@ class Mapa {
this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar(); this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar();
} }
}; };
posicionaBarcoSeleccionado() { posicionaBarcoSeleccionado() {
this.setBarcos(this.barcoSeleccionado); this.setBarcos(this.barcoSeleccionado);
this.barcoSeleccionado = null; this.barcoSeleccionado = null;
@ -127,7 +124,6 @@ class Mapa {
? x < 0 || x >= this.numColumnas || y < 0 || y + longitud > this.numFilas ? x < 0 || x >= this.numColumnas || y < 0 || y + longitud > this.numFilas
: x < 0 || x + longitud > this.numColumnas || y < 0 || y > this.numFilas; : x < 0 || x + longitud > this.numColumnas || y < 0 || y > this.numFilas;
} }
sePuedeColocar() { sePuedeColocar() {
const x = this.barcoSeleccionado.x; const x = this.barcoSeleccionado.x;
const y = this.barcoSeleccionado.y; const y = this.barcoSeleccionado.y;
@ -168,39 +164,39 @@ class Mapa {
return suma; return suma;
} }
draw() { draw() {
this.ctx.clearRect(0, 0, this.width, this.height); this.ctx.clearRect(0, 0, this.width, this.height);
this.oceano.draw(this.ctx);
this.barcos.forEach((barco) => { this.barcos.forEach((barco) => {
barco.draw(this.ctx); barco.draw(this.ctx);
}); });
if (this.barcoSeleccionado) this.barcoSeleccionado.draw(this.ctx); if (this.barcoSeleccionado) this.barcoSeleccionado.draw(this.ctx);
this.ctx.beginPath(); // this.ctx.beginPath();
for (let i = 0; i <= this.numFilas; i++) { // for (let i = 0; i <= this.numFilas; i++) {
const y = i * this.casillaSize; // const y = i * this.casillaSize;
this.ctx.moveTo(0, y); // this.ctx.moveTo(0, y);
this.ctx.lineTo(this.casillaSize * this.numColumnas, y); // this.ctx.lineTo(this.casillaSize * this.numColumnas, y);
} // }
for (let i = 0; i <= this.numColumnas; i++) { // for (let i = 0; i <= this.numColumnas; i++) {
const x = i * this.casillaSize; // const x = i * this.casillaSize;
this.ctx.moveTo(x, 0); // this.ctx.moveTo(x, 0);
this.ctx.lineTo(x, this.casillaSize * this.numFilas); // this.ctx.lineTo(x, this.casillaSize * this.numFilas);
} // }
this.ctx.strokeStyle = "rgba(0, 255, 0, 0.2)"; // this.ctx.strokeStyle = "rgba(0, 255, 0, 0.2)";
this.ctx.stroke(); // this.ctx.stroke();
this.ctx.fillStyle = "red"; // this.ctx.fillStyle = "red";
this.ctx.font = "bold 24px Arial"; // this.ctx.font = "bold 24px Arial";
for (let fila = 0; fila < this.numFilas; fila++) { // for (let fila = 0; fila < this.numFilas; fila++) {
for (let columna = 0; columna < this.numColumnas; columna++) { // for (let columna = 0; columna < this.numColumnas; columna++) {
const valor = this.celdas[fila][columna]; // const valor = this.celdas[fila][columna];
const posX = columna * this.casillaSize + this.casillaSize / 2.3; // const posX = columna * this.casillaSize + this.casillaSize / 2.3;
const posY = fila * this.casillaSize + this.casillaSize / 1.5; // const posY = fila * this.casillaSize + this.casillaSize / 1.5;
this.ctx.fillText(valor, posX, posY); // 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"; import Mapa from "./Mapa.js";
class PartidaBattle { class PartidaBattle {
constructor(canvasAtaque, canvasFlota,sprites) {
constructor(canvasAtaque, canvasFlota,barcosImgs) { this.sprites = sprites;
this.barcosImgs = barcosImgs;
this.canvasAtaque = canvasAtaque; this.canvasAtaque = canvasAtaque;
this.canvasFloat = canvasFlota; 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([ this.mapaAtaque.setBarcos([
new Barco(0, 0, BarcoTipo.PORTAAVIONES, "VERTICAL",this.barcosImgs['PORTAAVIONES']), new Barco(0, 0, BarcoTipo.PORTAAVIONES, "VERTICAL",this.sprites['PORTAAVIONES']),
new Barco(1, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.barcosImgs['ACORAZADO']), new Barco(1, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.sprites['ACORAZADO']),
new Barco(2, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.barcosImgs['ACORAZADO']), new Barco(2, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.sprites['ACORAZADO']),
new Barco(3, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.barcosImgs['ACORAZADO']), new Barco(3, 0, BarcoTipo.ACORAZADO, "VERTICAL",this.sprites['ACORAZADO']),
new Barco(4, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.barcosImgs['DESTRUCTOR']), new Barco(4, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.sprites['DESTRUCTOR']),
new Barco(5, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.barcosImgs['DESTRUCTOR']), new Barco(5, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.sprites['DESTRUCTOR']),
new Barco(6, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.barcosImgs['DESTRUCTOR']), new Barco(6, 0, BarcoTipo.DESTRUCTOR, "VERTICAL",this.sprites['DESTRUCTOR']),
new Barco(7, 0, BarcoTipo.FRAGATA, "VERTICAL",this.barcosImgs['FRAGATA']), new Barco(7, 0, BarcoTipo.FRAGATA, "VERTICAL",this.sprites['FRAGATA']),
new Barco(8, 0, BarcoTipo.FRAGATA, "VERTICAL",this.barcosImgs['FRAGATA']), new Barco(8, 0, BarcoTipo.FRAGATA, "VERTICAL",this.sprites['FRAGATA']),
]); ]);
this.mapaFlota.setBarcos(this.mapaAtaque.barcos); this.mapaFlota.setBarcos(this.mapaAtaque.barcos);
} }
draw() { draw() {
this.mapaAtaque.draw(); this.mapaAtaque.draw();
this.mapaFlota.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(); iniciaJuego();
} }
function getSprites(spriteSheet) { function getSprites(spriteSheet) {
const sprites = { const sprites = {
PORTAAVIONES: [ PORTAAVIONES: [
@ -29,6 +28,23 @@ function getSprites(spriteSheet) {
{ x: 192, y: 0, width: 64, height: 64 }, { x: 192, y: 0, width: 64, height: 64 },
{ x: 256, 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 = {}; const spritesObj = {};
@ -61,7 +77,6 @@ function getSprites(spriteSheet) {
return spritesObj; return spritesObj;
} }
function iniciaJuego(){ function iniciaJuego(){
const canvasMapa = document.getElementById("mapa"); const canvasMapa = document.getElementById("mapa");
const canvasMiniMapa = document.getElementById("minimapa"); const canvasMiniMapa = document.getElementById("minimapa");

2
index.html
View File

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