Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Invaders</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
        }
        
        canvas {
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Define player properties
        const playerWidth = 50;
        const playerHeight = 10;
        let playerX = (canvas.width - playerWidth) / 2;
        const playerY = canvas.height - 20;
        const playerSpeed = 7;
        
        // Define bullet properties
        const bulletWidth = 3;
        const bulletHeight = 10;
        let bulletX;
        let bulletY = playerY - bulletHeight;
        let bulletSpeed = 5;
        let isBulletActive = false;
        
        // Define enemy properties
        const enemyRows = 5;
        const enemyCols = 10;
        const enemyWidth = 30;
        const enemyHeight = 20;
        const enemyPadding = 10;
        const enemyOffsetTop = 30;
        const enemyOffsetLeft = 30;
        let enemies = [];
        
        // Create enemies
        for (let c = 0; c < enemyCols; c++) {
            enemies[c] = [];
            for (let r = 0; r < enemyRows; r++) {
                enemies[c][r] = { x: 0, y: 0, status: 1 };
            }
        }
        
        // Add event listeners
        document.addEventListener('keydown', movePlayer);
        document.addEventListener('keydown', shootBullet);
        
        function movePlayer(event) {
            if (event.key === 'ArrowLeft' && playerX > 0) {
                playerX -= playerSpeed;
            } else if (event.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
                playerX += playerSpeed;
            }
        }
        
        function shootBullet(event) {
            if (event.key === ' ' && !isBulletActive) {
                bulletX = playerX + (playerWidth / 2);
                bulletY = playerY - bulletHeight;
                isBulletActive = true;
            }
        }
        
        function drawPlayer() {
            ctx.beginPath();
            ctx.rect(playerX, playerY, playerWidth, playerHeight);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.closePath();
        }
        
        function drawBullet() {
            if (isBulletActive) {
                ctx.beginPath();
                ctx.rect(bulletX, bulletY, bulletWidth, bulletHeight);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.closePath();
            }
        }
        
        function drawEnemies() {
            for (let c = 0; c < enemyCols; c++) {
                for (let r = 0; r < enemyRows; r++) {
                    if (enemies[c][r].status === 1) {
                        const enemyX = c * (enemyWidth + enemyPadding) + enemyOffsetLeft;
                        const enemyY = r * (enemyHeight + enemyPadding) + enemyOffsetTop;
                        enemies[c][r].x = enemyX;
                        enemies[c][r].y = enemyY;
                        ctx.beginPath();
                        ctx.rect(enemyX, enemyY, enemyWidth, enemyHeight);
                        ctx.fillStyle = 'white';
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }
        
        function collisionDetection() {
            for (let c = 0; c < enemyCols; c++) {
                for (let r = 0; r < enemyRows; r++) {
                    const enemy = enemies[c][r];
                    if (enemy.status === 1) {
                        if (bulletX > enemy.x && bulletX < enemy.x + enemyWidth && bulletY > enemy.y && bulletY < enemy.y + enemyHeight) {
                            enemy.status = 0;
                            isBulletActive = false;
                        }
                    }
                }
            }
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBullet();
            drawEnemies();
            collisionDetection();
        
            // Move bullet
            if (isBulletActive) {
                bulletY -= bulletSpeed;
                if (bulletY < 0) {
                    isBulletActive = false;
                }
            }
        
            requestAnimationFrame(draw);
        }
        
        draw();
    </script>
</body>
</html>
Editor is loading...