Spaces:
Running
Running
| <html lang="zh-Hant"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="color-scheme" content="dark"> | |
| <title>瀏覽器版 Pygame 執行器</title> | |
| <style> | |
| :root { color-scheme: dark; font: 14px/1.5 system-ui, sans-serif; background: #111923; color: #e8edf4; } | |
| * { box-sizing: border-box; } | |
| html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } | |
| body { display: grid; grid-template-rows: auto minmax(0, 1fr); } | |
| .runner-note { padding: 8px 12px; border-bottom: 1px solid #303a49; color: #aeb9c8; font-size: 12px; } | |
| .stage { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 10px; } | |
| canvas { display: block; width: min(100%, 800px); height: auto; max-height: 100%; aspect-ratio: 4 / 3; background: #090e14; outline: none; } | |
| #runnerMessage { max-width: 38rem; color: #c4cfdb; text-align: center; white-space: pre-wrap; } | |
| #runnerMessage[hidden] { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="runner-note">瀏覽器版 Pygame · 點遊戲畫面後可用鍵盤操作</div> | |
| <main class="stage"> | |
| <canvas id="canvas" width="640" height="480" tabindex="0" aria-label="Pygame 遊戲畫面"></canvas> | |
| <p id="runnerMessage" aria-live="polite">正在準備 Pygame…</p> | |
| </main> | |
| <script src="/classroom-assets/vendor/pyodide/pyodide.js"></script> | |
| <script src="/classroom-assets/pygame-runner.js?v=2026fall-1"></script> | |
| </body> | |
| </html> | |