StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on 12 days ago

Commit

18b24cd

verified ·

1 Parent(s): 04d3523

Update app.py

Browse files

Files changed (1) hide show

app.py +252 -133

app.py CHANGED Viewed

@@ -1,153 +1,272 @@
 import streamlit as st
-def create_app():
-    st.title("3D Python Snake Matrix Code ❤️🐍")
-    html_code = r"""
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="UTF-8">
-        <title>3D Python Snake Matrix Code ❤️</title>
-        <!-- Load p5.js (with WEBGL support) from a CDN -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
-        <style>
-          /* Remove margins and set a black background */
-          body { margin: 0; padding: 0; overflow: hidden; background: black; }
-          #sketch-container { display: flex; justify-content: center; align-items: center; }
-        </style>
-      </head>
-      <body>
-        <div id="sketch-container"></div>
-        <script>
-        // ❤️ 3D Python Snake Matrix Code with Heart Emojis ❤️
-        // Global variables for the Matrix rain overlay
-        let matrixColumns = [];
-        let fontSize = 16;
-        let numColumns;
-        // Global variables for the snake
-        let snake = [];         // Array to hold 3D positions of the snake segments
-        const maxSnakeLength = 50; // Maximum number of segments
-        let t = 0;              // Time variable for snake movement
-        function setup() {
-          // Create a WEBGL canvas that fills the window and attach it to our container
-          let canvas = createCanvas(windowWidth, windowHeight, WEBGL);
-          canvas.parent('sketch-container');
-          textFont('monospace');
-          textSize(fontSize);
-          noStroke();
-          // Setup Matrix rain columns (we work in 2D for the overlay)
-          numColumns = floor(width / fontSize);
-          for (let i = 0; i < numColumns; i++) {
-            matrixColumns[i] = random(-1000, 0);
           }
-          // Initialize the snake: start with all segments at the center (0,0,0)
-          for (let i = 0; i < maxSnakeLength; i++) {
-            snake.push(createVector(0, 0, 0));
           }
         }
-        function draw() {
-          background(0);
-          // Set up some lights for 3D shading
-          ambientLight(50);
-          directionalLight(255, 255, 255, 0, -1, 0);
-          // Rotate the entire 3D scene slowly for an extra cool effect
-          rotateY(frameCount * 0.005);
-          rotateX(frameCount * 0.003);
-          // Update and draw our snake in 3D
-          updateSnake();
-          drawSnake();
-          // Draw the Matrix rain overlay on top (in 2D)
-          drawMatrixRain();
-        }
-        // Update the snake's position using Perlin noise for a fluid, organic motion
-        function updateSnake() {
-          t += 0.01;
-          // Compute new head position using noise to vary x, y, and z independently
-          let x = map(noise(t, 0), 0, 1, -width/3, width/3);
-          let y = map(noise(t, 100), 0, 1, -height/3, height/3);
-          let z = map(noise(t, 200), 0, 1, -300, 300);
-          let newHead = createVector(x, y, z);
-          snake.push(newHead);
-          // Maintain a fixed length by removing the tail segment
-          if (snake.length > maxSnakeLength) {
-            snake.shift();
           }
         }
-        // Draw the snake: each segment is rendered as a Matrix-style character,
-        // and every 10th segment is rendered as a heart emoji for extra love ❤️.
-        function drawSnake() {
-          for (let i = 0; i < snake.length; i++) {
-            let pos = snake[i];
-            push();
-            translate(pos.x, pos.y, pos.z);
-            // Every 10th segment, show a heart emoji instead of a random character
-            if (i % 10 === 0) {
-              textSize(fontSize + 4);
-              fill(255, 0, 100);
-              text("❤️", 0, 0);
-            } else {
-              fill(0, 255, 70);
-              textSize(fontSize);
-              let matrixChars = "01ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-              let char = matrixChars.charAt(floor(random(matrixChars.length)));
-              text(char, 0, 0);
-            }
-            pop();
           }
         }
-        // Draw a classic Matrix rain effect as a 2D overlay on top of the 3D scene
-        function drawMatrixRain() {
-          push();
-          // Reset to 2D drawing mode
-          resetMatrix();
-          // Shift the origin to the top-left corner
-          translate(0, 0);
-          textSize(fontSize);
-          fill(0, 255, 70);
-          for (let i = 0; i < numColumns; i++) {
-            let x = i * fontSize;
-            let y = matrixColumns[i];
-            let matrixChars = "01ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-            let char = matrixChars.charAt(floor(random(matrixChars.length)));
-            text(char, x, y);
-            matrixColumns[i] += fontSize;
-            // If the drop goes off the screen, reset it to the top with a random offset
-            if (matrixColumns[i] > height) {
-              matrixColumns[i] = random(-100, 0);
-            }
           }
-          pop();
         }
-        // When the window is resized, adjust the canvas and recalc matrix columns
-        function windowResized() {
-          resizeCanvas(windowWidth, windowHeight);
-          numColumns = floor(width / fontSize);
-          matrixColumns = [];
-          for (let i = 0; i < numColumns; i++) {
-            matrixColumns[i] = random(-1000, 0);
           }
         }
-        </script>
-      </body>
-    </html>
-    """
-    # Embed the HTML (with the p5.js sketch) into the Streamlit app.
-    st.components.v1.html(html_code, height=700, scrolling=True)
-if __name__ == '__main__':
-    create_app()

 import streamlit as st
