HTML/CSS and JavaScript Games 🎮

This repository contains a collection of 32 mini games built with vanilla HTML, CSS, and JavaScript. 🎯🕹

Features

• 32 Interactive Games – A diverse collection of classic and modern games
• Vanilla JavaScript – No frameworks, pure game logic and animation
• Responsive Design – Playable on desktop and mobile browsers
• Local Tailwind CSS – Tailwind utility classes compiled locally (no CDN dependency)
• Local Vendor Scripts – Three.js and Vanta.js loaded from local /vendor directory
• Sound Effects – Web Audio API for retro game sounds

Setup

Installation

# Install dependencies
npm install

# Build Tailwind CSS (one-time)
npm run build:css

# For development with live CSS rebuild
npm run watch:css

Running Locally

1. Open index.html in your browser, or
2. Use VS Code Live Server extension (right-click index.html → "Open with Live Server")

Games Included

#	Game	#	Game
01	Candy Crush Game	17	Typing Game
02	Archery Game	18	Hangman Game
03	Speed Typing Game	19	Flappy Bird Game
04	Breakout Game	20	Crossy Road Game
05	Minesweeper Game	21	2048 Game
06	Tower Blocks	22	Dice Roll Simulator
07	Ping Pong Game	23	Shape Clicker Game
08	Tetris Game	24	Typing Game
09	Tilting Maze Game	25	Speak Number Guessing Game
10	Memory Card Game	26	Fruit Slicer Game
11	Rock Paper Scissors	27	Quiz Game
12	Type Number Guessing Game	28	Emoji Catcher Game
13	Tic Tac Toe	29	Whack A Mole Game
14	Snake Game	30	Simon Says Game
15	Connect Four Game	31	Moonlander Game
16	Insect Catch Game	32	Pac-Man Game

Project Structure

├── index.html                 # Main landing page
├── package.json              # NPM dependencies & scripts
├── tailwind.config.js         # Tailwind CSS configuration
├── postcss.config.js          # PostCSS configuration
├── src/
│   └── styles.css             # Input CSS with Tailwind directives
├── dist/
│   └── styles.css             # Compiled Tailwind CSS (generated)
├── vendor/
│   ├── three.min.js           # Three.js library (local)
│   └── vanta.birds.min.js     # Vanta.js library (local)
└── [01-32]-*/
    ├── index.html
    ├── script.js (or index.js)
    └── style.css

Technologies

• HTML5 – Canvas API for game rendering
• CSS3 – Animations and responsive layouts
• JavaScript (ES6+) – Game logic, collision detection, AI
• Tailwind CSS – Utility-first styling (local build)
• Web Audio API – Sound effects
• Canvas 2D – Graphics rendering

Development

To add or modify games:

1. Create a new folder numbered sequentially (e.g., 33-Your-Game/)
2. Add index.html, script.js (or index.js), and style.css
3. Link it from the main index.html
4. Test locally with Live Server

Notes

• All games are self-contained and can be played offline
• No backend server required
• Browser compatibility: Modern browsers with Canvas and Web Audio support

Based on https://github.com/he-is-talha/html-css-javascript-games/

License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.