CODE FOR SPACE SHOOTER GAME HTML ,CSS AND JAVASCRIPT


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced 3D Space Shooter Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
        #score {
            position: absolute;
            color: white;
            font-size: 24px;
            top: 10px;
            left: 10px;
        }
        #gameOver {
            position: absolute;
            color: red;
            font-size: 48px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
    </style>
</head>
<body>
    <div id="score">Score: 0</div>
    <div id="gameOver">Game Over</div>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Game variables
        let score = 0;
        let bullets = [];
        let enemies = [];
        let powerUps = [];
        let player = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 60,
            width: 50,
            height: 50,
            color: 'blue',
            health: 3
        };
        let gameOver = false;
        let enemyFallingSpeed = 2;
        let enemySpawnRate = 100; // milliseconds
        let enemySpawnTimer = 0;

        // Event Listeners
        document.addEventListener('mousemove', (event) => {
            player.x = event.clientX - player.width / 2;
        });

        document.addEventListener('click', () => {
            shootBullet();
        });

        // Functions
        function shootBullet() {
            bullets.push({x: player.x + player.width / 2 - 2.5, y: player.y, width: 5, height: 20, color: 'yellow'});
        }

        function spawnEnemies() {
            if (Math.random() < 0.02) {
                const x = Math.random() * (canvas.width - 50);
                enemies.push({x: x, y: 0, width: 50, height: 50, color: 'red'});
            }
        }

        function spawnPowerUps() {
            if (Math.random() < 0.01) {
                const x = Math.random() * (canvas.width - 50);
                powerUps.push({x: x, y: 0, width: 30, height: 30, color: 'green', type: 'health'});
            }
        }

        function update() {
            if (gameOver) return;

            // Update bullets
            bullets.forEach((bullet, index) => {
                bullet.y -= 5;
                if (bullet.y < 0) {
                    bullets.splice(index, 1);
                }
            });

            // Update enemies
            enemies.forEach((enemy, index) => {
                enemy.y += enemyFallingSpeed;
                if (enemy.y > canvas.height) {
                    enemies.splice(index, 1);
                    player.health -= 1; // Lose health if enemy falls
                    if (player.health <= 0) {
                        gameOver = true;
                        document.getElementById('gameOver').style.display = 'block';
                    }
                }

                // Check collision with bullets
                bullets.forEach((bullet, bulletIndex) => {
                    if (bullet.x < enemy.x + enemy.width &&
                        bullet.x + bullet.width > enemy.x &&
                        bullet.y < enemy.y + enemy.height &&
                        bullet.y + bullet.height > enemy.y) {
                        enemies.splice(index, 1);
                        bullets.splice(bulletIndex, 1);
                        score += 20; // Gain score for hitting enemy
                    }
                });
            });

            // Update power-ups
            powerUps.forEach((powerUp, index) => {
                powerUp.y += 3;
                if (powerUp.y > canvas.height) {
                    powerUps.splice(index, 1);
                }

                // Check collision with player
                if (powerUp.x < player.x + player.width &&
                    powerUp.x + powerUp.width > player.x &&
                    powerUp.y < player.y + player.height &&
                    powerUp.y + powerUp.height > player.y) {
                    powerUps.splice(index, 1);
                    player.health = Math.min(player.health + 1, 5); // Gain health
                }
            });

            // Draw everything
            draw();
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);

            bullets.forEach(bullet => {
                ctx.fillStyle = bullet.color;
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });

            enemies.forEach(enemy => {
                ctx.fillStyle = enemy.color;
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
            });

            powerUps.forEach(powerUp => {
                ctx.fillStyle = powerUp.color;
                ctx.fillRect(powerUp.x, powerUp.y, powerUp.width, powerUp.height);
            });

            document.getElementById('score').innerText = 'Score: ' + score;
            document.getElementById('score').innerText += ' | Health: ' + player.health;
        }

        function gameLoop() {
            if (gameOver) return;
            enemySpawnTimer += 16; // Assuming 60 FPS
            if (enemySpawnTimer >= enemySpawnRate) {
                spawnEnemies();
                enemySpawnTimer = 0;
            }
            spawnPowerUps();
            update();
            requestAnimationFrame(gameLoop);
        }

        // Start the game
        gameLoop();
    </script>
</body>
</html>

HTML

Share this:

Leave a Reply Cancel reply