Spaces:
Running
Running
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| background: #1a1a1a; | |
| font-family: Arial; | |
| } | |
| #hud { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| color: white; | |
| } | |
| #healthBar { | |
| width: 200px; | |
| height: 20px; | |
| background: #333; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| #health { | |
| width: 100%; | |
| height: 100%; | |
| background: #2ecc71; | |
| transition: width 0.2s; | |
| } | |
| #controls { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| color: white; | |
| background: rgba(0,0,0,0.7); | |
| padding: 15px; | |
| border-radius: 5px; | |
| } | |
| #round { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: white; | |
| font-size: 24px; | |
| } | |
| #gameOver { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: rgba(0,0,0,0.8); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| text-align: center; | |
| display: none; | |
| } | |
| #restart { | |
| background: #2ecc71; | |
| border: none; | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="game"></canvas> | |
| <div id="hud"> | |
| <div id="healthBar"> | |
| <div id="health"></div> | |
| </div> | |
| </div> | |
| <div id="round">Round 1</div> | |
| <div id="controls"> | |
| WASD - Move<br> | |
| Mouse - Aim<br> | |
| Space - Shoot | |
| </div> | |
| <div id="gameOver"> | |
| Game Over!<br> | |
| <button id="restart" onclick="restartGame()">Restart Game</button> | |
| </div> | |
| <script> | |
| const canvas = document.getElementById('game'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| const PLAYER_SIZE = 30; | |
| const BULLET_SPEED = 10; | |
| const ENEMY_SPEED = 2; | |
| const SHOOTING_INTERVAL = 333; | |
| let game = { | |
| player: { | |
| x: canvas.width/2, | |
| y: canvas.height/2, | |
| speed: 5, | |
| health: 1000, | |
| maxHealth: 1000, | |
| bullets: [], | |
| bulletsPerShot: 1 | |
| }, | |
| enemies: [], | |
| items: [], | |
| round: 1, | |
| keys: {}, | |
| mouse: {x: 0, y: 0}, | |
| lastShot: 0, | |
| shooting: false | |
| }; | |
| function spawnEnemies() { | |
| const enemyCount = game.round * 5; | |
| for(let i = 0; i < enemyCount; i++) { | |
| game.enemies.push({ | |
| x: Math.random() * canvas.width, | |
| y: Math.random() * canvas.height, | |
| health: 1000, | |
| maxHealth: 1000, | |
| bullets: [], | |
| lastShot: 0, | |
| direction: { | |
| x: Math.random() * 2 - 1, | |
| y: Math.random() * 2 - 1 | |
| } | |
| }); | |
| } | |
| } | |
| function drawCircle(x, y, radius, color) { | |
| ctx.fillStyle = color; | |
| ctx.beginPath(); | |
| ctx.arc(x, y, radius, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| function update() { | |
| // Player movement | |
| if(game.keys['w'] && game.player.y > PLAYER_SIZE) | |
| game.player.y -= game.player.speed; | |
| if(game.keys['s'] && game.player.y < canvas.height - PLAYER_SIZE) | |
| game.player.y += game.player.speed; | |
| if(game.keys['a'] && game.player.x > PLAYER_SIZE) | |
| game.player.x -= game.player.speed; | |
| if(game.keys['d'] && game.player.x < canvas.width - PLAYER_SIZE) | |
| game.player.x += game.player.speed; | |
| // Player shooting | |
| if(game.shooting && Date.now() - game.lastShot > SHOOTING_INTERVAL) { | |
| const angle = Math.atan2( | |
| game.mouse.y - game.player.y, | |
| game.mouse.x - game.player.x | |
| ); | |
| for(let i = 0; i < game.player.bulletsPerShot; i++) { | |
| game.player.bullets.push({ | |
| x: game.player.x, | |
| y: game.player.y, | |
| angle: angle + (Math.random() - 0.5) * 0.2 | |
| }); | |
| } | |
| game.lastShot = Date.now(); | |
| } | |
| // Update bullets and check collisions | |
| for(let i = game.player.bullets.length - 1; i >= 0; i--) { | |
| const bullet = game.player.bullets[i]; | |
| bullet.x += Math.cos(bullet.angle) * BULLET_SPEED; | |
| bullet.y += Math.sin(bullet.angle) * BULLET_SPEED; | |
| if(bullet.x < 0 || bullet.x > canvas.width || | |
| bullet.y < 0 || bullet.y > canvas.height) { | |
| game.player.bullets.splice(i, 1); | |
| } | |
| for(let j = game.enemies.length - 1; j >= 0; j--) { | |
| const enemy = game.enemies[j]; | |
| const dx = bullet.x - enemy.x; | |
| const dy = bullet.y - enemy.y; | |
| if(Math.sqrt(dx*dx + dy*dy) < PLAYER_SIZE/2) { | |
| enemy.health -= 100; | |
| game.player.bullets.splice(i, 1); | |
| if(enemy.health <= 0) { | |
| game.enemies.splice(j, 1); | |
| game.player.bulletsPerShot++; | |
| game.items.push({ | |
| x: enemy.x, | |
| y: enemy.y, | |
| type: 'health' | |
| }); | |
| } | |
| break; | |
| } | |
| } | |
| } | |
| // Update enemies | |
| game.enemies.forEach(enemy => { | |
| enemy.x += enemy.direction.x * ENEMY_SPEED; | |
| enemy.y += enemy.direction.y * ENEMY_SPEED; | |
| if(enemy.x < 0 || enemy.x > canvas.width) enemy.direction.x *= -1; | |
| if(enemy.y < 0 || enemy.y > canvas.height) enemy.direction.y *= -1; | |
| if(Date.now() - enemy.lastShot > 1000) { | |
| const angle = Math.atan2( | |
| game.player.y - enemy.y, | |
| game.player.x - enemy.x | |
| ); | |
| enemy.bullets.push({ | |
| x: enemy.x, | |
| y: enemy.y, | |
| angle: angle | |
| }); | |
| enemy.lastShot = Date.now(); | |
| } | |
| for(let i = enemy.bullets.length - 1; i >= 0; i--) { | |
| const bullet = enemy.bullets[i]; | |
| bullet.x += Math.cos(bullet.angle) * BULLET_SPEED/2; | |
| bullet.y += Math.sin(bullet.angle) * BULLET_SPEED/2; | |
| const dx = bullet.x - game.player.x; | |
| const dy = bullet.y - game.player.y; | |
| if(Math.sqrt(dx*dx + dy*dy) < PLAYER_SIZE/2) { | |
| game.player.health -= 50; | |
| enemy.bullets.splice(i, 1); | |
| document.getElementById('health').style.width = | |
| (game.player.health/game.player.maxHealth * 100) + '%'; | |
| if(game.player.health <= 0) { | |
| document.getElementById('gameOver').style.display = 'block'; | |
| } | |
| } | |
| if(bullet.x < 0 || bullet.x > canvas.width || | |
| bullet.y < 0 || bullet.y > canvas.height) { | |
| enemy.bullets.splice(i, 1); | |
| } | |
| } | |
| }); | |
| // Update items | |
| for(let i = game.items.length - 1; i >= 0; i--) { | |
| const item = game.items[i]; | |
| const dx = item.x - game.player.x; | |
| const dy = item.y - game.player.y; | |
| if(Math.sqrt(dx*dx + dy*dy) < PLAYER_SIZE) { | |
| game.player.health = Math.min( | |
| game.player.maxHealth, | |
| game.player.health + 200 | |
| ); | |
| document.getElementById('health').style.width = | |
| (game.player.health/game.player.maxHealth * 100) + '%'; | |
| game.items.splice(i, 1); | |
| } | |
| } | |
| // Check round completion | |
| if(game.enemies.length === 0) { | |
| if(game.round < 10) { | |
| game.round++; | |
| document.getElementById('round').textContent = `Round ${game.round}`; | |
| game.player.health = game.player.maxHealth; | |
| document.getElementById('health').style.width = '100%'; | |
| game.player.bulletsPerShot = 1; | |
| spawnEnemies(); | |
| } | |
| } | |
| } | |
| function draw() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw player (blue circle) | |
| drawCircle(game.player.x, game.player.y, PLAYER_SIZE/2, '#3498db'); | |
| // Draw player bullets | |
| ctx.fillStyle = 'yellow'; | |
| game.player.bullets.forEach(bullet => { | |
| drawCircle(bullet.x, bullet.y, 3, 'yellow'); | |
| }); | |
| // Draw enemies | |
| game.enemies.forEach(enemy => { | |
| // Enemy (red circle) | |
| drawCircle(enemy.x, enemy.y, PLAYER_SIZE/2, '#e74c3c'); | |
| // Health bar | |
| ctx.fillStyle = '#600'; | |
| ctx.fillRect(enemy.x - 25, enemy.y - 30, 50, 5); | |
| ctx.fillStyle = '#f00'; | |
| ctx.fillRect(enemy.x - 25, enemy.y - 30, | |
| (enemy.health/enemy.maxHealth) * 50, 5); | |
| // Enemy bullets | |
| enemy.bullets.forEach(bullet => { | |
| drawCircle(bullet.x, bullet.y, 3, 'red'); | |
| }); | |
| }); | |
| // Draw items (green circles) | |
| game.items.forEach(item => { | |
| drawCircle(item.x, item.y, PLAYER_SIZE/3, '#2ecc71'); | |
| }); | |
| } | |
| function gameLoop() { | |
| if(game.player.health > 0) { | |
| update(); | |
| draw(); | |
| } | |
| requestAnimationFrame(gameLoop); | |
| } | |
| function restartGame() { | |
| game = { | |
| player: { | |
| x: canvas.width/2, | |
| y: canvas.height/2, | |
| speed: 5, | |
| health: 1000, | |
| maxHealth: 1000, | |
| bullets: [], | |
| bulletsPerShot: 1 | |
| }, | |
| enemies: [], | |
| items: [], | |
| round: 1, | |
| keys: game.keys, | |
| mouse: game.mouse, | |
| lastShot: 0, | |
| shooting: false | |
| }; | |
| document.getElementById('health').style.width = '100%'; | |
| document.getElementById('round').textContent = 'Round 1'; | |
| document.getElementById('gameOver').style.display = 'none'; | |
| spawnEnemies(); | |
| } | |
| // Event listeners | |
| window.addEventListener('keydown', e => game.keys[e.key] = true); | |
| window.addEventListener('keyup', e => game.keys[e.key] = false); | |
| window.addEventListener('mousemove', e => { | |
| game.mouse.x = e.clientX; | |
| game.mouse.y = e.clientY; | |
| }); | |
| window.addEventListener('keydown', e => { | |
| if(e.code === 'Space') game.shooting = true; | |
| }); | |
| window.addEventListener('keyup', e => { | |
| if(e.code === 'Space') game.shooting = false; | |
| }); | |
| // Start game | |
| spawnEnemies(); | |
| gameLoop(); | |
| </script> | |
| </body> | |
| </html> |