Okay, let's add 10 levels to the game. We'll define the level data in the JavaScript file and add logic to load and transition between levels. World's Hardest Game

World's Hardest Game

Level: 1

Deaths: 0

Use Arrow Keys to Move

body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: sans-serif; } h1 { margin-bottom: 10px; color: #333; } .game-container { position: relative; border: 2px solid #333; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } canvas { display: block; } .info-bar { display: flex; justify-content: space-between; padding: 5px 10px; background-color: #eee; border-top: 1px solid #ccc; font-size: 1.1em; font-weight: bold; } #level-display { color: #337ab7; /* Blue for level */ } #death-counter { color: #d9534f; /* Red for deaths */ } .controls { text-align: center; padding: 5px 0; font-size: 0.9em; color: #555; border-top: 1px solid #ccc; } // levels.js - Defines the game levels const obstacleSpeedBase = 2; const canvasWidth = 600; // Need canvas dimensions here too const canvasHeight = 400; const levels = [ // Level 1: Simple vertical { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 150, y: 0, width: 20, height: 80, vx: 0, vy: obstacleSpeedBase }, { x: 250, y: canvasHeight - 100, width: 20, height: 100, vx: 0, vy: -obstacleSpeedBase }, { x: 350, y: 50, width: 20, height: 120, vx: 0, vy: obstacleSpeedBase * 1.2 }, { x: 450, y: canvasHeight - 150, width: 20, height: 150, vx: 0, vy: -obstacleSpeedBase * 0.8 }, ] }, // Level 2: Add horizontal { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 120, y: 50, width: 20, height: 100, vx: 0, vy: obstacleSpeedBase * 1.5 }, { x: 200, y: 150, width: 100, height: 20, vx: obstacleSpeedBase, vy: 0 }, { x: 350, y: canvasHeight - 70, width: 20, height: 70, vx: 0, vy: -obstacleSpeedBase }, { x: 450, y: 250, width: 80, height: 20, vx: -obstacleSpeedBase * 1.2, vy: 0 }, ] }, // Level 3: Narrow passage { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 120, y: 0, width: 20, height: 150, vx: 0, vy: obstacleSpeedBase }, { x: 120, y: 250, width: 20, height: 150, vx: 0, vy: -obstacleSpeedBase }, // Gap between y=150 and y=250 { x: 250, y: 0, width: 20, height: 180, vx: 0, vy: -obstacleSpeedBase * 0.9 }, { x: 250, y: 220, width: 20, height: 180, vx: 0, vy: obstacleSpeedBase * 0.9 }, // Gap between y=180 and y=220 { x: 400, y: 0, width: 100, height: 20, vx: obstacleSpeedBase * 1.1, vy: 0 }, { x: 400, y: canvasHeight - 20, width: 100, height: 20, vx: -obstacleSpeedBase * 1.1, vy: 0 }, ] }, // Level 4: Faster obstacles { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 150, y: 0, width: 15, height: 60, vx: 0, vy: obstacleSpeedBase * 2.5 }, { x: 220, y: canvasHeight - 80, width: 15, height: 80, vx: 0, vy: -obstacleSpeedBase * 2.5 }, { x: 300, y: 100, width: 100, height: 15, vx: obstacleSpeedBase * 2.2, vy: 0 }, { x: 400, y: canvasHeight - 150, width: 15, height: 150, vx: 0, vy: obstacleSpeedBase * 2 }, { x: 480, y: 50, width: 80, height: 15, vx: -obstacleSpeedBase * 2.8, vy: 0 }, ] }, // Level 5: Central block { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ // Vertical movers guarding sides { x: 120, y: 0, width: 20, height: canvasHeight, vx: 0, vy: obstacleSpeedBase * 1.3 }, { x: canvasWidth - 120 - 20, y: canvasHeight, width: 20, height: canvasHeight, vx: 0, vy: -obstacleSpeedBase * 1.3 }, // Horizontal movers in the middle { x: 160, y: 50, width: canvasWidth - 320, height: 20, vx: obstacleSpeedBase * 1.5, vy: 0 }, { x: 160, y: canvasHeight - 70, width: canvasWidth - 320, height: 20, vx: -obstacleSpeedBase * 1.5, vy: 0 }, ] }, // Level 6: Diagonal-like movement (using combined vx/vy - approximation) { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 150, y: 50, width: 25, height: 25, vx: obstacleSpeedBase * 0.7, vy: obstacleSpeedBase * 0.7 }, { x: 400, y: 300, width: 25, height: 25, vx: -obstacleSpeedBase * 0.7, vy: -obstacleSpeedBase * 0.7 }, { x: 150, y: 300, width: 25, height: 25, vx: obstacleSpeedBase * 0.7, vy: -obstacleSpeedBase * 0.7 }, { x: 400, y: 50, width: 25, height: 25, vx: -obstacleSpeedBase * 0.7, vy: obstacleSpeedBase * 0.7 }, // Central spinner (horizontal) { x: canvasWidth/2 - 50, y: canvasHeight/2 - 10, width: 100, height: 20, vx: obstacleSpeedBase * 2, vy: 0 }, ] }, // Level 7: Squeeze through { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 150, y: 0, width: 50, height: 180, vx: 0, vy: obstacleSpeedBase * 1.1 }, { x: 150, y: canvasHeight - 180, width: 50, height: 180, vx: 0, vy: -obstacleSpeedBase * 1.1 }, // Gap 180 to 220 { x: 300, y: 0, width: 50, height: 160, vx: 0, vy: -obstacleSpeedBase * 1.2 }, { x: 300, y: canvasHeight - 160, width: 50, height: 160, vx: 0, vy: obstacleSpeedBase * 1.2 }, // Gap 160 to 240 { x: 450, y: 0, width: 50, height: 190, vx: 0, vy: obstacleSpeedBase * 1.0 }, { x: 450, y: canvasHeight - 190, width: 50, height: 190, vx: 0, vy: -obstacleSpeedBase * 1.0 }, // Gap 190 to 210 ] }, // Level 8: Horizontal Gauntlet { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 120, y: 50, width: 100, height: 20, vx: obstacleSpeedBase * 2.5, vy: 0 }, { x: 120, y: 100, width: 100, height: 20, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 120, y: 150, width: 100, height: 20, vx: obstacleSpeedBase * 2.5, vy: 0 }, { x: 120, y: 200, width: 100, height: 20, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 120, y: 250, width: 100, height: 20, vx: obstacleSpeedBase * 2.5, vy: 0 }, { x: 120, y: 300, width: 100, height: 20, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 380, y: 75, width: 100, height: 20, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 380, y: 125, width: 100, height: 20, vx: obstacleSpeedBase * 2.5, vy: 0 }, { x: 380, y: 175, width: 100, height: 20, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 380, y: 225, width: 100, height: 20, vx: obstacleSpeedBase * 2.5, vy: 0 }, { x: 380, y: 275, width: 100, height: 20, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 380, y: 325, width: 100, height: 20, vx: obstacleSpeedBase * 2.5, vy: 0 }, ] }, // Level 9: Mixed speeds and directions { startZone: { x: 0, y: 0, width: 100, height: canvasHeight }, endZone: { x: canvasWidth - 100, y: 0, width: 100, height: canvasHeight }, obstacles: [ { x: 130, y: 0, width: 20, height: 100, vx: 0, vy: obstacleSpeedBase * 1.8 }, { x: 180, y: canvasHeight - 150, width: 20, height: 150, vx: 0, vy: -obstacleSpeedBase * 2.2 }, { x: 230, y: 50, width: 150, height: 15, vx: obstacleSpeedBase * 2.5, vy: 0 }, { x: 230, y: canvasHeight - 65, width: 150, height: 15, vx: -obstacleSpeedBase * 2.5, vy: 0 }, { x: 400, y: 0, width: 20, height: 180, vx: 0, vy: -obstacleSpeedBase * 1.5 }, { x: 450, y: canvasHeight, width: 20, height: 180, vx: 0, vy: obstacleSpeedBase * 1.9 }, // Fast horizontal center { x: 100, y: canvasHeight/2 - 7, width: canvasWidth - 200, height: 14, vx: -obstacleSpeedBase * 3, vy: 0 }, ] }, // Level 10: The Finale (Fast and complex) { startZone: { x: 0, y: 0, width: 80, height: canvasHeight }, // Smaller start endZone: { x: canvasWidth - 80, y: 0, width: 80, height: canvasHeight }, // Smaller end obstacles: [ // Fast vertical guards { x: 100, y: 0, width: 15, height: canvasHeight, vx: 0, vy: obstacleSpeedBase * 3 }, { x: 130, y: canvasHeight, width: 15, height: canvasHeight, vx: 0, vy: -obstacleSpeedBase * 3 }, { x: canvasWidth - 100 - 15, y: 0, width: 15, height: canvasHeight, vx: 0, vy: -obstacleSpeedBase * 3 }, { x: canvasWidth - 130 - 15, y: canvasHeight, width: 15, height: canvasHeight, vx: 0, vy: obstacleSpeedBase * 3 }, // Fast horizontal crossers { x: 160, y: 40, width: canvasWidth - 320, height: 15, vx: obstacleSpeedBase * 3.5, vy: 0 }, { x: 160, y: canvasHeight - 55, width: canvasWidth - 320, height: 15, vx: -obstacleSpeedBase * 3.5, vy: 0 }, // Center chaos { x: canvasWidth/2 - 10, y: 100, width: 20, height: canvasHeight - 200, vx: 0, vy: obstacleSpeedBase * 2.8 }, { x: canvasWidth/2 - 50, y: canvasHeight/2 - 10, width: 100, height: 20, vx: -obstacleSpeedBase * 3.2, vy: 0 }, // Diagonal movers (approx) { x: 200, y: 100, width: 20, height: 20, vx: obstacleSpeedBase * 1.5, vy: obstacleSpeedBase * 1.5 }, { x: canvasWidth - 220, y: canvasHeight - 120, width: 20, height: 20, vx: -obstacleSpeedBase * 1.5, vy: -obstacleSpeedBase * 1.5 }, ] }, ]; const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const deathCounterElement = document.getElementById('death-counter'); const levelDisplayElement = document.getElementById('level-display'); const playerSize = 20; const playerSpeed = 3; // obstacleSpeed is now defined per-level/obstacle in levels.js const safeZoneColor = 'lightgreen'; const obstacleColor = 'blue'; const playerColor = 'red'; const goalColor = 'lightgreen'; // Same as start for consistency let player = { x: 0, // Initial position set by loadLevel y: 0, width: playerSize, height: playerSize, }; let startZone = {}; // Loaded from level data let endZone = {}; // Loaded from level data let obstacles = []; // Loaded from level data let keys = {}; let deaths = 0; let gameWon = false; let gameLost = false; let currentLevelIndex = 0; let finalLevelReached = false; // Flag for winning the last level function loadLevel(levelIndex) { if (levelIndex >= levels.length) { console.error("Attempted to load invalid level index:", levelIndex); // Handle game completion or error state finalLevelReached = true; // Mark that the last level was won return; } const levelData = levels[levelIndex]; startZone = { ...levelData.startZone }; endZone = { ...levelData.endZone }; // Deep copy obstacles to avoid modifying the original level data obstacles = levelData.obstacles.map(o => ({ ...o })); levelDisplayElement.textContent = `Level: ${levelIndex + 1}`; gameWon = false; gameLost = false; finalLevelReached = false; // Reset final level flag for the new level resetPlayer(); // Position player in the new start zone updateDeathCounter(); // Ensure counter is correct on level start } function resetPlayer() { // Center player in the current level's start zone player.x = startZone.x + startZone.width / 2 - player.width / 2; player.y = startZone.y + startZone.height / 2 - player.height / 2; gameLost = false; // Reset lost state } function updateDeathCounter() { deathCounterElement.textContent = `Deaths: ${deaths}`; } function drawRect(x, y, width, height, color) { ctx.fillStyle = color; ctx.fillRect(x, y, width, height); } function drawPlayer() { drawRect(player.x, player.y, player.width, player.height, playerColor); } function drawZones() { drawRect(startZone.x, startZone.y, startZone.width, startZone.height, safeZoneColor); drawRect(endZone.x, endZone.y, endZone.width, endZone.height, goalColor); } function drawObstacles() { obstacles.forEach(obstacle => { drawRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height, obstacleColor); }); } function updateObstacles() { obstacles.forEach(obstacle => { // Update position based on velocity obstacle.x += obstacle.vx || 0; // Use vx if defined, else 0 obstacle.y += obstacle.vy || 0; // Use vy if defined, else 0 // Bounce off vertical walls if moving horizontally if (obstacle.vx) { // Check collision with level boundaries, not just start/end zones // Use canvas.width, but respect potential level-specific boundaries if needed later if (obstacle.x < 0 || obstacle.x + obstacle.width > canvas.width) { obstacle.vx *= -1; // Clamp position to prevent sticking if (obstacle.x < 0) obstacle.x = 0; if (obstacle.x + obstacle.width > canvas.width) obstacle.x = canvas.width - obstacle.width; } } // Bounce off horizontal walls if moving vertically if (obstacle.vy) { // Use canvas.height if (obstacle.y < 0 || obstacle.y + obstacle.height > canvas.height) { obstacle.vy *= -1; // Clamp position if (obstacle.y < 0) obstacle.y = 0; if (obstacle.y + obstacle.height > canvas.height) obstacle.y = canvas.height - obstacle.height; } } }); } function checkCollision(rect1, rect2) { // Ensure rects have dimensions before checking if (!rect1 || !rect2 || !rect1.width || !rect1.height || !rect2.width || !rect2.height) { // console.warn("Collision check with invalid rect:", rect1, rect2); return false; } return ( rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y ); } function updatePlayerPosition() { if (gameWon || gameLost || finalLevelReached) return; // Don't move if level/game won or lost let dx = 0; let dy = 0; if (keys['ArrowUp']) dy -= playerSpeed; if (keys['ArrowDown']) dy += playerSpeed; if (keys['ArrowLeft']) dx -= playerSpeed; if (keys['ArrowRight']) dx += playerSpeed; // Predict next position let nextX = player.x + dx; let nextY = player.y + dy; // Canvas boundary collision if (nextX < 0) nextX = 0; if (nextX + player.width > canvas.width) nextX = canvas.width - player.width; if (nextY < 0) nextY = 0; if (nextY + player.height > canvas.height) nextY = canvas.height - player.height; player.x = nextX; player.y = nextY; } function checkGameStatus() { if (gameWon || gameLost || finalLevelReached) return; // Check obstacle collision for (const obstacle of obstacles) { if (checkCollision(player, obstacle)) { deaths++; updateDeathCounter(); gameLost = true; // Set lost state // Short delay before resetting to show collision setTimeout(resetPlayer, 100); // Reset player to start of current level return; // Exit early after a collision } } // Check win condition (collision with end zone AND not in start zone) if (checkCollision(player, endZone) && !checkCollision(player, startZone)) { gameWon = true; // Mark level as won currentLevelIndex++; // Check if that was the last level if (currentLevelIndex >= levels.length) { finalLevelReached = true; // Set flag for overall win // Don't load next level, gameLoop will handle display } else { // Load the next level after a short delay setTimeout(() => loadLevel(currentLevelIndex), 200); } } } function displayWinMessage() { ctx.fillStyle = 'rgba(0, 128, 0, 0.7)'; // Semi-transparent green ctx.fillRect(0, 0, canvas.width, canvas.height); // Overlay ctx.fillStyle = 'white'; ctx.font = '40px Arial'; ctx.textAlign = 'center'; ctx.fillText('YOU WIN!', canvas.width / 2, canvas.height / 2 - 20); ctx.font = '20px Arial'; ctx.fillText(`Total Deaths: ${deaths}`, canvas.width / 2, canvas.height / 2 + 20); ctx.font = '16px Arial'; ctx.fillText('(Refresh to play again)', canvas.width / 2, canvas.height / 2 + 50); } function gameLoop() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); if (finalLevelReached) { // Draw final state (zones, maybe player/obstacles frozen) drawZones(); drawObstacles(); // Draw obstacles in their final position drawPlayer(); // Draw player in the end zone // Display overall win message displayWinMessage(); } else { // Normal game drawing drawZones(); drawObstacles(); drawPlayer(); // Update game state only if not won/lost this frame if (!gameWon && !gameLost) { updatePlayerPosition(); updateObstacles(); checkGameStatus(); } } requestAnimationFrame(gameLoop); } // Event Listeners window.addEventListener('keydown', (e) => { // Prevent arrow keys from scrolling the page if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) { e.preventDefault(); } keys[e.key] = true; }); window.addEventListener('keyup', (e) => { keys[e.key] = false; }); // Initial setup loadLevel(currentLevelIndex); // Load the first level gameLoop(); // Start the game Now the game has 10 levels defined in `levels.js`. When you reach the end zone of a level, it will automatically load the next one. If you collide with an obstacle, you restart the current level, and the death counter increases. After completing level 10, a "YOU WIN!" message appears.