Update app.py

app.py

@@ -1,46 +1,51 @@
 import gradio as gr
 
 def snake_game():
-    # This function will just return the HTML since no user input is needed for this simple demo
-    return f"""
-    <div id="gameCanvas" style="width:400px;height:400px;border:1px solid black;"></div>
+    return """
+    <style>
+        body { margin: 0; padding: 0; }
+        #gameCanvas { border: 1px solid black; }
+    </style>
+    <canvas id="gameCanvas" width="400" height="400"></canvas>
     <script>
-    // Insert the JavaScript code here (Remove the script tags as they're not needed within this context)
-    let canvas = document.getElementById('gameCanvas');
-    let ctx = canvas.getContext('2d');
-    let snake = [{x: 10, y: 10}];
-    let food = {{x: 15, y: 15}};
-    let gameLoop;
-
-    function init() {{
-        gameLoop = setInterval(game, 100);
-    }}
-
-    function game() {{
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        snake.unshift({{x: snake[0].x, y: snake[0].y}});
-        snake[0].x += 1;
-        ctx.fillStyle = "green";
-        snake.forEach(part => {{
-            ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
-        }});
-
-        ctx.fillStyle = "red";
-        ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
-
-        if(snake[0].x == food.x && snake[0].y == food.y) {{
-            food.x = Math.floor(Math.random() * 40);
-            food.y = Math.floor(Math.random() * 40);
-        }} else {{
-            snake.pop();
-        }}
-    }}
-
-    init();
+        let canvas = document.getElementById('gameCanvas');
+        let ctx = canvas.getContext('2d');
+        let snake = [{x: 10, y: 10}];
+        let food = {x: 15, y: 15};
+        let gameLoop;
+
+        function init() {
+            gameLoop = setInterval(game, 100);
+        }
+
+        function game() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            snake.unshift({x: snake[0].x, y: snake[0].y});
+            snake[0].x += 1; // Simple movement for demonstration
+            if(snake[0].x > 39) snake[0].x = 0; // Wrap around
+
+            ctx.fillStyle = "green";
+            snake.forEach(part => {
+                ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
+            });
+
+            ctx.fillStyle = "red";
+            ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
+
+            if(snake[0].x == food.x && snake[0].y == food.y) {
+                food.x = Math.floor(Math.random() * 40);
+                food.y = Math.floor(Math.random() * 40);
+            } else {
+                snake.pop();
+            }
+        }
+
+        // Start the game
+        init();
     </script>
     """
 
 with gr.Blocks() as demo:
-    gr.HTML(snake_game())
+    gr.HTML(snake_game(), elem_id="snake-game-block")
 
 demo.launch()