Spot the Difference Game

Description

A browser-based game where players find differences between two side-by-side images. This casual game offers a relaxing experience with built-in help features to assist players when they struggle to spot differences.

Features

• Find differences between two images
• No time limit
• User-friendly help system
• Background music toggle
• Fullscreen mode
• Multiple difficulty levels

Technologies Used

• TypeScript
• Vite.js
• Canvas 2D
• Web Audio API
• Native JavaScript

Project Structure

.
├── .git
├── .github
├── .gitignore
├── dist
├── node_modules
├── public
├── src
├── types
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── vite.config.js
└── tsconfig.json

Prerequisites

• Node.js (recommended latest LTS version)
• npm

Installation

1. Clone the repository

   git clone https://github.com/YourUsername/SpotDiff-Vite.git

2. Navigate to the project directory

   cd SpotDiff-Vite

3. Install dependencies

   npm install

Running the Game

• Development mode:

  npm run dev

• Build for production:

  npm run build

• Preview production build:

  npm run preview

Deployment

The game is set up for GitHub Pages deployment:

npm run deploy

Future Roadmap

• Add more game levels/picture sets
• Implement simple progress tracking
• Potential lightweight progress saving mechanism

Performance

Optimized to use minimal PC resources with efficient rendering and asset management.

License

MIT License

Copyright (c) 2024 Denis Timofijuk

Author

Denis Timofijuk

Links

• Play Online