Pong-Pygame

Running

App Files Files Community

Nymbo commited on Aug 7

Commit

d12c958

•

1 Parent(s): be3b168

swapping to spaceship

Browse files

Files changed (1) hide show

index.html +106 -173

index.html CHANGED Viewed

@@ -1,12 +1,9 @@
 <!DOCTYPE html>
-<!-- this was mostly written by Claude-3.5-Sonnet btw -->
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Snake Game (WASD Controls, Larger Area, Obstacles, Slower Enemies)</title>
     <style>
         body {
             display: flex;
@@ -14,218 +11,154 @@
             align-items: center;
             height: 100vh;
             margin: 0;
-            background-color: #f0f0f0;
         }
         canvas {
-            border: 2px solid #333;
         }
     </style>
 </head>
 <body>
-    <canvas id="gameCanvas" width="800" height="800"></canvas>
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
-        const gridSize = 20;
-        const tileCount = canvas.width / gridSize;
-        let snake = [
-            {x: 20, y: 20},
-        ];
-        let food = {x: 15, y: 15};
-        let dx = 0;
-        let dy = 0;
-        let score = 0;
-        let obstacles = [];
         let enemies = [];
-        let enemyMoveCounter = 0;
-        function generateObstacles() {
-            obstacles = [];
-            for (let i = 0; i < 20; i++) {
-                obstacles.push({
-                    x: Math.floor(Math.random() * tileCount),
-                    y: Math.floor(Math.random() * tileCount)
-                });
-            }
-        }
-        function generateEnemies() {
-            enemies = [];
-            for (let i = 0; i < 3; i++) {
-                enemies.push({
-                    x: Math.floor(Math.random() * tileCount),
-                    y: Math.floor(Math.random() * tileCount)
-                });
-            }
-        }
-        generateObstacles();
-        generateEnemies();
-        function drawGame() {
-            clearCanvas();
-            moveSnake();
-            moveEnemies();
-            drawSnake();
-            drawFood();
-            drawObstacles();
-            drawEnemies();
-            checkCollision();
-            drawScore();
         }
-        function clearCanvas() {
-            ctx.fillStyle = 'white';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
-        function moveSnake() {
-            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
-            snake.unshift(head);
-            if (head.x === food.x && head.y === food.y) {
-                score++;
-                generateFood();
-            } else {
-                snake.pop();
             }
-        }
-        function moveEnemies() {
-            enemyMoveCounter++;
-            if (enemyMoveCounter >= 2.5) { // Move enemies every 2.5 game loops (60% slower)
-                enemyMoveCounter = 0;
-                enemies.forEach(enemy => {
-                    const head = snake[0];
-                    if (enemy.x < head.x) enemy.x++;
-                    else if (enemy.x > head.x) enemy.x--;
-                    if (enemy.y < head.y) enemy.y++;
-                    else if (enemy.y > head.y) enemy.y--;
-                });
-            }
-        }
-        function drawSnake() {
-            ctx.fillStyle = 'green';
-            snake.forEach(segment => {
-                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
             });
         }
-        function drawFood() {
-            ctx.fillStyle = 'red';
-            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
-        }
-        function drawObstacles() {
-            ctx.fillStyle = 'gray';
-            obstacles.forEach(obstacle => {
-                ctx.fillRect(obstacle.x * gridSize, obstacle.y * gridSize, gridSize - 2, gridSize - 2);
-            });
-        }
-        function drawEnemies() {
-            ctx.fillStyle = 'purple';
             enemies.forEach(enemy => {
-                ctx.fillRect(enemy.x * gridSize, enemy.y * gridSize, gridSize - 2, gridSize - 2);
             });
-        }
-        function generateFood() {
-            do {
-                food.x = Math.floor(Math.random() * tileCount);
-                food.y = Math.floor(Math.random() * tileCount);
-            } while (isCollision(food) || isOnSnake(food) || isOnEnemy(food));
-        }
-        function isCollision(pos) {
-            return obstacles.some(obstacle => obstacle.x === pos.x && obstacle.y === pos.y);
-        }
-        function isOnSnake(pos) {
-            return snake.some(segment => segment.x === pos.x && segment.y === pos.y);
-        }
-        function isOnEnemy(pos) {
-            return enemies.some(enemy => enemy.x === pos.x && enemy.y === pos.y);
-        }
-        function checkCollision() {
-            const head = snake[0];
-            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
-                resetGame();
-                return;
             }
-            for (let i = 1; i < snake.length; i++) {
-                if (head.x === snake[i].x && head.y === snake[i].y) {
-                    resetGame();
-                    return;
-                }
-            }
-            if (isCollision(head) || isOnEnemy(head)) {
-                resetGame();
-            }
         }
         function resetGame() {
-            snake = [{x: 20, y: 20}];
-            food = {x: 15, y: 15};
-            dx = 0;
-            dy = 0;
             score = 0;
-            enemyMoveCounter = 0;
-            generateObstacles();
-            generateEnemies();
-            generateFood();
-        }
-        function drawScore() {
-            ctx.fillStyle = 'black';
-            ctx.font = '20px Arial';
-            ctx.fillText(`Score: ${score}`, 10, 30);
         }
