Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Methcraft - WoW meets Meth</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| background-color: #1a1a1a; | |
| font-family: 'Arial', sans-serif; | |
| } | |
| #gameCanvas { | |
| display: block; | |
| background-color: #333; | |
| } | |
| #ui { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| #startScreen { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.7); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| } | |
| button { | |
| padding: 15px 30px; | |
| font-size: 20px; | |
| background-color: #4a2b0f; | |
| color: #f1c40f; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="gameCanvas"></canvas> | |
| <div id="ui"> | |
| <div>Health: <span id="health">100</span></div> | |
| <div>Mana: <span id="mana">100</span></div> | |
| <div>Score: <span id="score">0</span></div> | |
| </div> | |
| <div id="startScreen"> | |
| <h1>METHCRAFT</h1> | |
| <p>A twisted mix of WoW and meth addicts</p> | |
| <button id="startButton">Start Game</button> | |
| </div> | |
| <script> | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const startScreen = document.getElementById('startScreen'); | |
| const startButton = document.getElementById('startButton'); | |
| // Set canvas size | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| // Game variables | |
| let player = { | |
| x: canvas.width/2, | |
| y: canvas.height/2, | |
| size: 30, | |
| speed: 5, | |
| health: 100, | |
| mana: 100, | |
| color: '#f1c40f' | |
| }; | |
| let enemies = []; | |
| let score = 0; | |
| let gameRunning = false; | |
| // Start game | |
| startButton.addEventListener('click', () => { | |
| startScreen.style.display = 'none'; | |
| gameRunning = true; | |
| spawnEnemies(); | |
| gameLoop(); | |
| }); | |
| // Enemy spawning | |
| function spawnEnemies() { | |
| setInterval(() => { | |
| const size = Math.random() * 30 + 20; | |
| enemies.push({ | |
| x: Math.random() > 0.5 ? 0 : canvas.width, | |
| y: Math.random() * canvas.height, | |
| size: size, | |
| speed: Math.random() * 3 + 1, | |
| color: `hsl(${Math.random() * 360}, 70%, 50%)`, | |
| health: size | |
| }); | |
| }, 1000); | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| if (!gameRunning) return; | |
| // Clear canvas | |
| ctx.fillStyle = '#333'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Draw player | |
| ctx.fillStyle = player.color; | |
| ctx.beginPath(); | |
| ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Draw enemies | |
| enemies.forEach((enemy, index) => { | |
| // Move enemy toward player | |
| const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x); | |
| enemy.x += Math.cos(angle) * enemy.speed; | |
| enemy.y += Math.sin(angle) * enemy.speed; | |
| // Draw enemy | |
| ctx.fillStyle = enemy.color; | |
| ctx.beginPath(); | |
| ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Collision detection | |
| const dist = Math.hypot(player.x - enemy.x, player.y - enemy.y); | |
| if (dist < player.size + enemy.size) { | |
| player.health -= 5; | |
| enemy.health -= 10; | |
| document.getElementById('health').textContent = player.health; | |
| if (enemy.health <= 0) { | |
| enemies.splice(index, 1); | |
| score += 10; | |
| document.getElementById('score').textContent = score; | |
| } | |
| if (player.health <= 0) { | |
| gameOver(); | |
| } | |
| } | |
| }); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Game over | |
| function gameOver() { | |
| gameRunning = false; | |
| startScreen.style.display = 'flex'; | |
| startScreen.innerHTML = ` | |
| <h1>GAME OVER</h1> | |
| <p>Your score: ${score}</p> | |
| <button id="restartButton">Play Again</button> | |
| `; | |
| document.getElementById('restartButton').addEventListener('click', () => { | |
| player.health = 100; | |
| player.mana = 100; | |
| score = 0; | |
| enemies = []; | |
| document.getElementById('health').textContent = player.health; | |
| document.getElementById('mana').textContent = player.mana; | |
| document.getElementById('score').textContent = score; | |
| startScreen.style.display = 'none'; | |
| gameRunning = true; | |
| spawnEnemies(); | |
| gameLoop(); | |
| }); | |
| } | |
| // Player movement | |
| window.addEventListener('keydown', (e) => { | |
| if (!gameRunning) return; | |
| switch(e.key) { | |
| case 'w': player.y -= player.speed; break; | |
| case 's': player.y += player.speed; break; | |
| case 'a': player.x -= player.speed; break; | |
| case 'd': player.x += player.speed; break; | |
| } | |
| // Boundary check | |
| player.x = Math.max(player.size, Math.min(canvas.width - player.size, player.x)); | |
| player.y = Math.max(player.size, Math.min(canvas.height - player.size, player.y)); | |
| }); | |
| </script> | |
| </body> | |
| </html> |