---
layout: default
title: Games - Shivering
description: Play classic HTML5 Canvas games including Snake and other retro favorites. All games are built with pure JavaScript and run directly in your browser.
---

<h1>🎮 Games</h1>
<p>Classic games built with HTML5 Canvas</p>

<div class="games-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px;">
  <a href="snake/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Snake icon">🐍</span> Snake</h2>
    <p style="margin: 0; font-size: 14px;">Classic snake game. Eat the food, grow longer, don't hit the walls or yourself!</p>
  </a>

  <a href="tetris/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Brick icon">🧱</span> Tetris</h2>
    <p style="margin: 0; font-size: 14px;">Stack the falling blocks to clear lines. Speed increases with each level!</p>
  </a>

  <a href="pong/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Ping pong icon">🏓</span> Pong</h2>
    <p style="margin: 0; font-size: 14px;">The classic arcade game. Move your paddle and beat the CPU!</p>
  </a>

  <a href="breakout/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Brick icon">🧱</span> Breakout</h2>
    <p style="margin: 0; font-size: 14px;">Break all the bricks with your ball. Don't let it fall!</p>
  </a>

  <a href="space-invaders/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Alien icon">👾</span> Space Invaders</h2>
    <p style="margin: 0; font-size: 14px;">Defend against waves of alien invaders. Shoot them down before they reach you!</p>
  </a>

  <a href="flappy/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Bird icon">🐦</span> Flappy Bird</h2>
    <p style="margin: 0; font-size: 14px;">Tap to flap through the pipes. How far can you go?</p>
  </a>

  <a href="2048/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Numbers icon">🔢</span> 2048</h2>
    <p style="margin: 0; font-size: 14px;">Merge tiles to reach 2048. Swipe to combine matching numbers!</p>
  </a>

  <a href="memory/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Brain icon">🧠</span> Memory Match</h2>
    <p style="margin: 0; font-size: 14px;">Find all matching pairs. Test your memory skills!</p>
  </a>

  <a href="minesweeper/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Bomb icon">💣</span> Minesweeper</h2>
    <p style="margin: 0; font-size: 14px;">Clear the board without hitting a mine. Use logic and careful clicking!</p>
  </a>

  <a href="wordle/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Memo icon">📝</span> Wordle</h2>
    <p style="margin: 0; font-size: 14px;">Guess the 5-letter word in 6 tries. Green = correct, yellow = wrong spot!</p>
  </a>

  <a href="asteroids/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Comet icon">☄️</span> Asteroids</h2>
    <p style="margin: 0; font-size: 14px;">Classic space shooter. Destroy asteroids and survive as long as you can!</p>
  </a>
</div>

<style>
  .games-grid a:focus {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
  }

  @media (max-width: 480px) {
    .games-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }

    .games-grid a {
      padding: 12px !important;
    }

    .games-grid h2 {
      font-size: 1.1rem;
    }

    .games-grid p {
      font-size: 13px !important;
    }
  }
</style>