|
|
@@ -0,0 +1,832 @@
|
|
|
+class Game {
|
|
|
+ constructor() {
|
|
|
+ this.canvas = document.getElementById('gameCanvas');
|
|
|
+ this.ctx = this.canvas.getContext('2d');
|
|
|
+ this.ctx.imageSmoothingEnabled = false;
|
|
|
+
|
|
|
+ this.spriteSheet = new Image();
|
|
|
+ this.backgroundMusic = new Audio();
|
|
|
+
|
|
|
+ this.player = null;
|
|
|
+ this.backgroundElements = [];
|
|
|
+ this.backgroundLayers = {
|
|
|
+ far: [], // Elementos muy lejanos (nubes, montañas)
|
|
|
+ mid: [], // Elementos medios (árboles, edificios)
|
|
|
+ near: [] // Elementos cercanos (decoraciones, elementos interactivos)
|
|
|
+ };
|
|
|
+
|
|
|
+ // Sistema de generación de nubes mejorado
|
|
|
+ this.cloudSystem = new CloudSystem(this.canvas);
|
|
|
+
|
|
|
+ // Sistema de objetos de fondo
|
|
|
+ this.backgroundObjectSystem = new BackgroundObjectSystem(this.canvas, this);
|
|
|
+
|
|
|
+ // Sistema de letras sincronizadas
|
|
|
+ this.lyricsSystem = new LyricsSystem();
|
|
|
+
|
|
|
+ // Estado del juego
|
|
|
+ this.gameState = 'playing'; // 'playing', 'gameOver', 'paused'
|
|
|
+
|
|
|
+ // Definir tipos de elementos con sus configuraciones
|
|
|
+ this.elementTypes = {
|
|
|
+ floor: {
|
|
|
+ renderMethod: 'sprite',
|
|
|
+ defaultSpriteCoords: { x: 2, y: 430, w: 32, h: 32 },
|
|
|
+ layer: 'near'
|
|
|
+ },
|
|
|
+ decoration: {
|
|
|
+ renderMethod: 'sprite',
|
|
|
+ defaultSpriteCoords: { x: 137, y: 104, w: 35, h: 26 },
|
|
|
+ layer: 'near'
|
|
|
+ },
|
|
|
+ background: {
|
|
|
+ renderMethod: 'color',
|
|
|
+ color: '#4A90E2',
|
|
|
+ layer: 'far'
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ renderMethod: 'text',
|
|
|
+ font: '12px Arial',
|
|
|
+ color: 'white',
|
|
|
+ align: 'center',
|
|
|
+ layer: 'near'
|
|
|
+ },
|
|
|
+ sprite: {
|
|
|
+ renderMethod: 'sprite',
|
|
|
+ layer: 'near'
|
|
|
+ },
|
|
|
+ cloud: {
|
|
|
+ renderMethod: 'sprite',
|
|
|
+ layer: 'far',
|
|
|
+ defaultSpriteCoords: { x: 231, y: 112, w: 287, h: 148 },
|
|
|
+ autoMove: true,
|
|
|
+ moveSpeed: 0.5
|
|
|
+ },
|
|
|
+ backgroundObject: {
|
|
|
+ renderMethod: 'sprite',
|
|
|
+ layer: 'mid',
|
|
|
+ autoMove: true,
|
|
|
+ moveSpeed: 0.1,
|
|
|
+ // Definir las variantes de sprites disponibles
|
|
|
+ spriteVariants: [
|
|
|
+ { x: 546, y: 264, w: 30, h: 21 },
|
|
|
+ { x: 546, y: 286, w: 30, h: 21 },
|
|
|
+ { x: 546, y: 308, w: 30, h: 25 },
|
|
|
+ { x: 546, y: 334, w: 30, h: 24 },
|
|
|
+ { x: 546, y: 359, w: 30, h: 21 },
|
|
|
+ { x: 545, y: 382, w: 31, h: 29 },
|
|
|
+ { x: 516, y: 264, w: 29, h: 17 },
|
|
|
+ { x: 516, y: 282, w: 29, h: 21 },
|
|
|
+ { x: 516, y: 304, w: 29, h: 18 },
|
|
|
+ { x: 516, y: 323, w: 29, h: 18 },
|
|
|
+ { x: 516, y: 342, w: 29, h: 19 },
|
|
|
+ { x: 516, y: 362, w: 29, h: 19 },
|
|
|
+ { x: 516, y: 382, w: 28, h: 29 },
|
|
|
+ { x: 491, y: 270, w: 24, h: 26 },
|
|
|
+ { x: 491, y: 297, w: 24, h: 26 },
|
|
|
+ { x: 491, y: 324, w: 24, h: 26 },
|
|
|
+ { x: 491, y: 353, w: 24, h: 26 },
|
|
|
+ { x: 489, y: 382, w: 26, h: 29 },
|
|
|
+ { x: 465, y: 310, w: 25, h: 23 },
|
|
|
+ { x: 465, y: 334, w: 25, h: 23 },
|
|
|
+ { x: 465, y: 358, w: 25, h: 23 },
|
|
|
+ { x: 465, y: 382, w: 11, h: 29 },
|
|
|
+ { x: 477, y: 382, w: 11, h: 29 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ // Load assets
|
|
|
+ this.spriteSheet.src = 'assets/sprites.png';
|
|
|
+ this.backgroundMusic.src = 'assets/music.mp3';
|
|
|
+
|
|
|
+ // Configure audio
|
|
|
+ this.backgroundMusic.loop = true;
|
|
|
+ this.backgroundMusic.volume = 0.05;
|
|
|
+
|
|
|
+ // Create sprite processor for color key-out
|
|
|
+ this.spriteProcessor = new SpriteProcessor();
|
|
|
+
|
|
|
+ // Wait for assets to load
|
|
|
+ Promise.all([
|
|
|
+ new Promise(resolve => this.spriteSheet.onload = resolve),
|
|
|
+ new Promise(resolve => this.backgroundMusic.oncanplaythrough = resolve)
|
|
|
+ ]).then(() => {
|
|
|
+ // Process sprite sheet to remove #00ffff background
|
|
|
+ this.processedSpriteSheet = this.spriteProcessor.processSpriteSheet(this.spriteSheet, '#00ffff');
|
|
|
+ this.processedSpriteSheet.onload = () => {
|
|
|
+ this.startGame();
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // Handle audio context (for browsers that require user interaction)
|
|
|
+ this.canvas.addEventListener('click', () => {
|
|
|
+ if (this.backgroundMusic.paused && this.gameState === 'playing') {
|
|
|
+ this.backgroundMusic.play().catch(e => console.log('Audio play failed:', e));
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // Agregar controles de teclado
|
|
|
+ this.setupKeyboardControls();
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar elementos de forma dinámica
|
|
|
+ addElement(type, x, y, w, h, options = {}) {
|
|
|
+ const elementConfig = this.elementTypes[type];
|
|
|
+ const layer = options.layer || elementConfig?.layer || 'near';
|
|
|
+
|
|
|
+ const element = {
|
|
|
+ type,
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ w,
|
|
|
+ h,
|
|
|
+ ...options
|
|
|
+ };
|
|
|
+
|
|
|
+ // Agregar a la capa correspondiente
|
|
|
+ if (this.backgroundLayers[layer]) {
|
|
|
+ this.backgroundLayers[layer].push(element);
|
|
|
+ } else {
|
|
|
+ this.backgroundElements.push(element);
|
|
|
+ }
|
|
|
+
|
|
|
+ return element;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar elementos de piso
|
|
|
+ addFloorTile(x, y) {
|
|
|
+ return this.addElement('floor', x, y, 32, 32);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar decoraciones
|
|
|
+ addDecoration(x, y, w = 35, h = 26) {
|
|
|
+ return this.addElement('decoration', x, y, w, h);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar elementos de color sólido
|
|
|
+ addColorElement(x, y, w, h, color, layer = 'far') {
|
|
|
+ return this.addElement('background', x, y, w, h, { color, layer });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar texto
|
|
|
+ addText(x, y, text, options = {}) {
|
|
|
+ return this.addElement('text', x, y, 0, 0, { text, ...options });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar sprites personalizados
|
|
|
+ addSprite(x, y, w, h, spriteCoords, options = {}) {
|
|
|
+ return this.addElement('sprite', x, y, w, h, {
|
|
|
+ spriteCoords,
|
|
|
+ ...options
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para agregar cualquier sprite con coordenadas específicas
|
|
|
+ addCustomSprite(type, x, y, w, h, spriteCoords, options = {}) {
|
|
|
+ return this.addElement(type, x, y, w, h, {
|
|
|
+ spriteCoords,
|
|
|
+ ...options
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ startGame() {
|
|
|
+ // Create player
|
|
|
+ this.player = new Player(144, 176, this.processedSpriteSheet);
|
|
|
+
|
|
|
+ // Crear elementos de fondo usando los nuevos métodos
|
|
|
+ // Piso
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ this.addFloorTile(i * 32, 208);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Inicializar sistema de nubes
|
|
|
+ this.cloudSystem.init(this.processedSpriteSheet, this.backgroundLayers.far);
|
|
|
+
|
|
|
+ // Inicializar sistema de objetos de fondo
|
|
|
+ this.backgroundObjectSystem.init(this.processedSpriteSheet, this.backgroundLayers.mid);
|
|
|
+
|
|
|
+ // Macarons
|
|
|
+ this.addSprite(10, 183, 35, 26, { x: 137, y: 104, w: 35, h: 26 });
|
|
|
+ this.addSprite(42, 183, 35, 26, { x: 173, y: 104, w: 35, h: 26 });
|
|
|
+ this.addSprite(74, 183, 35, 26, { x: 137, y: 131, w: 35, h: 26 });
|
|
|
+ this.addSprite(106, 183, 35, 26, { x: 173, y: 131, w: 35, h: 26 });
|
|
|
+
|
|
|
+ // Candybar
|
|
|
+ this.addSprite(200, 130, 48, 79, { x: 179, y: 438, w: 48, h: 79 });
|
|
|
+
|
|
|
+ // Cake
|
|
|
+ this.addSprite(260, 134, 100, 75, { x: 461, y: 414, w: 100, h: 75 });
|
|
|
+
|
|
|
+ // Cat
|
|
|
+ this.addSprite(185, 187, 20, 23, { x: 235, y: 87, w: 20, h: 23 });
|
|
|
+ this.addSprite(200, 187, 20, 23, { x: 389, y: 87, w: 16, h: 23 });
|
|
|
+
|
|
|
+ this.gameLoop();
|
|
|
+ }
|
|
|
+
|
|
|
+ update() {
|
|
|
+ if (this.gameState !== 'playing') return;
|
|
|
+
|
|
|
+ if (this.player) {
|
|
|
+ this.player.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ // Actualizar sistema de nubes
|
|
|
+ this.cloudSystem.update();
|
|
|
+
|
|
|
+ // Actualizar sistema de objetos de fondo
|
|
|
+ this.backgroundObjectSystem.update();
|
|
|
+
|
|
|
+ // Actualizar sistema de letras
|
|
|
+ if (!this.backgroundMusic.paused) {
|
|
|
+ this.lyricsSystem.update(this.backgroundMusic.currentTime);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Método para renderizar un elemento individual
|
|
|
+ renderElement(element) {
|
|
|
+ const elementConfig = this.elementTypes[element.type];
|
|
|
+ if (!elementConfig) {
|
|
|
+ console.warn(`Tipo de elemento desconocido: ${element.type}`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ switch (elementConfig.renderMethod) {
|
|
|
+ case 'sprite':
|
|
|
+ this.renderSpriteElement(element, elementConfig);
|
|
|
+ break;
|
|
|
+ case 'color':
|
|
|
+ this.renderColorElement(element, elementConfig);
|
|
|
+ break;
|
|
|
+ case 'text':
|
|
|
+ this.renderTextElement(element, elementConfig);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ console.warn(`Método de renderizado desconocido: ${elementConfig.renderMethod}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderSpriteElement(element, config) {
|
|
|
+ // Usar coordenadas personalizadas si están especificadas, sino usar las por defecto
|
|
|
+ const spriteCoords = element.spriteCoords || config.defaultSpriteCoords;
|
|
|
+
|
|
|
+ if (!spriteCoords) {
|
|
|
+ console.warn(`No se especificaron coordenadas de sprite para elemento tipo: ${element.type}`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Si el elemento tiene rotación, aplicar transformaciones
|
|
|
+ if (element.rotation) {
|
|
|
+ this.ctx.save();
|
|
|
+
|
|
|
+ // Calcular el centro del sprite para la rotación
|
|
|
+ const centerX = element.x + element.w / 2;
|
|
|
+ const centerY = element.y + element.h / 2;
|
|
|
+
|
|
|
+ // Aplicar transformaciones
|
|
|
+ this.ctx.translate(centerX, centerY);
|
|
|
+ this.ctx.rotate(element.rotation);
|
|
|
+ this.ctx.translate(-centerX, -centerY);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.ctx.drawImage(
|
|
|
+ this.processedSpriteSheet,
|
|
|
+ spriteCoords.x, spriteCoords.y, spriteCoords.w, spriteCoords.h,
|
|
|
+ element.x, element.y, element.w, element.h
|
|
|
+ );
|
|
|
+
|
|
|
+ // Restaurar el contexto si se aplicó rotación
|
|
|
+ if (element.rotation) {
|
|
|
+ this.ctx.restore();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderColorElement(element, config) {
|
|
|
+ const color = element.color || config.color;
|
|
|
+ this.ctx.fillStyle = color;
|
|
|
+ this.ctx.fillRect(element.x, element.y, element.w, element.h);
|
|
|
+ }
|
|
|
+
|
|
|
+ renderTextElement(element, config) {
|
|
|
+ this.ctx.fillStyle = element.color || config.color;
|
|
|
+ this.ctx.font = element.font || config.font;
|
|
|
+ this.ctx.textAlign = element.align || config.align;
|
|
|
+ this.ctx.fillText(element.text, element.x, element.y);
|
|
|
+ }
|
|
|
+
|
|
|
+ draw() {
|
|
|
+ // Clear canvas con degradado
|
|
|
+ const gradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
|
|
|
+ gradient.addColorStop(0, '#d9e6ff'); // Color superior
|
|
|
+ gradient.addColorStop(1, '#eee5ff'); // Color inferior
|
|
|
+
|
|
|
+ this.ctx.fillStyle = gradient;
|
|
|
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
+
|
|
|
+ // Renderizar elementos por capas (de lejos a cerca)
|
|
|
+ // Capa lejana (nubes, montañas)
|
|
|
+ this.backgroundLayers.far.forEach(element => {
|
|
|
+ this.renderElement(element);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Capa media (árboles, edificios)
|
|
|
+ this.backgroundLayers.mid.forEach(element => {
|
|
|
+ this.renderElement(element);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Capa cercana (decoraciones, elementos interactivos)
|
|
|
+ this.backgroundLayers.near.forEach(element => {
|
|
|
+ this.renderElement(element);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Elementos legacy (para compatibilidad)
|
|
|
+ this.backgroundElements.forEach(element => {
|
|
|
+ this.renderElement(element);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Draw player
|
|
|
+ if (this.player) {
|
|
|
+ this.player.draw(this.ctx);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Dibujar letras si están activadas
|
|
|
+ this.lyricsSystem.draw(this.ctx, this.canvas);
|
|
|
+
|
|
|
+ // Draw instructions if music hasn't started
|
|
|
+ if (this.backgroundMusic.paused && this.gameState === 'playing') {
|
|
|
+ this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
|
|
|
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
+
|
|
|
+ this.ctx.fillStyle = 'white';
|
|
|
+ this.ctx.font = '8px Courier New';
|
|
|
+ this.ctx.textAlign = 'center';
|
|
|
+ this.ctx.fillText('Click para iniciar música', 160, 120);
|
|
|
+ this.ctx.fillText('AD o ← → para moverte', 160, 130);
|
|
|
+ this.ctx.fillText('L - Mostrar/Ocultar letras', 160, 140);
|
|
|
+ this.ctx.fillText('R - Reiniciar juego', 160, 150);
|
|
|
+ // this.ctx.fillText('Ctrl+G - Simular fin de canción', 160, 160);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Dibujar pantalla de fin de juego
|
|
|
+ if (this.lyricsSystem.gameOverScreen) {
|
|
|
+ this.drawGameOverScreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ gameLoop() {
|
|
|
+ this.update();
|
|
|
+ this.draw();
|
|
|
+ requestAnimationFrame(() => this.gameLoop());
|
|
|
+ }
|
|
|
+
|
|
|
+ setupKeyboardControls() {
|
|
|
+ document.addEventListener('keydown', (e) => {
|
|
|
+ switch(e.key.toLowerCase()) {
|
|
|
+ case 'l':
|
|
|
+ this.lyricsSystem.toggleLyrics();
|
|
|
+ break;
|
|
|
+ case 'r':
|
|
|
+ this.restartGame();
|
|
|
+ break;
|
|
|
+ case 'g':
|
|
|
+ // Shortcut para desarrollo: simular fin de canción
|
|
|
+ if (e.ctrlKey) {
|
|
|
+ this.lyricsSystem.simulateGameOver();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ drawGameOverScreen() {
|
|
|
+ // Fondo negro translúcido
|
|
|
+ this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
|
|
|
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
+
|
|
|
+ // Texto de fin de juego
|
|
|
+ this.ctx.fillStyle = 'white';
|
|
|
+ this.ctx.font = '16px Courier New';
|
|
|
+ this.ctx.textAlign = 'center';
|
|
|
+
|
|
|
+ this.ctx.fillText('¡Canción terminada!', 160, 100);
|
|
|
+ this.ctx.fillText('¿Quieres jugar otra vez?', 160, 120);
|
|
|
+
|
|
|
+ // Botones
|
|
|
+ this.ctx.font = '12px Courier New';
|
|
|
+ this.ctx.fillText('Presiona R para reiniciar', 160, 150);
|
|
|
+ this.ctx.fillText('o recarga la página', 160, 165);
|
|
|
+ }
|
|
|
+
|
|
|
+ restartGame() {
|
|
|
+ // Detener música
|
|
|
+ this.backgroundMusic.pause();
|
|
|
+ this.backgroundMusic.currentTime = 0;
|
|
|
+
|
|
|
+ // Reiniciar sistemas
|
|
|
+ this.lyricsSystem.reset();
|
|
|
+
|
|
|
+ // Reiniciar estado del juego
|
|
|
+ this.gameState = 'playing';
|
|
|
+
|
|
|
+ // Limpiar elementos de fondo
|
|
|
+ this.backgroundLayers.far = [];
|
|
|
+ this.backgroundLayers.mid = [];
|
|
|
+ this.backgroundLayers.near = [];
|
|
|
+ this.backgroundElements = [];
|
|
|
+
|
|
|
+ // Reiniciar sistemas
|
|
|
+ this.cloudSystem.init(this.processedSpriteSheet, this.backgroundLayers.far);
|
|
|
+ this.backgroundObjectSystem.init(this.processedSpriteSheet, this.backgroundLayers.mid);
|
|
|
+
|
|
|
+ // Reiniciar jugador
|
|
|
+ this.player = new Player(144, 176, this.processedSpriteSheet);
|
|
|
+
|
|
|
+ // Recrear elementos de fondo
|
|
|
+ this.recreateBackgroundElements();
|
|
|
+ }
|
|
|
+
|
|
|
+ recreateBackgroundElements() {
|
|
|
+ // Piso
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ this.addFloorTile(i * 32, 208);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Macarons
|
|
|
+ this.addSprite(10, 183, 35, 26, { x: 137, y: 104, w: 35, h: 26 });
|
|
|
+ this.addSprite(42, 183, 35, 26, { x: 173, y: 104, w: 35, h: 26 });
|
|
|
+ this.addSprite(74, 183, 35, 26, { x: 137, y: 131, w: 35, h: 26 });
|
|
|
+ this.addSprite(106, 183, 35, 26, { x: 173, y: 131, w: 35, h: 26 });
|
|
|
+
|
|
|
+ // Candybar
|
|
|
+ this.addSprite(200, 130, 48, 79, { x: 179, y: 438, w: 48, h: 79 });
|
|
|
+
|
|
|
+ // Cake
|
|
|
+ this.addSprite(260, 134, 100, 75, { x: 461, y: 414, w: 100, h: 75 });
|
|
|
+
|
|
|
+ // Cat
|
|
|
+ this.addSprite(185, 187, 20, 23, { x: 235, y: 87, w: 20, h: 23 });
|
|
|
+ this.addSprite(200, 187, 20, 23, { x: 389, y: 87, w: 16, h: 23 });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Clase para manejar el sistema de nubes de forma modular
|
|
|
+class CloudSystem {
|
|
|
+ constructor(canvas) {
|
|
|
+ this.canvas = canvas;
|
|
|
+ this.spriteSheet = null;
|
|
|
+ this.cloudLayer = null;
|
|
|
+ this.frameCount = 0;
|
|
|
+
|
|
|
+ // Configuración simplificada
|
|
|
+ this.config = {
|
|
|
+ spawnRate: 0.1, // Probabilidad de spawn por frame (aumentada)
|
|
|
+ maxClouds: 2, // Máximo número de nubes en pantalla (aumentado)
|
|
|
+ speedRange: { min: 0.1, max: 0.15 }, // Velocidad de movimiento
|
|
|
+ yRange: { min: 1, max: 120 }, // Rango de altura
|
|
|
+ spriteCoords: { x: 231, y: 112, w: 287, h: 148 },
|
|
|
+ size: { w: 287, h: 148 },
|
|
|
+ minSpacing: 100, // Espaciado mínimo entre nubes (reducido)
|
|
|
+ minTimeBetweenSpawns: 60 // Frames mínimos entre apariciones (reducido)
|
|
|
+ };
|
|
|
+
|
|
|
+ this.lastSpawnTime = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ init(spriteSheet, cloudLayer) {
|
|
|
+ this.spriteSheet = spriteSheet;
|
|
|
+ this.cloudLayer = cloudLayer;
|
|
|
+
|
|
|
+ // Generar nubes iniciales para que el fondo no se vea vacío
|
|
|
+ this.spawnInitialClouds();
|
|
|
+ }
|
|
|
+
|
|
|
+ spawnInitialClouds() {
|
|
|
+ // Generar 2-3 nubes iniciales en posiciones aleatorias
|
|
|
+ const initialCount = Math.floor(Math.random() * 2) + 2;
|
|
|
+
|
|
|
+ for (let i = 0; i < initialCount; i++) {
|
|
|
+ const x = Math.random() * this.canvas.width;
|
|
|
+ const y = this.getRandomY();
|
|
|
+ const speed = this.getRandomSpeed();
|
|
|
+
|
|
|
+ this.createCloud(x, y, speed);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ update() {
|
|
|
+ this.frameCount++;
|
|
|
+
|
|
|
+ // Limpiar nubes que salieron de la pantalla
|
|
|
+ this.cleanupOffscreenClouds();
|
|
|
+
|
|
|
+ // Intentar generar nueva nube
|
|
|
+ if (this.shouldSpawnCloud()) {
|
|
|
+ this.spawnCloud();
|
|
|
+ }
|
|
|
+
|
|
|
+ // Mover nubes existentes
|
|
|
+ this.moveClouds();
|
|
|
+ }
|
|
|
+
|
|
|
+ shouldSpawnCloud() {
|
|
|
+ // Verificar tiempo mínimo entre apariciones
|
|
|
+ if (this.frameCount - this.lastSpawnTime < this.config.minTimeBetweenSpawns) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar número máximo de nubes
|
|
|
+ const cloudCount = this.cloudLayer.filter(e => e.type === 'cloud').length;
|
|
|
+ if (cloudCount >= this.config.maxClouds) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar probabilidad de spawn
|
|
|
+ if (Math.random() > this.config.spawnRate) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar espaciado mínimo
|
|
|
+ const hasSpacing = this.hasEnoughSpacing();
|
|
|
+
|
|
|
+ // Debug: mostrar información cada 60 frames (1 segundo)
|
|
|
+ if (this.frameCount % 60 === 0) {
|
|
|
+ console.log(`Clouds: ${cloudCount}/${this.config.maxClouds}, Spacing: ${hasSpacing}, Time: ${this.frameCount - this.lastSpawnTime}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ return hasSpacing;
|
|
|
+ }
|
|
|
+
|
|
|
+ hasEnoughSpacing() {
|
|
|
+ const existingClouds = this.cloudLayer.filter(e => e.type === 'cloud');
|
|
|
+
|
|
|
+ // Si no hay nubes, siempre se puede generar
|
|
|
+ if (existingClouds.length === 0) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar que no haya nubes muy cerca del borde derecho
|
|
|
+ for (const cloud of existingClouds) {
|
|
|
+ const distanceFromRight = this.canvas.width - cloud.x;
|
|
|
+ if (distanceFromRight < this.config.minSpacing) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ spawnCloud() {
|
|
|
+ const y = this.getRandomY();
|
|
|
+ const speed = this.getRandomSpeed();
|
|
|
+
|
|
|
+ // Generar desde la derecha de la pantalla
|
|
|
+ const x = this.canvas.width;
|
|
|
+
|
|
|
+ this.createCloud(x, y, speed);
|
|
|
+ this.lastSpawnTime = this.frameCount;
|
|
|
+
|
|
|
+ console.log(`Nueva nube generada en (${x}, ${y}) con velocidad ${speed}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ createCloud(x, y, speed) {
|
|
|
+ const cloud = {
|
|
|
+ type: 'cloud',
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ w: this.config.size.w,
|
|
|
+ h: this.config.size.h,
|
|
|
+ spriteCoords: this.config.spriteCoords,
|
|
|
+ moveSpeed: speed,
|
|
|
+ layer: 'far'
|
|
|
+ };
|
|
|
+
|
|
|
+ this.cloudLayer.push(cloud);
|
|
|
+ }
|
|
|
+
|
|
|
+ moveClouds() {
|
|
|
+ this.cloudLayer.forEach(cloud => {
|
|
|
+ if (cloud.type === 'cloud' && cloud.moveSpeed) {
|
|
|
+ cloud.x -= cloud.moveSpeed;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ cleanupOffscreenClouds() {
|
|
|
+ for (let i = this.cloudLayer.length - 1; i >= 0; i--) {
|
|
|
+ const element = this.cloudLayer[i];
|
|
|
+ if (element.type === 'cloud' && element.x + element.w < 0) {
|
|
|
+ this.cloudLayer.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getRandomY() {
|
|
|
+ return Math.random() *
|
|
|
+ (this.config.yRange.max - this.config.yRange.min) +
|
|
|
+ this.config.yRange.min;
|
|
|
+ }
|
|
|
+
|
|
|
+ getRandomSpeed() {
|
|
|
+ return Math.random() *
|
|
|
+ (this.config.speedRange.max - this.config.speedRange.min) +
|
|
|
+ this.config.speedRange.min;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Clase para manejar el sistema de objetos de fondo
|
|
|
+class BackgroundObjectSystem {
|
|
|
+ constructor(canvas, game) {
|
|
|
+ this.canvas = canvas;
|
|
|
+ this.game = game;
|
|
|
+ this.spriteSheet = null;
|
|
|
+ this.objectLayer = null;
|
|
|
+ this.frameCount = 0;
|
|
|
+
|
|
|
+ // Configuración para objetos de fondo
|
|
|
+ this.config = {
|
|
|
+ spawnRate: 0.3, // Probabilidad de spawn por frame (aumentada)
|
|
|
+ maxObjects: 300, // Máximo número de objetos en pantalla (aumentado)
|
|
|
+ speedRange: { min: 0.05, max: 0.1 }, // Velocidad de movimiento
|
|
|
+ yRange: { min: 10, max: 180 }, // Rango de altura (expandido)
|
|
|
+ minSpacing: 80, // Espaciado mínimo entre grupos (reducido)
|
|
|
+ minTimeBetweenSpawns: 60, // Frames mínimos entre apariciones (reducido)
|
|
|
+ groupSize: { min: 15, max: 25 }, // Tamaño del grupo de objetos (reducido)
|
|
|
+ groupSpacing: { min: 5, max: 40 } // Espaciado entre objetos en el grupo (ajustado)
|
|
|
+ };
|
|
|
+
|
|
|
+ this.lastSpawnTime = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ init(spriteSheet, objectLayer) {
|
|
|
+ this.spriteSheet = spriteSheet;
|
|
|
+ this.objectLayer = objectLayer;
|
|
|
+
|
|
|
+ // Generar objetos iniciales
|
|
|
+ this.spawnInitialObjects();
|
|
|
+ }
|
|
|
+
|
|
|
+ spawnInitialObjects() {
|
|
|
+ // Generar 3-5 grupos iniciales para llenar la pantalla
|
|
|
+ const initialGroups = Math.floor(Math.random() * 3) + 3;
|
|
|
+
|
|
|
+ for (let i = 0; i < initialGroups; i++) {
|
|
|
+ // Distribuir los grupos iniciales por toda la pantalla
|
|
|
+ const x = (i * this.canvas.width / initialGroups) + (Math.random() * 100);
|
|
|
+ const y = this.getRandomY();
|
|
|
+ const speed = this.getRandomSpeed();
|
|
|
+
|
|
|
+ this.createObjectGroup(x, y, speed);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ update() {
|
|
|
+ this.frameCount++;
|
|
|
+
|
|
|
+ // Limpiar objetos que salieron de la pantalla
|
|
|
+ this.cleanupOffscreenObjects();
|
|
|
+
|
|
|
+ // Intentar generar nuevo grupo
|
|
|
+ if (this.shouldSpawnObjectGroup()) {
|
|
|
+ this.spawnObjectGroup();
|
|
|
+ }
|
|
|
+
|
|
|
+ // Mover objetos existentes
|
|
|
+ this.moveObjects();
|
|
|
+ }
|
|
|
+
|
|
|
+ shouldSpawnObjectGroup() {
|
|
|
+ // Verificar tiempo mínimo entre apariciones
|
|
|
+ if (this.frameCount - this.lastSpawnTime < this.config.minTimeBetweenSpawns) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar número máximo de objetos
|
|
|
+ const objectCount = this.objectLayer.filter(e => e.type === 'backgroundObject').length;
|
|
|
+ if (objectCount >= this.config.maxObjects) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar probabilidad de spawn
|
|
|
+ if (Math.random() > this.config.spawnRate) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar espaciado mínimo
|
|
|
+ const hasSpacing = this.hasEnoughSpacing();
|
|
|
+
|
|
|
+ return hasSpacing;
|
|
|
+ }
|
|
|
+
|
|
|
+ hasEnoughSpacing() {
|
|
|
+ const existingObjects = this.objectLayer.filter(e => e.type === 'backgroundObject');
|
|
|
+
|
|
|
+ // Si no hay objetos, siempre se puede generar
|
|
|
+ if (existingObjects.length === 0) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verificar que no haya objetos muy cerca del borde derecho
|
|
|
+ for (const obj of existingObjects) {
|
|
|
+ const distanceFromRight = this.canvas.width - obj.x;
|
|
|
+ if (distanceFromRight < this.config.minSpacing) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ spawnObjectGroup() {
|
|
|
+ const y = this.getRandomY();
|
|
|
+ const speed = this.getRandomSpeed();
|
|
|
+
|
|
|
+ // Generar desde la derecha de la pantalla
|
|
|
+ const x = this.canvas.width;
|
|
|
+
|
|
|
+ this.createObjectGroup(x, y, speed);
|
|
|
+ this.lastSpawnTime = this.frameCount;
|
|
|
+
|
|
|
+ console.log(`Nuevo grupo de objetos generado en (${x}, ${y}) con velocidad ${speed}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ createObjectGroup(x, y, speed) {
|
|
|
+ const groupSize = Math.floor(Math.random() *
|
|
|
+ (this.config.groupSize.max - this.config.groupSize.min + 1)) +
|
|
|
+ this.config.groupSize.min;
|
|
|
+
|
|
|
+ // Obtener las variantes de sprites desde elementTypes
|
|
|
+ const spriteVariants = this.game.elementTypes.backgroundObject.spriteVariants;
|
|
|
+
|
|
|
+ let currentX = x;
|
|
|
+
|
|
|
+ for (let i = 0; i < groupSize; i++) {
|
|
|
+ // Seleccionar sprite aleatorio
|
|
|
+ const spriteVariant = spriteVariants[Math.floor(Math.random() * spriteVariants.length)];
|
|
|
+
|
|
|
+ // Aplicar rotación aleatoria
|
|
|
+ const rotation = (Math.random() - 0.5) * 0.8; // ±0.4 radianes
|
|
|
+
|
|
|
+ // Aplicar dispersión vertical aleatoria
|
|
|
+ const yOffset = (Math.random() - 0.5) * 40; // ±20 píxeles
|
|
|
+
|
|
|
+ const object = {
|
|
|
+ type: 'backgroundObject',
|
|
|
+ x: currentX,
|
|
|
+ y: y + yOffset,
|
|
|
+ w: spriteVariant.w,
|
|
|
+ h: spriteVariant.h,
|
|
|
+ spriteCoords: spriteVariant,
|
|
|
+ moveSpeed: speed,
|
|
|
+ rotation: rotation,
|
|
|
+ layer: 'mid'
|
|
|
+ };
|
|
|
+
|
|
|
+ this.objectLayer.push(object);
|
|
|
+
|
|
|
+ // Calcular siguiente posición con espaciado aleatorio
|
|
|
+ const spacing = Math.random() *
|
|
|
+ (this.config.groupSpacing.max - this.config.groupSpacing.min) +
|
|
|
+ this.config.groupSpacing.min;
|
|
|
+ currentX += spriteVariant.w + spacing;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ moveObjects() {
|
|
|
+ this.objectLayer.forEach(obj => {
|
|
|
+ if (obj.type === 'backgroundObject' && obj.moveSpeed) {
|
|
|
+ obj.x -= obj.moveSpeed;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ cleanupOffscreenObjects() {
|
|
|
+ for (let i = this.objectLayer.length - 1; i >= 0; i--) {
|
|
|
+ const element = this.objectLayer[i];
|
|
|
+ if (element.type === 'backgroundObject' && element.x + element.w < 0) {
|
|
|
+ this.objectLayer.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getRandomY() {
|
|
|
+ return Math.random() *
|
|
|
+ (this.config.yRange.max - this.config.yRange.min) +
|
|
|
+ this.config.yRange.min;
|
|
|
+ }
|
|
|
+
|
|
|
+ getRandomSpeed() {
|
|
|
+ return Math.random() *
|
|
|
+ (this.config.speedRange.max - this.config.speedRange.min) +
|
|
|
+ this.config.speedRange.min;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Initialize game when DOM is loaded
|
|
|
+window.addEventListener('DOMContentLoaded', () => {
|
|
|
+ new Game();
|
|
|
+});
|
Matthew Trejo
