| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Space Shooter</title> |
| <style> |
| body { |
| margin: 0; |
| overflow: hidden; |
| background: black; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| font-family: Arial; |
| color: white; |
| } |
| |
| #gameCanvas { |
| border: 2px solid white; |
| background-image: |
| radial-gradient(white 1px, transparent 0), |
| radial-gradient(white 1px, transparent 0); |
| background-size: 50px 50px; |
| background-position: 0 0, 25px 25px; |
| display: none; |
| } |
| |
| #menu { |
| text-align: center; |
| } |
| |
| .difficulty-btn { |
| padding: 10px 20px; |
| margin: 10px; |
| font-size: 18px; |
| cursor: pointer; |
| background: #333; |
| color: white; |
| border: 2px solid white; |
| border-radius: 5px; |
| } |
| |
| .difficulty-btn:hover { |
| background: #555; |
| } |
| |
| #score { |
| position: absolute; |
| top: 20px; |
| left: 20px; |
| font-size: 24px; |
| } |
| |
| #gameOver { |
| position: absolute; |
| font-size: 48px; |
| text-align: center; |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="menu"> |
| <h1>Space Shooter</h1> |
| <h2>Select Difficulty:</h2> |
| <button class="difficulty-btn" onclick="startGame('easy')">Easy</button> |
| <button class="difficulty-btn" onclick="startGame('medium')">Medium</button> |
| <button class="difficulty-btn" onclick="startGame('hard')">Hard</button> |
| </div> |
| <div id="score">Score: <span id="scoreValue">0</span></div> |
| <canvas id="gameCanvas" width="800" height="600"></canvas> |
| <div id="gameOver">Game Over!<br>Press R to Restart</div> |
|
|
| <script> |
| const canvas = document.getElementById('gameCanvas'); |
| const ctx = canvas.getContext('2d'); |
| const scoreEl = document.getElementById('scoreValue'); |
| const gameOverEl = document.getElementById('gameOver'); |
| const menuEl = document.getElementById('menu'); |
| |
| let audioCtx; |
| let player = { |
| x: canvas.width/2, |
| y: 500, |
| speed: 5, |
| size: 30 |
| }; |
| let bullets = []; |
| let enemies = []; |
| let score = 0; |
| let gameOver = false; |
| let keys = { |
| left: false, |
| right: false |
| }; |
| |
| let gameConfig = { |
| easy: { |
| enemySpeed: 2, |
| spawnRate: 0.01, |
| playerSpeed: 5 |
| }, |
| medium: { |
| enemySpeed: 3, |
| spawnRate: 0.02, |
| playerSpeed: 6 |
| }, |
| hard: { |
| enemySpeed: 4, |
| spawnRate: 0.03, |
| playerSpeed: 7 |
| } |
| }; |
| |
| let currentConfig; |
| |
| function startGame(difficulty) { |
| menuEl.style.display = 'none'; |
| canvas.style.display = 'block'; |
| currentConfig = gameConfig[difficulty]; |
| player.speed = currentConfig.playerSpeed; |
| resetGame(); |
| if (!audioCtx) { |
| audio = setupAudio(); |
| } |
| } |
| |
| function setupAudio() { |
| audioCtx = new (window.AudioContext || window.webkitAudioContext)(); |
| |
| function playNote(freq, startTime, duration) { |
| const osc = audioCtx.createOscillator(); |
| const gain = audioCtx.createGain(); |
| |
| osc.connect(gain); |
| gain.connect(audioCtx.destination); |
| |
| osc.type = 'square'; |
| osc.frequency.setValueAtTime(freq, startTime); |
| |
| gain.gain.setValueAtTime(0.1, startTime); |
| gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration); |
| |
| osc.start(startTime); |
| osc.stop(startTime + duration); |
| } |
| |
| function playBGM() { |
| const notes = [440, 523, 659, 784]; |
| setInterval(() => { |
| if (!gameOver) { |
| playNote(notes[Math.floor(Math.random() * notes.length)], |
| audioCtx.currentTime, |
| 0.1); |
| } |
| }, 200); |
| } |
| |
| function playShoot() { |
| playNote(880, audioCtx.currentTime, 0.1); |
| } |
| |
| playBGM(); |
| return { playShoot }; |
| } |
| |
| function drawPlayer() { |
| ctx.fillStyle = 'yellow'; |
| ctx.beginPath(); |
| for (let i = 0; i < 5; i++) { |
| const angle = (i * 4 * Math.PI) / 5 - Math.PI / 2; |
| const x = player.x + player.size * Math.cos(angle); |
| const y = player.y + player.size * Math.sin(angle); |
| i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); |
| } |
| ctx.closePath(); |
| ctx.fill(); |
| } |
| |
| function createEnemy() { |
| if (Math.random() < currentConfig.spawnRate) { |
| enemies.push({ |
| x: Math.random() * (canvas.width - 30) + 15, |
| y: -30, |
| speed: currentConfig.enemySpeed |
| }); |
| } |
| } |
| |
| function updatePlayer() { |
| if (keys.left) { |
| player.x = Math.max(player.size, player.x - player.speed); |
| } |
| if (keys.right) { |
| player.x = Math.min(canvas.width - player.size, player.x + player.speed); |
| } |
| } |
| |
| function updateGame() { |
| updatePlayer(); |
| |
| bullets = bullets.filter(bullet => { |
| bullet.y -= 8; |
| return bullet.y > 0; |
| }); |
| |
| enemies = enemies.filter(enemy => { |
| enemy.y += enemy.speed; |
| |
| if (Math.abs(enemy.x - player.x) < 30 && |
| Math.abs(enemy.y - player.y) < 30) { |
| gameOver = true; |
| gameOverEl.style.display = 'block'; |
| } |
| |
| return enemy.y < canvas.height; |
| }); |
| |
| bullets.forEach((bullet, bi) => { |
| enemies.forEach((enemy, ei) => { |
| if (Math.abs(bullet.x - enemy.x) < 30 && |
| Math.abs(bullet.y - enemy.y) < 30) { |
| bullets.splice(bi, 1); |
| enemies.splice(ei, 1); |
| score += 100; |
| scoreEl.textContent = score; |
| } |
| }); |
| }); |
| |
| createEnemy(); |
| } |
| |
| function draw() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| |
| drawPlayer(); |
| |
| ctx.fillStyle = 'white'; |
| bullets.forEach(bullet => { |
| ctx.fillRect(bullet.x - 2, bullet.y - 8, 4, 16); |
| }); |
| |
| ctx.font = '30px Arial'; |
| enemies.forEach(enemy => { |
| ctx.fillText('🐱', enemy.x - 15, enemy.y + 10); |
| }); |
| } |
| |
| function gameLoop() { |
| if (!gameOver) { |
| updateGame(); |
| draw(); |
| requestAnimationFrame(gameLoop); |
| } |
| } |
| |
| function resetGame() { |
| player.x = canvas.width/2; |
| bullets = []; |
| enemies = []; |
| score = 0; |
| gameOver = false; |
| scoreEl.textContent = '0'; |
| gameOverEl.style.display = 'none'; |
| gameLoop(); |
| } |
| |
| function returnToMenu() { |
| canvas.style.display = 'none'; |
| menuEl.style.display = 'block'; |
| gameOverEl.style.display = 'none'; |
| } |
| |
| let audio; |
| |
| document.addEventListener('keydown', (e) => { |
| if (gameOver) { |
| if (e.key.toLowerCase() === 'r') { |
| returnToMenu(); |
| } |
| return; |
| } |
| |
| switch(e.key) { |
| case 'ArrowLeft': |
| keys.left = true; |
| break; |
| case 'ArrowRight': |
| keys.right = true; |
| break; |
| case ' ': |
| bullets.push({ |
| x: player.x, |
| y: player.y - 20 |
| }); |
| if (audio) audio.playShoot(); |
| break; |
| } |
| }); |
| |
| document.addEventListener('keyup', (e) => { |
| switch(e.key) { |
| case 'ArrowLeft': |
| keys.left = false; |
| break; |
| case 'ArrowRight': |
| keys.right = false; |
| break; |
| } |
| }); |
| </script> |
| </body> |
| </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |
