Spaces:

Francis89074
/

pong

Running

App Files Files Community

Francis89074 commited on Feb 22, 2025

Commit

785b50d

verified ·

1 Parent(s): 8f79887

Update spaceinvaders.html

Browse files

Files changed (1) hide show

spaceinvaders.html +193 -0

spaceinvaders.html CHANGED Viewed

	@@ -0,0 +1,193 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Space Invaders</title>
+    <style>
+        canvas {
+            border: 1px solid black;
+            display: block;
+            margin: 0 auto;
+            background: black;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        // Player
+        const player = {
+            x: canvas.width/2 - 25,
+            y: canvas.height - 50,
+            width: 50,
+            height: 30,
+            speed: 5,
+            dx: 0
+        };
+        // Bullets
+        const bullets = [];
+        const bulletSpeed = -10;
+        let canShoot = true;
+        // Aliens
+        const aliens = [];
+        const alienRows = 5;
+        const alienCols = 10;
+        const alienWidth = 40;
+        const alienHeight = 30;
+        const alienSpeed = 1;
+        let alienDirection = 1;
+        let alienMoveDown = false;
+        // Score
+        let score = 0;
+        // Initialize aliens
+        function createAliens() {
+            for (let row = 0; row < alienRows; row++) {
+                for (let col = 0; col < alienCols; col++) {
+                    aliens.push({
+                        x: col * (alienWidth + 10) + 50,
+                        y: row * (alienHeight + 10) + 50,
+                        width: alienWidth,
+                        height: alienHeight,
+                        alive: true
+                    });
+                }
+            }
+        }
+        // Controls
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') player.dx = -player.speed;
+            if (e.key === 'ArrowRight') player.dx = player.speed;
+            if (e.key === ' ' && canShoot) {
+                bullets.push({
+                    x: player.x + player.width/2 - 2,
+                    y: player.y,
+                    width: 4,
+                    height: 10
+                });
+                canShoot = false;
+                setTimeout(() => canShoot = true, 300);
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') player.dx = 0;
+        });
+        function update() {
+            // Move player
+            player.x += player.dx;
+            if (player.x < 0) player.x = 0;
+            if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
+            // Move bullets
+            bullets.forEach((bullet, index) => {
+                bullet.y += bulletSpeed;
+                if (bullet.y < 0) bullets.splice(index, 1);
+            });
+            // Move aliens
+            let reachedEdge = false;
+            aliens.forEach(alien => {
+                if (alien.alive) {
+                    alien.x += alienSpeed * alienDirection;
+                    if (alien.x <= 0 || alien.x + alien.width >= canvas.width) reachedEdge = true;
+                }
+            });
+            if (reachedEdge) {
+                alienDirection = -alienDirection;
+                alienMoveDown = true;
+            }
+            if (alienMoveDown) {
+                aliens.forEach(alien => alien.y += 10);
+                alienMoveDown = false;
+            }
+            // Collision detection
+            bullets.forEach((bullet, bIndex) => {
+                aliens.forEach((alien, aIndex) => {
+                    if (alien.alive &&
+                        bullet.x < alien.x + alien.width &&
+                        bullet.x + bullet.width > alien.x &&
+                        bullet.y < alien.y + alien.height &&
+                        bullet.y + bullet.height > alien.y) {
+                        alien.alive = false;
+                        bullets.splice(bIndex, 1);
+                        score += 10;
+                    }
+                });
+            });
+            // Check game over
+            aliens.forEach(alien => {
+                if (alien.alive && alien.y + alien.height >= player.y) {
+                    alert(`Game Over! Score: ${score}`);
+                    resetGame();
+                }
+            });
+            if (aliens.every(alien => !alien.alive)) {
+                alert(`You Win! Score: ${score}`);
+                resetGame();
+            }
+        }
+        function draw() {
+            // Clear canvas
+            ctx.fillStyle = 'black';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw player
+            ctx.fillStyle = 'white';
+            ctx.fillRect(player.x, player.y, player.width, player.height);
+            // Draw bullets
+            ctx.fillStyle = 'red';
+            bullets.forEach(bullet => {
+                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+            });
+            // Draw aliens
+            ctx.fillStyle = 'green';
+            aliens.forEach(alien => {
+                if (alien.alive) {
+                    ctx.fillRect(alien.x, alien.y, alien.width, alien.height);
+                }
+            });
+            // Draw score
+            ctx.fillStyle = 'white';
+            ctx.font = '20px Arial';
+            ctx.fillText(`Score: ${score}`, 10, 30);
+        }
+        function resetGame() {
+            aliens.length = 0;
+            bullets.length = 0;
+            player.x = canvas.width/2 - 25;
+            score = 0;
+            createAliens();
+        }
+        // Game loop
+        function gameLoop() {
+            update();
+            draw();
+            requestAnimationFrame(gameLoop);
+        }
+        // Start game
+        createAliens();
+        gameLoop();
+    </script>
+</body>
+</html>