95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
import PartidaBattle from "./PartidaBattle.js";
|
|
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 },
|
|
],
|
|
|
|
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 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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
|