import Player from 'Player'; import Platform from 'Platform'; import Camera from 'Camera'; import PowerUp from 'PowerUp'; import Coin from 'Coin'; import { useControls } from 'Controls'; import { createUI } from 'UI'; export default class Game { constructor(container) { this.container = container; this.canvas = document.createElement('canvas'); // Initialize background music this.music = new Audio('https://play.rosebud.ai/assets/music.mp3?MOho'); this.music.loop = true; this.music.volume = 0.5; // Set volume to 50% this.fadeOpacity = 0; // Starting opacity for fade-in this.isCountingDown = true; // Start with countdown active this.countdownValue = 3; // Start at 3 this.countdownTimer = 0; // Timer for countdown this.timerStarted = false; // Flag to track if the timer has started // Screen shake effect properties this.screenShake = { active: false, intensity: 0, duration: 0, startTime: 0, offsetX: 0, offsetY: 0 }; this.ctx = this.canvas.getContext('2d'); this.width = window.innerWidth; this.height = 1200; // Flash effect for launch platforms this.flash = { active: false, opacity: 0, duration: 0.3, // seconds startTime: 0, color: '#87CEFA' // Light blue to match launch platforms }; this.canvas.width = this.width; this.canvas.height = this.height; // Update canvas size when window is resized window.addEventListener('resize', () => { this.width = window.innerWidth; this.canvas.width = this.width; }); this.container.appendChild(this.canvas); this.score = 0; this.maxHeight = 0; this.gameOver = false; // Coins collection this.coins = []; this.coinScore = 0; // Game timer (60 seconds) this.gameTime = 60; // in seconds this.timeRemaining = this.gameTime; this.lastTime = Date.now(); // Initialize game components this.camera = new Camera(this.width, this.height); this.platforms = []; this.powerUps = []; this.coins = []; // Generate initial platforms this.generatePlatforms(); // Create player on the lowest platform const lowestPlatform = this.platforms[0]; // The first platform created is the lowest this.player = new Player( lowestPlatform.x + lowestPlatform.width / 2 - 32, // Center on platform and adjust for player width lowestPlatform.y - 64 // Position on top of the platform ); // Setup UI this.ui = createUI(this.container); // Setup controls const { setupControls } = useControls(); this.controls = setupControls(this.player, this.container); this.controls.update = this.controls.update.bind(this); // No longer generating obstacles } // Removed generateObstacles method generatePlatforms() { // Create a starting platform this.platforms.push(new Platform(this.width / 2 - 15, this.height - 50, 30, 150)); // Generate platforms going upward const platformCount = 384; // Increased by 60% from 240 const maxHeight = this.height * 6; // Increased height to better distribute platforms const minPlatformWidth = 30; const minHorizontalSpacing = 80; // Minimum horizontal distance between platforms // Divide screen width into sections to avoid overlap // Calculate number of sections based on screen width const sections = Math.max(3, Math.floor(this.width / minHorizontalSpacing)); for (let i = 0; i < platformCount; i++) { // Choose a random section for this platform const section = Math.floor(Math.random() * sections); // Calculate x position within that section (with some variability) const sectionWidth = this.width / sections; // Add more padding for wider screens to prevent platforms hugging the edges const edgePadding = Math.min(30, this.width * 0.05); // 5% of screen width up to 30px const minX = section * sectionWidth + edgePadding; const maxX = (section + 1) * sectionWidth - minPlatformWidth - edgePadding; const x = minX + Math.random() * (maxX - minX); const y = this.height - (i * (maxHeight / platformCount)) - 150; // 40% of platforms should be alternating (red/green) const isAlternating = Math.random() < 0.4; // Adjust platform width based on screen size (wider platforms for wider screens) const platformWidth = minPlatformWidth + (this.width > 600 ? 10 : 0); this.platforms.push(new Platform(x, y, platformWidth, 150 + Math.random() * 50, isAlternating)); // Randomly generate power-ups (5% chance per platform) if (Math.random() < 0.05) { this.powerUps.push(new PowerUp(x + platformWidth / 2 - 10, y - 30)); } // Randomly generate coins (15% chance per platform) if (Math.random() < 0.15) { this.coins.push(new Coin(x + platformWidth / 2 - 15, y - 30)); } } } update() { if (this.gameOver) return; // Handle countdown if (this.isCountingDown) { this.countdownTimer += 1/60; // Assuming 60 FPS // Change countdown number every second if (this.countdownTimer >= 1) { this.countdownValue--; this.countdownTimer = 0; // When countdown reaches 0, start the game if (this.countdownValue < 0) { this.isCountingDown = false; // Try to automatically play music if it wasn't started yet if (this.music.paused) { this.music.play().catch(error => { console.log("Audio autoplay was prevented. User interaction still required for audio."); }); } } } // If still counting down, skip the rest of update if (this.isCountingDown) { return; } } // Update timer only if it has started const now = Date.now(); const deltaTime = (now - this.lastTime) / 1000; // convert to seconds this.lastTime = now; if (this.timerStarted) { this.timeRemaining -= deltaTime; this.ui.updateTimer(Math.ceil(this.timeRemaining)); } else { // Keep displaying full time until timer starts this.ui.updateTimer(this.gameTime); } // Check if time is up if (this.timeRemaining <= 0) { this.gameOver = true; this.music.pause(); // Stop music when game over this.ui.showGameOver(this.score); return; } // Update controls and player this.controls.update(); this.player.update(); // Update power-ups for (const powerUp of this.powerUps) { powerUp.update(); // Check for collision with player if (powerUp.checkCollision(this.player)) { // Apply super jump effect this.player.activateSuperJump(); } } // Update coins and check for collision with player for (const coin of this.coins) { coin.update(); // Check for collision with player if (coin.checkCollision(this.player)) { // Add coin value to score this.coinScore += coin.value; this.score += coin.value; this.ui.updateScore(this.score); // Apply small screen shake effect for feedback this.startScreenShake(3, 0.2); // Play coin collect sound effect // In a future update, we could add actual sound effects } } // Check collisions with platforms let onPlatform = false; for (const platform of this.platforms) { // Skip collision check if platform is alternating and not solid if (platform.isAlternating && !platform.isSolid) { continue; } if (this.player.checkPlatformCollision(platform)) { onPlatform = true; // Check if player was falling for long enough to trigger screen shake if (this.player.isFalling && this.player.fallingTime > 0.5) { // Calculate shake intensity based on falling time (capped at 1.5 seconds) const cappedFallingTime = Math.min(this.player.fallingTime, 1.5); const shakeIntensity = Math.max(5, cappedFallingTime * 15); // Scale intensity with fall time // Trigger screen shake this.startScreenShake(shakeIntensity, 0.5); // intensity, duration in seconds } } } // Apply gravity if not on a platform if (!onPlatform) { this.player.applyGravity(); // Check if player has been falling for too long (2 seconds) if (this.player.isFalling && this.player.fallingTime > 2) { this.gameOver = true; this.ui.showGameOver(this.score); return; } } // No red bar code here anymore // Update camera to follow player this.camera.follow(this.player); // Removed obstacles update code // Generate new platforms as player climbs if (this.camera.y < this.platforms[this.platforms.length - 1].y) { const minPlatformWidth = 30; const minHorizontalSpacing = 80; // Use the same calculation for sections as in initial generation const sections = Math.max(3, Math.floor(this.width / minHorizontalSpacing)); const sectionWidth = this.width / sections; // Keep track of which sections we've already used for this batch const usedSections = new Set(); // Determine a common vertical distance for this batch of platforms // This ensures even vertical distribution and prevents overlap const lastPlatformY = this.platforms[this.platforms.length - 1].y; const baseHeight = 150; // Minimum vertical distance const variableHeight = 100; // Random addition const batchHeight = baseHeight + Math.random() * variableHeight; for (let i = 0; i < 96; i++) { // Increased by 60% from 60 // Find an unused section let section; do { section = Math.floor(Math.random() * sections); } while (usedSections.has(section) && usedSections.size < sections); usedSections.add(section); // Calculate x position within that section // Use the same padding calculation for consistent generation const edgePadding = Math.min(30, this.width * 0.05); const minX = section * sectionWidth + edgePadding; const maxX = (section + 1) * sectionWidth - minPlatformWidth - edgePadding; const x = minX + Math.random() * (maxX - minX); // Set y position with slight variation but ensure no overlap // Each platform is placed at a different height within the batch const verticalVariation = Math.random() * 40 - 20; // +/- 20px variation const y = lastPlatformY - batchHeight - (i * 15) + verticalVariation; // 40% of platforms should be alternating (red/green) const isAlternating = Math.random() < 0.4; // Use the same platform width calculation for consistency const platformWidth = minPlatformWidth + (this.width > 600 ? 10 : 0); this.platforms.push(new Platform(x, y, platformWidth, 150 + Math.random() * 50, isAlternating)); // Randomly generate power-ups (5% chance per platform) if (Math.random() < 0.05) { this.powerUps.push(new PowerUp(x + platformWidth / 2 - 10, y - 30)); } // Randomly generate coins (15% chance per platform) if (Math.random() < 0.15) { this.coins.push(new Coin(x + platformWidth / 2 - 15, y - 30)); } } } // Keep all platforms, regardless of position // This ensures platforms remain even when player has moved far above them // Remove power-ups that are off-screen or collected this.powerUps = this.powerUps.filter(p => p.y < this.camera.y + this.height + 100 && !p.collected); // Remove coins that are off-screen or collected this.coins = this.coins.filter(c => c.y < this.camera.y + this.height + 100 && !c.collected); // Removed obstacles generation and filtering code // Update score based on height const currentHeight = -this.player.y; if (currentHeight > this.maxHeight) { this.maxHeight = currentHeight; const heightScore = Math.floor(this.maxHeight / 10); this.score = heightScore + this.coinScore; this.ui.updateScore(this.score); } // Check if player has fallen off-screen if (this.player.y > this.camera.y + this.height + 100) { this.gameOver = true; this.music.pause(); // Stop music when game over this.ui.showGameOver(this.score); } } render() { // Clear canvas this.ctx.fillStyle = '#0A0A1A'; this.ctx.fillRect(0, 0, this.width, this.height); // Apply fade-in effect if (this.fadeOpacity < 1) { this.fadeOpacity += 0.03; // Gradually increase opacity if (this.fadeOpacity > 1) this.fadeOpacity = 1; } this.ctx.globalAlpha = this.fadeOpacity; // Render countdown if active if (this.isCountingDown) { this.ctx.save(); // Set up text properties this.ctx.fillStyle = '#FF00FF'; // Magenta this.ctx.font = 'bold 120px Arial'; this.ctx.textAlign = 'center'; this.ctx.textBaseline = 'middle'; // Calculate scale effect based on timer const scale = 1 + (1 - this.countdownTimer) * 0.5; // Draw the countdown number this.ctx.save(); this.ctx.translate(this.width / 2, this.height / 2); this.ctx.scale(scale, scale); this.ctx.fillText(this.countdownValue.toString(), 0, 0); this.ctx.restore(); // Add "GET READY" text centered above the countdown this.ctx.font = 'bold 40px Arial'; this.ctx.fillText('GET READY!', this.width / 2, this.height / 2 - 150); this.ctx.restore(); return; // Skip rendering game elements during countdown } // Apply camera transform with screen shake if active this.ctx.save(); this.updateScreenShake(); this.ctx.translate(-this.camera.x + this.screenShake.offsetX, -this.camera.y + this.screenShake.offsetY); // Update and render platforms const currentTime = Date.now(); for (const platform of this.platforms) { platform.update(currentTime); platform.render(this.ctx); } // Render power-ups for (const powerUp of this.powerUps) { powerUp.render(this.ctx); } // Render coins for (const coin of this.coins) { coin.render(this.ctx); } // Removed obstacles rendering code // Render player this.player.render(this.ctx); this.ctx.restore(); // Reset global alpha this.ctx.globalAlpha = 1; // Render screen flash if active this.updateFlashEffect(); if (this.flash.active && this.flash.opacity > 0) { this.ctx.fillStyle = this.flash.color; this.ctx.globalAlpha = this.flash.opacity; this.ctx.fillRect(0, 0, this.width, this.height); this.ctx.globalAlpha = 1; } } // Start screen flash effect startFlashEffect() { this.flash.active = true; this.flash.opacity = 0.7; // Start at 70% opacity this.flash.startTime = performance.now(); } // Update screen flash effect updateFlashEffect() { if (!this.flash.active) return; // Calculate how much time has passed const elapsed = (performance.now() - this.flash.startTime) / 1000; // Convert to seconds if (elapsed > this.flash.duration) { // Flash effect is over this.flash.active = false; return; } // Calculate fade-out factor (start at 1, end at 0) const fadeOut = 1 - (elapsed / this.flash.duration); // Update opacity this.flash.opacity = 0.7 * fadeOut; } gameLoop() { this.update(); this.render(); requestAnimationFrame(() => this.gameLoop()); } start() { // Start playing music when game starts this.music.play().catch(error => { console.log("Audio autoplay was prevented. User interaction is required to play audio."); }); this.gameLoop(); } // Start screen shake effect startScreenShake(intensity, duration) { this.screenShake.active = true; this.screenShake.intensity = intensity; this.screenShake.duration = duration; this.screenShake.startTime = performance.now(); } // Update screen shake effect updateScreenShake() { if (!this.screenShake.active) { this.screenShake.offsetX = 0; this.screenShake.offsetY = 0; return; } // Calculate how much time has passed const elapsed = (performance.now() - this.screenShake.startTime) / 1000; // Convert to seconds if (elapsed > this.screenShake.duration) { // Shake effect is over this.screenShake.active = false; this.screenShake.offsetX = 0; this.screenShake.offsetY = 0; return; } // Calculate fade-out factor (start at 1, end at 0) const fadeOut = 1 - (elapsed / this.screenShake.duration); // Generate random offset based on intensity and fade-out const currentIntensity = this.screenShake.intensity * fadeOut; this.screenShake.offsetX = (Math.random() * 2 - 1) * currentIntensity; this.screenShake.offsetY = (Math.random() * 2 - 1) * currentIntensity; } }