+# Set wide layout
+st.set_page_config(layout="wide", page_title="Galaxian Snake Game", initial_sidebar_state="expanded")
+# Sidebar instructions
+st.sidebar.markdown("## Galaxian Snake Game Controls")
+st.sidebar.markdown(
+    """
+- **Controls:**
+    - **Q:** Move Up–Left
+    - **W:** Move Up
+    - **E:** Move Up–Right
+    - **A:** Move Left
+    - **S:** (Center) Continue current direction
+    - **D:** Move Right
+    - **Z:** Move Down–Left
+    - **X:** Move Down
+    - **C:** Move Down–Right
+- **Rules:**
+    - The snake moves on a grid and grows when it eats the alien food (👾).
+    - You must avoid colliding with the walls or yourself.
+    - Press **R** to restart after a game over.
+Have fun and enjoy the retro Galaxian vibe!
+"""
+)
+# p5.js snake game embedded as an HTML string
+html_code = r"""
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Galaxian Snake Game</title>
+    <!-- Include p5.js (with WEBGL disabled because we use 2D grid) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
+    <style>
+      body { margin: 0; padding: 0; overflow: hidden; background: black; }
+      canvas { display: block; margin: 0 auto; }
+    </style>
+  </head>
+  <body>
+    <script>
+      /*
+         Galaxian Snake Game
+         - The snake moves on a grid.
+         - Controls: Q, W, E, A, S, D, Z, X, C (with S meaning “no turn”).
+         - Food is represented as a retro alien (👾).
+         - A starfield background evokes classic Galaxian style.
+      */
+      // Game configuration
+      let tileSize = 20;
+      let cols, rows;
+      let snake;
+      let direction;  // {x: dx, y: dy} in grid units
+      let food;
+      let score;
+      let gameOver;
+      let moveCounter = 0;
+      let moveDelay = 8;  // lower => faster snake
+      // Starfield for background
+      let stars = [];
+      const numStars = 150;
+      function setup() {
+        createCanvas(windowWidth, windowHeight);
+        frameRate(30);
+        cols = floor(width / tileSize);
+        rows = floor(height / tileSize);
+        resetGame();
+        // Create starfield
+        for (let i = 0; i < numStars; i++) {
+          stars.push({
+            x: random(width),
+            y: random(height),
+            speed: random(0.5, 2),
+            size: random(1, 3)
+          });
+        }
+      }
+      function resetGame() {
+        snake = [];
+        // Start snake in the middle with length 3
+        let startX = floor(cols / 2);
+        let startY = floor(rows / 2);
+        snake.push({x: startX, y: startY});
+        snake.push({x: startX - 1, y: startY});
+        snake.push({x: startX - 2, y: startY});
+        // Initial direction: moving right
+        direction = {x: 1, y: 0};
+        placeFood();
+        score = 0;
+        gameOver = false;
+        moveCounter = 0;
+      }
+      // Place food (alien) at a random location not occupied by the snake
+      function placeFood() {
+        let valid = false;
+        let newFood;
+        while (!valid) {
+          newFood = {
+            x: floor(random(cols)),
+            y: floor(random(rows))
+          };
+          valid = true;
+          for (let seg of snake) {
+            if (seg.x === newFood.x && seg.y === newFood.y) {
+              valid = false;
+              break;
+            }
           }
+        }
+        food = newFood;
+      }
+      function draw() {
+        // Draw Galaxian–style starfield background
+        background(0);
+        noStroke();
+        fill(255);
+        for (let s of stars) {
+          ellipse(s.x, s.y, s.size);
+          s.y += s.speed;
+          if (s.y > height) {
+            s.y = 0;
+            s.x = random(width);
           }
         }
+        // Draw grid boundaries (optional: for visual style)
+        // stroke(40);
+        // for (let i = 0; i < cols; i++) {
+        //   line(i * tileSize, 0, i * tileSize, height);
+        // }
+        // for (let j = 0; j < rows; j++) {
+        //   line(0, j * tileSize, width, j * tileSize);
+        // }
+        // Game update if not over
+        if (!gameOver) {
+          moveCounter++;
+          if (moveCounter >= moveDelay) {
+            updateSnake();
+            moveCounter = 0;
           }
+        } else {
+          // Display Game Over message
+          textAlign(CENTER, CENTER);
+          textSize(64);
+          fill(255, 50, 50);
+          text("GAME OVER", width/2, height/2);
+          textSize(32);
+          text("Score: " + score + "  (Press R to Restart)", width/2, height/2 + 50);
         }
+        // Draw food as a retro alien emoji
+        textSize(tileSize);
+        textAlign(CENTER, CENTER);
+        text("👾", food.x * tileSize + tileSize/2, food.y * tileSize + tileSize/2);
+        // Draw snake as neon blocks
+        for (let i = 0; i < snake.length; i++) {
+          let seg = snake[i];
+          if (i == 0) {
+            fill(0, 255, 0);  // head bright green
+          } else {
+            fill(0, 180, 0);
           }
+          rect(seg.x * tileSize, seg.y * tileSize, tileSize, tileSize);
         }
+        // Draw score in top-left corner
+        fill(255);
+        textSize(16);
+        textAlign(LEFT, TOP);
+        text("Score: " + score, 10, 10);
+      }
+      // Update snake position and check collisions
+      function updateSnake() {
+        // Determine new head position
+        let head = snake[0];
+        let newHead = { x: head.x + direction.x, y: head.y + direction.y };
+        // Check wall collisions
+        if (newHead.x < 0 || newHead.x >= cols || newHead.y < 0 || newHead.y >= rows) {
+          gameOver = true;
+          return;
+        }
+        // Check self-collision
+        for (let seg of snake) {
+          if (seg.x === newHead.x && seg.y === newHead.y) {
+            gameOver = true;
+            return;
           }
         }
+        // Add new head
+        snake.unshift(newHead);
+        // Check food collision
+        if (newHead.x === food.x && newHead.y === food.y) {
+          score += 10;
+          placeFood();
+          // (Do not remove tail: snake grows)
+        } else {
+          // Remove tail (snake moves forward)
+          snake.pop();
+        }
+      }
+      // Map key presses to direction changes using the 3x3 layout:
+      // Q: (-1,-1), W: (0,-1), E: (1,-1)
+      // A: (-1, 0), S: (0,0) [no change], D: (1,0)
+      // Z: (-1, 1), X: (0,1), C: (1,1)
+      function keyPressed() {
+        if (gameOver && key.toLowerCase() === 'r') {
+          resetGame();
+          return;
+        }
+        // Only process if game is not over
+        if (gameOver) return;
+        let newDir = null;
+        let k = key.toLowerCase();
+        if (k === 'q') newDir = {x: -1, y: -1};
+        else if (k === 'w') newDir = {x: 0, y: -1};
+        else if (k === 'e') newDir = {x: 1, y: -1};
+        else if (k === 'a') newDir = {x: -1, y: 0};
+        else if (k === 's') newDir = {x: 0, y: 0}; // center: no change
+        else if (k === 'd') newDir = {x: 1, y: 0};
+        else if (k === 'z') newDir = {x: -1, y: 1};
+        else if (k === 'x') newDir = {x: 0, y: 1};
+        else if (k === 'c') newDir = {x: 1, y: 1};
+        // If a valid key was pressed and newDir is not the "no-turn" (0,0) command,
+        // update direction. Also disallow reversing (only if snake length > 1).
+        if (newDir) {
+          if (newDir.x === 0 && newDir.y === 0) {
+            // "S" was pressed: no turn, so do nothing.
+            return;
+          }
+          if (snake.length > 1) {
+            // Prevent reversing (i.e., newDir should not be exactly opposite of current)
+            if (newDir.x === -direction.x && newDir.y === -direction.y) {
+              return;
+            }
           }
+          direction = newDir;
         }
+      }
+      // Resize canvas on window resize
+      function windowResized() {
+        resizeCanvas(windowWidth, windowHeight);
+        cols = floor(width / tileSize);
+        rows = floor(height / tileSize);
+      }
+    </script>
+  </body>
+</html>
+"""
+st.components.v1.html(html_code, height=700, scrolling=False)