Tom and Jerry Chase

A single-page Tom and Jerry chase built with plain HTML, CSS, and JavaScript. Jerry moves one random orthogonal step per turn, Tom follows with a greedy Manhattan-distance chase, and the board advances automatically until Tom catches Jerry.

Highlights

• Single-file experience in index.html
• Responsive 10x10 board with emoji characters
• Auto-advancing turn loop with a replay button
• In-page info panel plus linked documentation hub
• Static-site friendly for Vercel deployment

Run Locally

No install step is required.

1. Open index.html directly in a browser, or
2. Serve the folder with a simple static server such as:

python3 -m http.server 8000

Then open http://localhost:8000.

Project Structure

.
├── index.html
├── README.md
└── docs
    ├── architecture.md
    ├── customization.md
    ├── index.html
    └── vercel-deployment.md

Documentation Map

• Documentation hub
• Architecture notes
• Customization guide
• Vercel deployment guide

How the Chase Works

• Jerry moves first.
• Jerry chooses a random valid neighbor from up, down, left, or right.
• Tom moves second.
• Tom chooses the neighboring cell that minimizes Manhattan distance to Jerry.
• If Jerry lands on Tom or Tom lands on Jerry, the chase ends immediately.

Vercel Notes

This project is static and does not need a build step in its current form. index.html is the main entry point, and docs/index.html provides a browsable documentation page that is linked from the main experience.