Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dodge Ball Game</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #1a1a1a; | |
| font-family: Arial, sans-serif; | |
| } | |
| #gameContainer { | |
| position: relative; | |
| width: 800px; | |
| height: 600px; | |
| background: #2a2a2a; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.3); | |
| } | |
| #player { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background: #5eff5e; | |
| border-radius: 50%; | |
| transition: transform 0.1s; | |
| } | |
| .ball { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background: #ff5e5e; | |
| border-radius: 50%; | |
| } | |
| #score { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| color: white; | |
| font-size: 24px; | |
| } | |
| #startScreen { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| } | |
| button { | |
| padding: 15px 30px; | |
| font-size: 20px; | |
| background: #5eff5e; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-top: 20px; | |
| } | |
| button:hover { | |
| background: #4acc4a; | |
| } | |
| .powerUp { | |
| position: absolute; | |
| width: 25px; | |
| height: 25px; | |
| background: #5e5eff; | |
| border-radius: 50%; | |
| animation: pulse 1s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.2); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="gameContainer"> | |
| <div id="startScreen"> | |
| <h1>Dodge Ball</h1> | |
| <button onclick="startGame()">Start Game</button> | |
| </div> | |
| <div id="player"></div> | |
| <div id="score">Score: 0</div> | |
| </div> | |
| <script> | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const player = document.getElementById('player'); | |
| const scoreElement = document.getElementById('score'); | |
| const startScreen = document.getElementById('startScreen'); | |
| let score = 0; | |
| let gameLoop; | |
| let balls = []; | |
| let powerUps = []; | |
| let isGameRunning = false; | |
| let playerSpeed = 5; | |
| let keys = {}; | |
| player.style.left = '385px'; | |
| player.style.top = '285px'; | |
| function startGame() { | |
| if (isGameRunning) return; | |
| startScreen.style.display = 'none'; | |
| isGameRunning = true; | |
| score = 0; | |
| scoreElement.textContent = `Score: ${score}`; | |
| balls = []; | |
| powerUps = []; | |
| gameLoop = setInterval(() => { | |
| if (Math.random() < 0.03) createBall(); | |
| if (Math.random() < 0.01) createPowerUp(); | |
| updateGame(); | |
| }, 16); | |
| } | |
| function createBall() { | |
| const ball = document.createElement('div'); | |
| ball.className = 'ball'; | |
| const side = Math.floor(Math.random() * 4); | |
| let x, y, dx, dy; | |
| switch(side) { | |
| case 0: // top | |
| x = Math.random() * 800; | |
| y = -20; | |
| dx = (Math.random() - 0.5) * 4; | |
| dy = 2 + Math.random() * 2; | |
| break; | |
| case 1: // right | |
| x = 820; | |
| y = Math.random() * 600; | |
| dx = -(2 + Math.random() * 2); | |
| dy = (Math.random() - 0.5) * 4; | |
| break; | |
| case 2: // bottom | |
| x = Math.random() * 800; | |
| y = 620; | |
| dx = (Math.random() - 0.5) * 4; | |
| dy = -(2 + Math.random() * 2); | |
| break; | |
| case 3: // left | |
| x = -20; | |
| y = Math.random() * 600; | |
| dx = 2 + Math.random() * 2; | |
| dy = (Math.random() - 0.5) * 4; | |
| break; | |
| } | |
| balls.push({ element: ball, x, y, dx, dy }); | |
| gameContainer.appendChild(ball); | |
| } | |
| function createPowerUp() { | |
| const powerUp = document.createElement('div'); | |
| powerUp.className = 'powerUp'; | |
| const x = Math.random() * 750; | |
| const y = Math.random() * 550; | |
| powerUps.push({ element: powerUp, x, y }); | |
| powerUp.style.left = `${x}px`; | |
| powerUp.style.top = `${y}px`; | |
| gameContainer.appendChild(powerUp); | |
| } | |
| function updateGame() { | |
| const playerRect = player.getBoundingClientRect(); | |
| const containerRect = gameContainer.getBoundingClientRect(); | |
| let playerX = parseInt(player.style.left); | |
| let playerY = parseInt(player.style.top); | |
| if (keys.ArrowLeft) playerX -= playerSpeed; | |
| if (keys.ArrowRight) playerX += playerSpeed; | |
| if (keys.ArrowUp) playerY -= playerSpeed; | |
| if (keys.ArrowDown) playerY += playerSpeed; | |
| playerX = Math.max(0, Math.min(770, playerX)); | |
| playerY = Math.max(0, Math.min(570, playerY)); | |
| player.style.left = `${playerX}px`; | |
| player.style.top = `${playerY}px`; | |
| // Update balls | |
| for (let i = balls.length - 1; i >= 0; i--) { | |
| const ball = balls[i]; | |
| ball.x += ball.dx; | |
| ball.y += ball.dy; | |
| if (ball.x < -50 || ball.x > 850 || ball.y < -50 || ball.y > 650) { | |
| gameContainer.removeChild(ball.element); | |
| balls.splice(i, 1); | |
| continue; | |
| } | |
| ball.element.style.left = `${ball.x}px`; | |
| ball.element.style.top = `${ball.y}px`; | |
| const ballRect = ball.element.getBoundingClientRect(); | |
| if (checkCollision(playerRect, ballRect)) { | |
| gameOver(); | |
| return; | |
| } | |
| } | |
| // Check power-ups | |
| for (let i = powerUps.length - 1; i >= 0; i--) { | |
| const powerUp = powerUps[i]; | |
| const powerUpRect = powerUp.element.getBoundingClientRect(); | |
| if (checkCollision(playerRect, powerUpRect)) { | |
| gameContainer.removeChild(powerUp.element); | |
| powerUps.splice(i, 1); | |
| score += 100; | |
| scoreElement.textContent = `Score: ${score}`; | |
| playerSpeed = 8; | |
| setTimeout(() => playerSpeed = 5, 3000); | |
| } | |
| } | |
| score++; | |
| scoreElement.textContent = `Score: ${score}`; | |
| } | |
| function checkCollision(rect1, rect2) { | |
| return !(rect1.right < rect2.left || | |
| rect1.left > rect2.right || | |
| rect1.bottom < rect2.top || | |
| rect1.top > rect2.bottom); | |
| } | |
| function gameOver() { | |
| isGameRunning = false; | |
| clearInterval(gameLoop); | |
| startScreen.style.display = 'flex'; | |
| startScreen.querySelector('h1').textContent = `Game Over! Score: ${score}`; | |
| balls.forEach(ball => gameContainer.removeChild(ball.element)); | |
| powerUps.forEach(powerUp => gameContainer.removeChild(powerUp.element)); | |
| balls = []; | |
| powerUps = []; | |
| player.style.left = '385px'; | |
| player.style.top = '285px'; | |
| } | |
| document.addEventListener('keydown', (e) => { | |
| keys[e.key] = true; | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| keys[e.key] = false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |