Create app.py

app.py

@@ -0,0 +1,105 @@
+import gradio as gr
+
+# ----------------- SNAKE GAME HTML + JS ----------------- #
+snake_game_html = """
+<style>
+  #gameCanvas {
+    background-color: #222;
+    display: block;
+    margin: 1em auto;
+    border: 3px solid white;
+    border-radius: 8px;
+  }
+  #instructions {
+    text-align: center;
+    color: white;
+    font-family: Arial, sans-serif;
+    margin-top: 0.5em;
+  }
+</style>
+
+<canvas id="gameCanvas" width="400" height="400"></canvas>
+<div id="instructions">Use Arrow Keys to move the snake. Eat the red squares!</div>
+
+<script>
+  const canvas = document.getElementById('gameCanvas');
+  const ctx = canvas.getContext('2d');
+
+  const grid = 20;
+  let count = 0;
+  let snake = { x: 160, y: 160, dx: grid, dy: 0, cells: [], maxCells: 4 };
+  let apple = { x: 320, y: 320 };
+  let score = 0;
+
+  function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'ArrowLeft' && snake.dx === 0) { snake.dx = -grid; snake.dy = 0; }
+    if (e.key === 'ArrowUp' && snake.dy === 0) { snake.dx = 0; snake.dy = -grid; }
+    if (e.key === 'ArrowRight' && snake.dx === 0) { snake.dx = grid; snake.dy = 0; }
+    if (e.key === 'ArrowDown' && snake.dy === 0) { snake.dx = 0; snake.dy = grid; }
+  });
+
+  function gameLoop() {
+    requestAnimationFrame(gameLoop);
+    if (++count < 4) return;
+    count = 0;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    snake.x += snake.dx;
+    snake.y += snake.dy;
+
+    // Wrap snake position
+    if (snake.x < 0) snake.x = canvas.width - grid;
+    if (snake.x >= canvas.width) snake.x = 0;
+    if (snake.y < 0) snake.y = canvas.height - grid;
+    if (snake.y >= canvas.height) snake.y = 0;
+
+    snake.cells.unshift({x: snake.x, y: snake.y});
+    if (snake.cells.length > snake.maxCells) snake.cells.pop();
+
+    // Draw apple
+    ctx.fillStyle = 'red';
+    ctx.fillRect(apple.x, apple.y, grid-1, grid-1);
+
+    // Draw snake
+    ctx.fillStyle = 'lime';
+    snake.cells.forEach((cell, index) => {
+      ctx.fillRect(cell.x, cell.y, grid-1, grid-1);
+
+      // Check collision with apple
+      if (cell.x === apple.x && cell.y === apple.y) {
+        snake.maxCells++;
+        score++;
+        apple.x = getRandomInt(0, 20) * grid;
+        apple.y = getRandomInt(0, 20) * grid;
+      }
+
+      // Check collision with self
+      for (let i = index + 1; i < snake.cells.length; i++) {
+        if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
+          alert("Game Over! Score: " + score);
+          document.location.reload();
+        }
+      }
+    });
+
+    // Draw score
+    ctx.fillStyle = 'white';
+    ctx.font = '16px Arial';
+    ctx.fillText('Score: ' + score, 10, 20);
+  }
+
+  requestAnimationFrame(gameLoop);
+</script>
+"""
+
+# ----------------- GRADIO UI ----------------- #
+with gr.Blocks() as demo:
+    gr.Markdown("## 🐍 Snake Game")
+    gr.Markdown("Control the snake with arrow keys and eat the red apples to grow!")
+    gr.HTML(snake_game_html)
+
+demo.launch()