commit 93958c02a40ff2b64c621172eb2ef4fbc789e873 Author: OpenClaw Engineer Date: Tue Mar 3 20:39:07 2026 -0600 chore: scaffold Dino Land with canvas base game loop diff --git a/index.php b/index.php new file mode 100644 index 0000000..77624c6 --- /dev/null +++ b/index.php @@ -0,0 +1,34 @@ + + + + + + Dino Land + + + +
+
+
Score: 0
+
+ + + + + + + + diff --git a/js/game.js b/js/game.js new file mode 100644 index 0000000..e33ce23 --- /dev/null +++ b/js/game.js @@ -0,0 +1,28 @@ +const canvas = document.getElementById('game'); +const ctx = canvas.getContext('2d'); + +const state = { + running: true, + lastTs: performance.now() +}; + +function drawBackground() { + ctx.fillStyle = '#88d34f'; + ctx.fillRect(0, 420, canvas.width, 120); +} + +function tick(ts) { + if (!state.running) return; + const dt = Math.min((ts - state.lastTs) / 1000, 0.05); + state.lastTs = ts; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawBackground(); + + requestAnimationFrame(tick); +} + +requestAnimationFrame((ts) => { + state.lastTs = ts; + requestAnimationFrame(tick); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..527c0d9 --- /dev/null +++ b/styles.css @@ -0,0 +1,48 @@ +* { box-sizing: border-box; } +body { + margin: 0; + font-family: Arial, sans-serif; + background: linear-gradient(#6fd3ff, #d7f7ff); + color: #102026; +} +#hud { + position: fixed; + top: 12px; + left: 12px; + right: 12px; + display: flex; + justify-content: space-between; + font-size: 24px; + font-weight: 700; + pointer-events: none; + z-index: 2; +} +#game { + display: block; + margin: 0 auto; + width: min(100vw, 1200px); + height: auto; + border: 2px solid #1b3a47; + background: #b5ecff; +} +#deathScreen { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.65); + display: grid; + place-items: center; + z-index: 4; +} +.panel { + background: #fff; + border-radius: 12px; + padding: 20px; + width: min(92vw, 460px); +} +.hidden { display: none !important; } +button, input { + font-size: 16px; + padding: 8px 10px; + margin-top: 8px; +} +ol { padding-left: 22px; }