Dive into a vibrant collection of interactive web games built purely with HTML, CSS, and JavaScript!
This repository is a playground for both fun and learning. Each game is designed to be simple, engaging, and educational, serving as a fantastic resource for:
- Learners: See practical examples of HTML, CSS, and JavaScript in action.
- Developers: Explore simple game mechanics and get inspired for your own projects.
- Everyone: Enjoy some classic, lightweight browser-based fun!
Get ready to click, type, and play! Here are the games currently live in our collection:
Pop the balloons before they float away! Test your speed and accuracy in this colourful and addictive clicker game.
- Description: Balloons float up the screen at varying speeds. Click them to score points before they escape! Simple, fast-paced fun.
- Tech: HTML, CSS (Animations), JavaScript (DOM Manipulation, Event Listeners, Timers)
- Folder:
balloon_pop_game/
(Highly Recommended: Add a GIF here!)
Click image or link above to see the code!
➡️ Play Balloon Pop Mania LIVE! ⬅️
Sharpen your spelling skills! Listen to the word (or see it!) and type it correctly to score points. Great for kids and language learners!
- Description: A word is presented (potentially with audio later). The player needs to type the correct spelling within a time limit or number of attempts.
- Tech: HTML, CSS, JavaScript (String Manipulation, Event Listeners, Basic Logic)
- Folder:
spell_game/
(Highly Recommended: Add a GIF here!)
Click image or link above to see the code!
➡️ Play Spell Master Challenge LIVE! ⬅️
Combine tiles to reach 2048 and beyond! Explore the cosmic levels!
- Description: 2048 is an addictive single-player sliding tile puzzle game where you combine numbered tiles to reach the elusive 2048 tile - and beyond! Slide tiles on a 4×4 grid using your arrow keys (or swipe on touch devices) to merge matching numbers and rack up your score.
- Tech: HTML, CSS, JavaScript (String Manipulation, Event Listeners, Basic Logic)
- Folder:
2048_game/
(Highly Recommended: Add a GIF here!)
Click image or link above to see the code!
➡️ Play 2048 game LIVE! ⬅️ V1
➡️ Play 2048 game LIVE! ⬅️ V2
- Simplicity: Focus on clear, understandable code using vanilla HTML, CSS, and JavaScript. No frameworks needed!
- Education: Provide working examples for those learning web development fundamentals.
- Interaction: Create engaging experiences directly in the browser.
- Open Source: Encourage collaboration and learning within the community.
These games are built with the fundamental building blocks of the web:
- HTML5: For structure and content.
- CSS3: For styling, layout, and animations.
- JavaScript (ES6+): For game logic, interactivity, and DOM manipulation.
Want to run these games on your own machine? It's easy!
- Clone the Repository:
git clone https://github.com/MariasStory/htmlGames.git
- Navigate to a Game Folder:
cd htmlGames/balloon_pop_game # or cd htmlGames/spell_game
- Open the HTML File:
Simply open the
index.htmlfile within the chosen game's folder in your web browser (like Chrome, Firefox, Safari, Edge).
That's it! No complex builds or dependencies required.
This project thrives on community involvement! We welcome contributions of all kinds:
- 💡 New Game Ideas: Have an idea for a simple, educational HTML game? Open an Issue!
- 🐛 Bug Fixes: Found something broken? Report it via Issues or submit a Pull Request!
- ✨ Feature Enhancements: Ways to improve existing games? Let us know!
- 🎮 New Game Submissions: Want to add your own vanilla HTML/CSS/JS game? Fork the repo, create your game in a new subfolder, and submit a Pull Request!
Please read our CONTRIBUTING.md guide (you might need to create this file) for more detailed steps.
- Adding scoring systems and high scores (using
localStorage). - Implementing difficulty levels.
- Adding sound effects or background music.
- More game types: Memory Match, Simple Quiz, Typing Tutor, etc.
- Mobile responsiveness improvements.
This project is licensed under the MIT License - see the LICENSE file for details.
Happy Coding and Playing! 😄