-        document.addEventListener('keydown', changeDirection);
-        function changeDirection(event) {
-            const key = event.key.toLowerCase();
-            const goingUp = dy === -1;
-            const goingDown = dy === 1;
-            const goingRight = dx === 1;
-            const goingLeft = dx === -1;
-            if (key === 'a' && !goingRight) {
-                dx = -1;
-                dy = 0;
-            }
-            if (key === 'w' && !goingDown) {
-                dx = 0;
-                dy = -1;
             }
-            if (key === 'd' && !goingLeft) {
-                dx = 1;
-                dy = 0;
-            }
-            if (key === 's' && !goingUp) {
-                dx = 0;
-                dy = 1;
-            }
-        }
-        function gameLoop() {
-            drawGame();
-            setTimeout(gameLoop, 100);
-        }
         gameLoop();
     </script>
 </body>

 <!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 {
             display: flex;
             align-items: center;
             height: 100vh;
             margin: 0;
+            background-color: #000;
         }
         canvas {
+            border: 2px solid #fff;
         }
     </style>
 </head>
 <body>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
+        // Game variables
+        let playerX = 370;
+        let playerY = 480;
+        let playerWidth = 64;
+        let playerHeight = 64;
+        let playerSpeed = 5;
         let enemies = [];
+        const numEnemies = 6;
+        const enemyWidth = 64;
+        const enemyHeight = 64;
+        let bullet = {
+            x: 0,
+            y: 480,
+            width: 8,
+            height: 20,
+            speed: 10,
+            active: false
+        };
+        let score = 0;
+        // Initialize enemies
+        for (let i = 0; i < numEnemies; i++) {
+            enemies.push({
+                x: Math.random() * (canvas.width - enemyWidth),
+                y: Math.random() * 100 + 50,
+                speed: 2,
+                direction: 1
+            });
         }
+        // Game loop
+        function gameLoop() {
+            update();
+            draw();
+            requestAnimationFrame(gameLoop);
         }
+        function update() {
+            // Move player
+            if (keys.ArrowLeft && playerX > 0) playerX -= playerSpeed;
+            if (keys.ArrowRight && playerX < canvas.width - playerWidth) playerX += playerSpeed;
+            // Move bullet
+            if (bullet.active) {
+                bullet.y -= bullet.speed;
+                if (bullet.y < 0) bullet.active = false;
             }
+            // Move enemies
+            enemies.forEach(enemy => {
+                enemy.x += enemy.speed * enemy.direction;
+                if (enemy.x <= 0 || enemy.x >= canvas.width - enemyWidth) {
+                    enemy.direction *= -1;
+                    enemy.y += 20;
+                }
+                // Check for collision with bullet
+                if (bullet.active && collision(bullet, enemy)) {
+                    bullet.active = false;
+                    enemy.y = Math.random() * 100 + 50;
+                    enemy.x = Math.random() * (canvas.width - enemyWidth);
+                    score++;
+                }
+                // Check for game over
+                if (enemy.y > playerY - enemyHeight) {
+                    alert('Game Over! Your score: ' + score);
+                    resetGame();
+                }
             });
         }
+        function draw() {
+            // Clear canvas
+            ctx.fillStyle = 'black';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw player
+            ctx.fillStyle = 'lime';
+            ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
+            // Draw enemies
+            ctx.fillStyle = 'red';
             enemies.forEach(enemy => {
+                ctx.fillRect(enemy.x, enemy.y, enemyWidth, enemyHeight);
             });
+            // Draw bullet
+            if (bullet.active) {
+                ctx.fillStyle = 'white';
+                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
             }
+            // Draw score
+            ctx.fillStyle = 'white';
+            ctx.font = '24px Arial';
+            ctx.fillText('Score: ' + score, 10, 30);
+        }
+        function collision(rect1, rect2) {
+            return rect1.x < rect2.x + enemyWidth &&
+                   rect1.x + rect1.width > rect2.x &&
+                   rect1.y < rect2.y + enemyHeight &&
+                   rect1.y + rect1.height > rect2.y;
         }
         function resetGame() {
+            playerX = 370;
             score = 0;
+            enemies.forEach(enemy => {
+                enemy.y = Math.random() * 100 + 50;
+                enemy.x = Math.random() * (canvas.width - enemyWidth);
+            });
         }
+        // Keyboard input
+        let keys = {};
+        document.addEventListener('keydown', (e) => {
+            keys[e.code] = true;
+            if (e.code === 'Space' && !bullet.active) {
+                bullet.active = true;
+                bullet.x = playerX + playerWidth / 2 - bullet.width / 2;
+                bullet.y = playerY;
             }
+        });
+        document.addEventListener('keyup', (e) => {
+            keys[e.code] = false;
+        });
+        // Start the game
         gameLoop();
     </script>
 </body>