| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Arcade Blaster</title>
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: 'Arial', sans-serif;
|
| background: linear-gradient(to bottom, #0a0a2a, #1a1a3a);
|
| color: #fff;
|
| min-height: 100vh;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| overflow: hidden;
|
| }
|
|
|
| .game-container {
|
| position: relative;
|
| width: 800px;
|
| height: 500px;
|
| border: 4px solid #ff0080;
|
| border-radius: 10px;
|
| box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
|
| overflow: hidden;
|
| background: #000;
|
| }
|
|
|
| #gameCanvas {
|
| background: #000;
|
| display: block;
|
| }
|
|
|
| .overlay {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| background: rgba(0, 0, 0, 0.8);
|
| z-index: 10;
|
| }
|
|
|
| h1 {
|
| font-size: 3.5rem;
|
| margin-bottom: 20px;
|
| text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080;
|
| color: #fff;
|
| }
|
|
|
| .btn {
|
| background: #ff0080;
|
| color: white;
|
| border: none;
|
| padding: 15px 30px;
|
| font-size: 1.2rem;
|
| border-radius: 30px;
|
| cursor: pointer;
|
| margin: 15px 0;
|
| transition: all 0.3s;
|
| box-shadow: 0 0 15px rgba(255, 0, 128, 0.7);
|
| }
|
|
|
| .btn:hover {
|
| background: #ff3399;
|
| transform: scale(1.05);
|
| box-shadow: 0 0 20px rgba(255, 0, 128, 0.9);
|
| }
|
|
|
| .score-display {
|
| position: absolute;
|
| top: 20px;
|
| left: 20px;
|
| font-size: 1.5rem;
|
| color: #fff;
|
| text-shadow: 0 0 5px #ff0080;
|
| z-index: 5;
|
| }
|
|
|
| .instructions {
|
| max-width: 600px;
|
| text-align: center;
|
| margin-top: 20px;
|
| line-height: 1.6;
|
| color: #aaa;
|
| }
|
|
|
| .controls {
|
| display: flex;
|
| gap: 20px;
|
| margin-top: 15px;
|
| }
|
|
|
| .key {
|
| background: #333;
|
| padding: 5px 10px;
|
| border-radius: 5px;
|
| font-weight: bold;
|
| }
|
|
|
| .hidden {
|
| display: none;
|
| }
|
|
|
| .game-over {
|
| text-align: center;
|
| }
|
|
|
| .final-score {
|
| font-size: 2rem;
|
| margin: 20px 0;
|
| color: #ff0080;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <h1>ARCADE BLASTER</h1>
|
|
|
| <div class="game-container">
|
| <div class="score-display">SCORE: <span id="score">0</span></div>
|
|
|
| <canvas id="gameCanvas" width="800" height="500"></canvas>
|
|
|
| <div id="startScreen" class="overlay">
|
| <h2>SPACE BLASTER</h2>
|
| <p>Blast the asteroids before they hit your ship!</p>
|
| <button id="startBtn" class="btn">START GAME</button>
|
| <div class="controls">
|
| <div><span class="key">←</span> <span class="key">→</span> Move</div>
|
| <div><span class="key">SPACE</span> Shoot</div>
|
| </div>
|
| </div>
|
|
|
| <div id="gameOverScreen" class="overlay hidden">
|
| <div class="game-over">
|
| <h2>GAME OVER</h2>
|
| <p>Your ship was destroyed!</p>
|
| <div class="final-score">FINAL SCORE: <span id="finalScore">0</span></div>
|
| <button id="restartBtn" class="btn">PLAY AGAIN</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="instructions">
|
| <p>Destroy as many asteroids as possible. Each hit gives you 10 points.</p>
|
| <p>Game gets faster as your score increases. Avoid colliding with asteroids!</p>
|
| </div>
|
|
|
| <script>
|
|
|
| const canvas = document.getElementById('gameCanvas');
|
| const ctx = canvas.getContext('2d');
|
| const scoreElement = document.getElementById('score');
|
| const finalScoreElement = document.getElementById('finalScore');
|
| const startScreen = document.getElementById('startScreen');
|
| const gameOverScreen = document.getElementById('gameOverScreen');
|
| const startBtn = document.getElementById('startBtn');
|
| const restartBtn = document.getElementById('restartBtn');
|
|
|
|
|
| let score = 0;
|
| let gameRunning = false;
|
| let animationId;
|
|
|
|
|
| const player = {
|
| x: canvas.width / 2 - 25,
|
| y: canvas.height - 70,
|
| width: 50,
|
| height: 60,
|
| speed: 8,
|
| movingLeft: false,
|
| movingRight: false,
|
| color: '#3a86ff'
|
| };
|
|
|
|
|
| const lasers = [];
|
| const laserSpeed = 10;
|
|
|
|
|
| const asteroids = [];
|
| let asteroidSpeed = 2;
|
|
|
|
|
| function init() {
|
| score = 0;
|
| scoreElement.textContent = score;
|
| player.x = canvas.width / 2 - 25;
|
| lasers.length = 0;
|
| asteroids.length = 0;
|
| asteroidSpeed = 2;
|
| }
|
|
|
|
|
| function drawPlayer() {
|
|
|
| ctx.fillStyle = player.color;
|
| ctx.beginPath();
|
| ctx.moveTo(player.x + player.width / 2, player.y);
|
| ctx.lineTo(player.x + player.width, player.y + player.height);
|
| ctx.lineTo(player.x, player.y + player.height);
|
| ctx.closePath();
|
| ctx.fill();
|
|
|
|
|
| ctx.fillStyle = '#ffbe0b';
|
| ctx.beginPath();
|
| ctx.arc(player.x + player.width / 2, player.y + 20, 10, 0, Math.PI * 2);
|
| ctx.fill();
|
|
|
|
|
| ctx.fillStyle = '#ff006e';
|
| ctx.beginPath();
|
| ctx.arc(player.x + player.width / 2, player.y + player.height + 5, 8, 0, Math.PI);
|
| ctx.fill();
|
| }
|
|
|
|
|
| function drawLasers() {
|
| ctx.fillStyle = '#00ff9d';
|
| for (let i = 0; i < lasers.length; i++) {
|
| ctx.beginPath();
|
| ctx.arc(lasers[i].x, lasers[i].y, 4, 0, Math.PI * 2);
|
| ctx.fill();
|
| }
|
| }
|
|
|
|
|
| function drawAsteroids() {
|
| ctx.fillStyle = '#8a817c';
|
| for (let i = 0; i < asteroids.length; i++) {
|
| ctx.beginPath();
|
| ctx.arc(asteroids[i].x, asteroids[i].y, asteroids[i].radius, 0, Math.PI * 2);
|
| ctx.fill();
|
|
|
|
|
| ctx.fillStyle = '#5a5754';
|
| ctx.beginPath();
|
| ctx.arc(asteroids[i].x - 5, asteroids[i].y - 3, 3, 0, Math.PI * 2);
|
| ctx.arc(asteroids[i].x + 6, asteroids[i].y + 4, 2, 0, Math.PI * 2);
|
| ctx.fill();
|
| ctx.fillStyle = '#8a817c';
|
| }
|
| }
|
|
|
|
|
| function update() {
|
|
|
| if (player.movingLeft && player.x > 0) {
|
| player.x -= player.speed;
|
| }
|
| if (player.movingRight && player.x + player.width < canvas.width) {
|
| player.x += player.speed;
|
| }
|
|
|
|
|
| for (let i = lasers.length - 1; i >= 0; i--) {
|
| lasers[i].y -= laserSpeed;
|
|
|
|
|
| if (lasers[i].y < 0) {
|
| lasers.splice(i, 1);
|
| }
|
| }
|
|
|
|
|
| for (let i = asteroids.length - 1; i >= 0; i--) {
|
| asteroids[i].y += asteroids[i].speed;
|
|
|
|
|
| if (asteroids[i].y > canvas.height) {
|
| asteroids.splice(i, 1);
|
| continue;
|
| }
|
|
|
|
|
| const dx = asteroids[i].x - (player.x + player.width / 2);
|
| const dy = asteroids[i].y - (player.y + player.height / 2);
|
| const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
| if (distance < asteroids[i].radius + player.width / 2) {
|
| gameOver();
|
| return;
|
| }
|
|
|
|
|
| for (let j = lasers.length - 1; j >= 0; j--) {
|
| const ldx = asteroids[i].x - lasers[j].x;
|
| const ldy = asteroids[i].y - lasers[j].y;
|
| const laserDistance = Math.sqrt(ldx * ldx + ldy * ldy);
|
|
|
| if (laserDistance < asteroids[i].radius + 4) {
|
|
|
| lasers.splice(j, 1);
|
| asteroids.splice(i, 1);
|
|
|
|
|
| score += 10;
|
| scoreElement.textContent = score;
|
|
|
|
|
| if (score % 100 === 0) {
|
| asteroidSpeed += 0.5;
|
| }
|
|
|
| break;
|
| }
|
| }
|
| }
|
|
|
|
|
| if (Math.random() < 0.03) {
|
| createAsteroid();
|
| }
|
| }
|
|
|
|
|
| function createAsteroid() {
|
| const radius = Math.random() * 20 + 10;
|
| const x = Math.random() * (canvas.width - radius * 2) + radius;
|
| asteroids.push({
|
| x: x,
|
| y: -radius,
|
| radius: radius,
|
| speed: Math.random() * 2 + asteroidSpeed
|
| });
|
| }
|
|
|
|
|
| function drawStars() {
|
| ctx.fillStyle = '#ffffff';
|
| for (let i = 0; i < 100; i++) {
|
| const x = Math.random() * canvas.width;
|
| const y = Math.random() * canvas.height;
|
| const size = Math.random() * 2;
|
| ctx.beginPath();
|
| ctx.arc(x, y, size, 0, Math.PI * 2);
|
| ctx.fill();
|
| }
|
| }
|
|
|
|
|
| function gameLoop() {
|
| if (!gameRunning) return;
|
|
|
|
|
| ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
| drawStars();
|
|
|
|
|
| update();
|
|
|
|
|
| drawPlayer();
|
| drawLasers();
|
| drawAsteroids();
|
|
|
|
|
| animationId = requestAnimationFrame(gameLoop);
|
| }
|
|
|
|
|
| function startGame() {
|
| init();
|
| gameRunning = true;
|
| startScreen.classList.add('hidden');
|
| gameOverScreen.classList.add('hidden');
|
| gameLoop();
|
| }
|
|
|
|
|
| function gameOver() {
|
| gameRunning = false;
|
| cancelAnimationFrame(animationId);
|
| finalScoreElement.textContent = score;
|
| gameOverScreen.classList.remove('hidden');
|
| }
|
|
|
|
|
| function fireLaser() {
|
| if (!gameRunning) return;
|
|
|
| lasers.push({
|
| x: player.x + player.width / 2,
|
| y: player.y
|
| });
|
| }
|
|
|
|
|
| startBtn.addEventListener('click', startGame);
|
| restartBtn.addEventListener('click', startGame);
|
|
|
|
|
| document.addEventListener('keydown', (e) => {
|
| if (e.key === 'ArrowLeft') player.movingLeft = true;
|
| if (e.key === 'ArrowRight') player.movingRight = true;
|
| if (e.key === ' ' || e.key === 'Spacebar') fireLaser();
|
| });
|
|
|
| document.addEventListener('keyup', (e) => {
|
| if (e.key === 'ArrowLeft') player.movingLeft = false;
|
| if (e.key === 'ArrowRight') player.movingRight = false;
|
| });
|
|
|
|
|
| let touchStartX = 0;
|
|
|
| canvas.addEventListener('touchstart', (e) => {
|
| touchStartX = e.touches[0].clientX;
|
| e.preventDefault();
|
| });
|
|
|
| canvas.addEventListener('touchmove', (e) => {
|
| const touchX = e.touches[0].clientX;
|
| const diffX = touchX - touchStartX;
|
|
|
| if (diffX > 10) {
|
| player.movingRight = true;
|
| player.movingLeft = false;
|
| } else if (diffX < -10) {
|
| player.movingLeft = true;
|
| player.movingRight = false;
|
| }
|
|
|
| touchStartX = touchX;
|
| e.preventDefault();
|
| });
|
|
|
| canvas.addEventListener('touchend', () => {
|
| player.movingLeft = false;
|
| player.movingRight = false;
|
| });
|
|
|
| canvas.addEventListener('click', () => {
|
| if (gameRunning) fireLaser();
|
| });
|
|
|
|
|
| init();
|
| </script>
|
| </body>
|
| </html> |
