Redesign dino game to match Chrome T-Rex visual style

[Copilot]

The dino game used basic rectangles for all sprites. Updated to pixel-art rendering matching Chrome's T-Rex game.

Visual Changes

Sprites redrawn with pixel art:

• T-Rex: Body segments (tail, torso, neck, head), articulated legs with 5-frame alternating run cycle, ducking pose variant
• Cacti: Multi-segment stems with variable arm positions
• Pterodactyls: 8-frame wing flap animation
• Eyes: White background + black pupil for contrast on all poses

Chrome aesthetic:

• Background: #f7f7f7 → #fff
• Score: "Score: X" → 5-digit zero-padded format 00000-99999 (capped)
• Ground: Single line → line + textured dots
• UI: Removed shadows, rounded borders

Implementation

Created helper functions drawDino, drawCactus, drawPterodactyl using fillRect primitives:

const drawDino = (ctx, x, y, isDucking, frame) => {
  // Body segments
  ctx.fillRect(x + 8, y + 8, 16, 16);  // Torso
  ctx.fillRect(x, y + 16, 4, 4);       // Tail
  
  // Animated legs (alternates every 5 frames)
  const legFrame = Math.floor(frame / 5) % 2;
  if (legFrame === 0) {
    ctx.fillRect(x + 20, y + 24, 4, 6);  // Forward
  } else {
    ctx.fillRect(x + 10, y + 24, 4, 6);  // Back
  }
  // ...
};

Frame counter drives animations. CSS image-rendering: pixelated for crisp edges.

Screenshots

Before:

After:

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.