A collection of interactive web-based mini-games and UI components built with vanilla HTML, CSS, and JavaScript. Each project includes an original implementation alongside an enhanced modification — designed to demonstrate progressive front-end development techniques through practical, hands-on game building.
- Project Structure
- Projects Overview
- Tech Stack
- Getting Started
- Learning Objectives
- Contributing
- Author
Game-Tutorial/
│
├── Click Counter/
│ ├── index.html
│ ├── index.css
│ └── index.js
│
├── Click Counter modification/
│ ├── index.html
│ ├── index.css
│ └── index.js
│
├── Colour-Picker/
│ ├── index.html
│ ├── index.css
│ └── index.js
│
├── Colour-Picker-modification/
│ ├── index.html
│ ├── index.css
│ └── index.js
│
├── Memory Flip Card/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── Registration-Form/
│ ├── index.html
│ ├── index.css
│ └── index.js
│
├── Todo-list/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── Typing-speed-test/
│ ├── index.html
│ ├── index.css
│ └── script.js
│
├── Whack-a-Mole/
│ ├── index.html
│ ├── index.css
│ └── index.js
│
└── Whack-a-Mole-modification/
├── index.html
├── index.css
└── index.js
An interactive counter application built as a foundation for understanding DOM manipulation and event handling in JavaScript.
- Increment, decrement, and reset counter functionality
- Visual feedback on every user interaction
- Modification version introduces speed multipliers, score tracking, and enhanced animations
A dynamic colour selection and palette management tool.
- Pick colours via sliders or direct hex input
- Live colour preview updated in real time
- One-click copy of colour codes to clipboard
- Modification version introduces saved palettes, gradient generator, and colour history
A classic card-matching memory game focused on logic, timing, and state management.
- Flip cards to find and match pairs
- Move counter and countdown timer
- Fisher-Yates shuffle algorithm for fully randomized card placement
- Win detection with a completion screen
A production-style user registration form with robust client-side validation.
- Real-time input validation on all fields
- Password strength indicator
- Descriptive error messages and success feedback
- Clean, accessible UI with focus on usability
A fully functional task management application demonstrating CRUD operations in JavaScript.
- Create, read, update, and delete tasks
- Mark tasks as complete with visual distinction
- Filter view by status: All, Active, or Completed
- Session-persistent task state
A real-time typing performance analyser measuring speed and accuracy under timed conditions.
- Live WPM (Words Per Minute) calculation
- Accuracy percentage computed on every keystroke
- Configurable countdown timer
- Multiple difficulty levels with varying passage complexity
An arcade-style reaction game implementing randomized game loops and progressive difficulty.
- Randomized mole appearances with no repeating patterns
- Live score tracking with session high score
- Speed increases progressively as the score rises
- Modification version adds bombs, power-ups, and a lives system
| Technology | Purpose |
|---|---|
| HTML5 | Semantic document structure and markup |
| CSS3 | Styling, keyframe animations, and layout |
| JavaScript ES6+ | Game logic, DOM manipulation, and state |
No external frameworks, libraries, or dependencies. Every project runs entirely on native browser APIs.
- Any modern web browser (Chrome, Firefox, Edge, or Safari)
- No installation or build process required
# Clone the repository
git clone https://github.com/mananjani2102/Game-Tutorial.git
# Navigate into the directory
cd Game-Tutorial
# Open any project — for example:
cd "Whack-a-Mole"
start index.html # Windows
open index.html # macOS
xdg-open index.html # LinuxAlternatively, double-click any index.html file directly to open it in your default browser.
This repository is structured to help developers progressively build competency in the following areas:
- DOM selection, traversal, and manipulation
- Browser event handling including click, keyboard, and timer events
- CSS animations, transitions, and responsive design patterns
- Game loop design and client-side state management
- Client-side form validation and user feedback patterns
- Writing modular, maintainable vanilla JavaScript
- Refactoring and extending existing codebases (base vs. modification projects)
Contributions, improvements, and new game additions are welcome.
# Step 1 — Fork the repository on GitHub
# Step 2 — Clone your fork
git clone https://github.com/your-username/Game-Tutorial.git
# Step 3 — Create a new feature branch
git checkout -b feature/your-feature-name
# Step 4 — Make your changes and commit
git add "your-file"
git commit -m "add: brief description of your change"
# Step 5 — Push your branch
git push origin feature/your-feature-name
# Step 6 — Open a Pull Request on GitHubPlease ensure your code is clean, well-commented, and consistent with the existing project structure before submitting a pull request.
Manan Jani
