Dangerous Dave platformer · mistral-medium-3.1

Successfully wrote 12710 bytes to index.html

Successfully replaced 1 block(s) in index.html.

Could not find the exact text in index.html. The old text must match exactly including all whitespace and newlines.

Successfully replaced 1 block(s) in index.html.

Could not find the exact text in index.html. The old text must match exactly including all whitespace and newlines.

Could not find the exact text in index.html. The old text must match exactly including all whitespace and newlines.

Offset 4000 is beyond end of file (344 lines total)

Offset 3500 is beyond end of file (344 lines total)

Offset 3000 is beyond end of file (344 lines total)

Offset 2500 is beyond end of file (344 lines total)

Offset 2000 is beyond end of file (344 lines total)

Offset 1500 is beyond end of file (344 lines total)

Offset 1000 is beyond end of file (344 lines total)

Offset 500 is beyond end of file (344 lines total)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dangerous Dave Style Platformer</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #222; font-family: Arial, sans-serif; overflow: hidden; } #game-container { position: relative; } #game-canvas { background-color: #000; display: block; } #ui { position: absolute; top: 10px; left: 10px; color: white; font-size: 16px; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; } #win-screen, #lose-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; text-align: center; display: none; } button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 10px 2px; cursor: pointer; border-radius: 5px; } </style> </head> <body> <div id="game-container"> <canvas id="game-canvas" width="800" height="480"></canvas> <div id="ui"> <div>Lives: <span id="lives">3</span></div> <div>Trophy: <span id="has-trophy">No</span></div> </div> <div id="win-screen"> <h2>You Win!</h2> <p>You collected the trophy and reached the exit!</p> <button id="restart-button">Play Again</button> </div> <div id="lose-screen"> <h2>Game Over</h2> <p>You lost all your lives!</p> <button id="restart-button-lose">Play Again</button> </div> </div> <script> // Game constants const TILE_SIZE = 32; const GRAVITY = 0.5; const JUMP_FORCE = -10; const PLAYER_SPEED = 3; const ENEMY_SPEED = 1; // Game state const gameState = { player: { x: 64, y: 64, width: 24, height: 32, velocityX: 0, velocityY: 0, isGrounded: false, hasTrophy: false, direction: 1 // 1 for right, -1 for left }, enemies: [], lives: 3, gameOver: false, gameWon: false, trophyCollected: false, level: [ // 0: empty, 1: ground, 2: water, 3: fire, 4: exit, 5: trophy [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ], hazards: [ { type: 'water', x: 3, y: 10, width: 4, height: 1 }, { type: 'water', x: 10, y: 10, width: 4, height: 1 }, { type: 'fire', x: 15, y: 8, width: 2, height: 1 }, { type: 'fire', x: 18, y: 8, width: 2, height: 1 } ], trophy: { x: 20, y: 5, collected: false }, exit: { x: 23, y: 2, width: 1, height: 1 } }; // Initialize enemies function initEnemies() { gameState.enemies = [ { x: 100, y: 400, width: 24, height: 24, velocityX: ENEMY_SPEED, direction: 1 }, { x: 300, y: 400, width: 24, height: 24, velocityX: ENEMY_SPEED, direction: 1 }, { x: 500, y: 300, width: 24, height: 24, velocityX: ENEMY_SPEED, direction: 1 } ]; } // Reset player position after hazard collision function resetPlayerPosition() { gameState.player.x = 64; gameState.player.y = 64; gameState.player.velocityX = 0; gameState.player.velocityY = 0; } // Initialize game function initGame() { gameState.player.x = 64; gameState.player.y = 64; gameState.player.velocityX = 0; gameState.player.velocityY = 0; gameState.player.isGrounded = false; gameState.player.hasTrophy = false; gameState.player.direction = 1; gameState.lives = 3; gameState.gameOver = false; gameState.gameWon = false; gameState.trophyCollected = false; gameState.trophy.collected = false; initEnemies(); document.getElementById('lives').textContent = gameState.lives; document.getElementById('has-trophy').textContent = 'No'; document.getElementById('win-screen').style.display = 'none'; document.getElementById('lose-screen').style.display = 'none'; } // Get canvas and context const canvas = document.getElementById('game-canvas'); const ctx = canvas.getContext('2d'); // Keyboard state const keys = { left: false, right: false, up: false }; // Event listeners for keyboard document.addEventListener('keydown', (e) => { switch (e.key) { case 'ArrowLeft': keys.left = true; break; case 'ArrowRight': keys.right = true; break; case 'ArrowUp': keys.up = true; break; } }); document.addEventListener('keyup', (e) => { switch (e.key) { case 'ArrowLeft': keys.left = false; break; case 'ArrowRight': keys.right = false; break; case 'ArrowUp': keys.up = false; break; } }); // Event listeners for buttons document.getElementById('restart-button').addEventListener('click', initGame); document.getElementById('restart-button-lose').addEventListener('click', initGame); // Check collision with level function checkCollision(x, y, width, height) { const tileX1 = Math.floor(x / TILE_SIZE); const tileX2 = Math.floor((x + width - 1) / TILE_SIZE); const tileY1 = Math.floor(y / TILE_SIZE); const tileY2 = Math.floor((y + height - 1) / TILE_SIZE); for (let ty = tileY1; ty <= tileY2; ty++) { for (let tx = tileX1; tx <= tileX2; tx++) { if (tx >= 0 && tx < gameState.level[0].length && ty >= 0 && ty < gameState.level.length) { if (gameState.level[ty][tx] === 1) { return true; } } } } return false; } // Check collision with hazards function checkHazardCollision(x, y, width, height) { for (const hazard of gameState.hazards) { const hazardX = hazard.x * TILE_SIZE; const hazardY = hazard.y * TILE_SIZE; const hazardWidth = hazard.width * TILE_SIZE; const hazardHeight = hazard.height * TILE_SIZE; if (x < hazardX + hazardWidth && x + width > hazardX && y < hazardY + hazardHeight && y + height > hazardY) { return hazard.type; } } return null; } // Check collision with trophy function checkTrophyCollision(x, y, width, height) { if (gameState.trophy.collected) return false; const trophyX = gameState.trophy.x * TILE_SIZE; const trophyY = gameState.trophy.y * TILE_SIZE; if (x < trophyX + TILE_SIZE && x + width > trophyX && y < trophyY + TILE_SIZE && y + height > trophyY) { return true; } return false; } // Check collision with exit function checkExitCollision(x, y, width, height) { const exitX = gameState.exit.x * TILE_SIZE; const exitY = gameState.exit.y * TILE_SIZE; if (x < exitX + gameState.exit.width * TILE_SIZE && x + width > exitX && y < exitY + gameState.exit.height * TILE_SIZE && y + height > exitY) { return true; } return false; } // Update player position function updatePlayer() { // Horizontal movement if (keys.left) { gameState.player.velocityX = -PLAYER_SPEED; gameState.player.direction = -1; } else if (keys.right) { gameState.player.velocityX = PLAYER_SPEED; gameState.player.direction = 1; } else { gameState.player.velocityX = 0; } // Jumping if (keys.up && gameState.player.isGrounded) { gameState.player.velocityY = JUMP_FORCE; gameState.player.isGrounded = false; } // Apply gravity gameState.player.velocityY += GRAVITY; // Save old position for collision detection const oldX = gameState.player.x; const oldY = gameState.player.y; // Update position gameState.player.x += gameState.player.velocityX; gameState.player.y += gameState.player.velocityY; // Check for collisions gameState.player.isGrounded = false; // Horizontal collision if (gameState.player.velocityX !== 0 && checkCollision(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height)) { gameState.player.x = oldX; gameState.player.velocityX = 0; } // Vertical collision if (gameState.player.velocityY > 0 && checkCollision(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height)) { // Landing on ground gameState.player.y = Math.floor(gameState.player.y / TILE_SIZE) * TILE_SIZE - gameState.player.height; gameState.player.velocityY = 0; gameState.player.isGrounded = true; } else if (gameState.player.velocityY < 0 && checkCollision(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height)) { // Hitting ceiling gameState.player.y = Math.ceil(gameState.player.y / TILE_SIZE) * TILE_SIZE; gameState.player.velocityY = 0; } // Check for hazard collisions const hazard = checkHazardCollision(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height); if (hazard) { gameState.lives--; document.getElementById('lives').textContent = gameState.lives; resetPlayerPosition(); if (gameState.lives <= 0) { gameState.gameOver = true; document.getElementById('lose-screen').style.display

Could not find the exact text in index.html. The old text must match exactly including all whitespace and newlines.

Validation failed for tool "write": - content: must have required properties content Received arguments: { "path": "index.html" }