VedikaAmodiya
/

Arcade_Blaster

Model card Files Files and versions

xet

Community

VedikaAmodiya commited on Sep 2, 2025

Commit

3030ff0

verified ·

1 Parent(s): 8d5f23b

Upload game.html

Browse files

Files changed (1) hide show

game.html +457 -0

game.html ADDED Viewed

	@@ -0,0 +1,457 @@

+<!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>
+        // Game elements
+        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');
+        // Game state
+        let score = 0;
+        let gameRunning = false;
+        let animationId;
+        // Player ship
+        const player = {
+            x: canvas.width / 2 - 25,
+            y: canvas.height - 70,
+            width: 50,
+            height: 60,
+            speed: 8,
+            movingLeft: false,
+            movingRight: false,
+            color: '#3a86ff'
+        };
+        // Lasers array
+        const lasers = [];
+        const laserSpeed = 10;
+        // Asteroids array
+        const asteroids = [];
+        let asteroidSpeed = 2;
+        // Initialize game
+        function init() {
+            score = 0;
+            scoreElement.textContent = score;
+            player.x = canvas.width / 2 - 25;
+            lasers.length = 0;
+            asteroids.length = 0;
+            asteroidSpeed = 2;
+        }
+        // Draw player ship
+        function drawPlayer() {
+            // Ship body
+            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();
+            // Cockpit
+            ctx.fillStyle = '#ffbe0b';
+            ctx.beginPath();
+            ctx.arc(player.x + player.width / 2, player.y + 20, 10, 0, Math.PI * 2);
+            ctx.fill();
+            // Engine glow
+            ctx.fillStyle = '#ff006e';
+            ctx.beginPath();
+            ctx.arc(player.x + player.width / 2, player.y + player.height + 5, 8, 0, Math.PI);
+            ctx.fill();
+        }
+        // Draw lasers
+        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();
+            }
+        }
+        // Draw asteroids
+        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();
+                // Add some crater details
+                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';
+            }
+        }
+        // Update game state
+        function update() {
+            // Move player
+            if (player.movingLeft && player.x > 0) {
+                player.x -= player.speed;
+            }
+            if (player.movingRight && player.x + player.width < canvas.width) {
+                player.x += player.speed;
+            }
+            // Move lasers
+            for (let i = lasers.length - 1; i >= 0; i--) {
+                lasers[i].y -= laserSpeed;
+                // Remove lasers that go off screen
+                if (lasers[i].y < 0) {
+                    lasers.splice(i, 1);
+                }
+            }
+            // Move asteroids and check for collisions
+            for (let i = asteroids.length - 1; i >= 0; i--) {
+                asteroids[i].y += asteroids[i].speed;
+                // Check if asteroid is out of screen
+                if (asteroids[i].y > canvas.height) {
+                    asteroids.splice(i, 1);
+                    continue;
+                }
+                // Check for collision with player
+                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;
+                }
+                // Check for collision with lasers
+                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) {
+                        // Remove the laser and asteroid
+                        lasers.splice(j, 1);
+                        asteroids.splice(i, 1);
+                        // Increase score
+                        score += 10;
+                        scoreElement.textContent = score;
+                        // Increase difficulty every 100 points
+                        if (score % 100 === 0) {
+                            asteroidSpeed += 0.5;
+                        }
+                        break;
+                    }
+                }
+            }
+            // Add new asteroids
+            if (Math.random() < 0.03) {
+                createAsteroid();
+            }
+        }
+        // Create a new asteroid
+        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
+            });
+        }
+        // Draw stars in the background
+        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();
+            }
+        }
+        // Main game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw background
+            drawStars();
+            // Update game state
+            update();
+            // Draw game elements
+            drawPlayer();
+            drawLasers();
+            drawAsteroids();
+            // Request next frame
+            animationId = requestAnimationFrame(gameLoop);
+        }
+        // Start the game
+        function startGame() {
+            init();
+            gameRunning = true;
+            startScreen.classList.add('hidden');
+            gameOverScreen.classList.add('hidden');
+            gameLoop();
+        }
+        // Game over
+        function gameOver() {
+            gameRunning = false;
+            cancelAnimationFrame(animationId);
+            finalScoreElement.textContent = score;
+            gameOverScreen.classList.remove('hidden');
+        }
+        // Fire a laser
+        function fireLaser() {
+            if (!gameRunning) return;
+            lasers.push({
+                x: player.x + player.width / 2,
+                y: player.y
+            });
+        }
+        // Event listeners
+        startBtn.addEventListener('click', startGame);
+        restartBtn.addEventListener('click', startGame);
+        // Keyboard controls
+        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;
+        });
+        // Touch controls for mobile
+        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();
+        });
+        // Initialize the game
+        init();
+    </script>
+</body>
+</html>