<!doctype html>
<title>Mini Dinosaur Game</title>
<style>
:root{--bg:#f7f7f7;--ground:#5c5c5c;--dino:#222;--ob:#2a8f2a}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
.wrapper{min-height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#fff,#eef);}
.game-card{width:min(900px,94vw);background:white;border-radius:12px;box-shadow:0 10px 30px rgba(20,20,40,0.08);padding:18px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
header h1{font-size:18px;margin:0}
.controls{font-size:13px;color:#555}
canvas{display:block;background:var(--bg);border-radius:6px;width:100%;height:200px}
footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:#444}
button{background:#0b74ff;color:white;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
button.secondary{background:#eee;color:#222}
.meta{display:flex;gap:12px;align-items:center}
@media (max-width:520px){ canvas{height:150px} }
</style>
Mini Dinosaur Game — (space / up = jump, down = duck, touch to jump)
Score: 0 • Best: 0
<canvas id="game" width="800" height="200"></canvas>
<footer>
<div class="meta">
<button id="playBtn">Play</button>
<button id="pauseBtn" class="secondary">Pause</button>
<button id="resetBtn" class="secondary">Reset</button>
</div>
<div style="color:#666">Tip: press <strong>R</strong> to restart after crash.</div>
</footer>
</div>
<script>
// Mini Dinosaur Game — Single file
// Author: ChatGPT (assistive example)
// Simple, clean, and self-contained. Drop this file in your browser and play.
(()=>{
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let W = canvas.width, H = canvas.height;
// Game state
let running = false;
let speed = 6; // base speed
let gravity = 0.85;
let spawnTimer = 0;
let frame = 0;
let score = 0;
let best = Number(localStorage.getItem('dinoBest')||0);
document.getElementById('best').textContent = best;
document.getElementById('score').textContent = score;
// Dino properties
const dino = {
x: 50,
y: H - 48,
w: 38,
h: 46,
vy: 0,
grounded: true,
ducking: false,
draw(){
ctx.save();
ctx.translate(this.x, this.y);
// body
ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--dino') || '#222';
const bodyH = this
<!doctype html>
<title>Mini Dinosaur Game</title> <style> :root{--bg:#f7f7f7;--ground:#5c5c5c;--dino:#222;--ob:#2a8f2a} html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial} .wrapper{min-height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#fff,#eef);} .game-card{width:min(900px,94vw);background:white;border-radius:12px;box-shadow:0 10px 30px rgba(20,20,40,0.08);padding:18px} header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} header h1{font-size:18px;margin:0} .controls{font-size:13px;color:#555} canvas{display:block;background:var(--bg);border-radius:6px;width:100%;height:200px} footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:#444} button{background:#0b74ff;color:white;border:0;padding:8px 12px;border-radius:8px;cursor:pointer} button.secondary{background:#eee;color:#222} .meta{display:flex;gap:12px;align-items:center} @media (max-width:520px){ canvas{height:150px} } </style>Mini Dinosaur Game — (space / up = jump, down = duck, touch to jump)