JavaScript DOM & Canvas Games — 100 Mini Projects (Vanilla JS)
A collection of 100 interactive mini-games, visual challenges, and DOM/Canvas exercises built with pure JavaScript — no frameworks, no libraries, no build tools.
This project is designed for:
Learners who want hands-on practice
Teachers looking for classroom-ready materials
Developers brushing up on JavaScript fundamentals
Anyone building a portfolio with real, interactive UI projects
Each exercise is fully self-contained and can be run directly in any browser.
🚀 Features
100+ interactive DOM & Canvas coding challenges
All projects built using Vanilla JavaScript, HTML, and CSS
Each exercise teaches a unique concept
Includes timers, animations, physics, drag & drop, audio, grids, randomization, and more
Beginner-friendly structure
Zero dependencies
Works offline
📦 Repository Structure
Depending on how you exported, this repo may be organized as:
Option A — Single Files per 10 Exercises /dom_games_01_10/ /dom_games_11_20/ /dom_games_21_30/ ... /dom_games_91_100/
Each folder contains:
index.html README.md (per set)
Option B — One-file-per-exercise Structure /ex01/ /ex02/ /ex03/ ... /ex100/
Each exercise folder contains:
index.html script.js (if split) README.md (optional)
Option C — Mega Combined File /all_100/ index.html README.md
This is the single-file version containing all 100 games with a built-in mini test harness.
✔️ This README works for all structures.
🧠 Learning Outcomes
Across 100 exercises, learners will build real intuition for:
✔️ DOM Manipulation
Creating, removing, updating, and styling elements dynamically.
✔️ Events
Keydown, keyup, click, pointer, drag & drop, resize, input, timers.
✔️ Canvas 2D
Drawing shapes, particles, animations, collisions, charts.
✔️ Game Logic
State machines, difficulty scaling, win conditions, scoring systems.
✔️ Algorithms
Sorting, shuffling, reaction timing, minimax AI (Tic-Tac-Toe), path logic.
✔️ UI Programing
Grids, forms, color pickers, sliders, dynamic layouts.
✔️ Web APIs
Web Audio API, ResizeObserver, localStorage persistence.
This set is ideal for building a strong foundation in front-end development through interactive problem-solving.
📚 Exercise Index (1–100)
Below is a complete index of all the projects. Descriptions are concise; each exercise card in the HTML files includes fuller details.
1–10: DOM Basics & Events
Button Click Counter
Color Switcher
Image Toggle
Modal Popup
Keyboard Movement Box
Basic Memory Game
Reaction Button
Random Quote Machine
Typing Mirror
Simple Drag Box
11–20: DOM + Timing
Moving Target
Number Guess
Word Scramble
Stroop Color Challenge
Hover Path Maze
Key Reaction Tester
Exact Fill Bar
Sequence Memory
Resize to Fit
Treasure Grid (localStorage)
21–30: Interactivity & Layout
Slider Size Control
Tap-the-Box
Random Grid Maker
Countdown Quiz
Flash Squares
Build-a-Pattern
Cursor Trail Dots
Click Heatmap
Tip Calculator
Drag-to-Reorder List
31–40: Canvas Intros
Bouncing Ball
Canvas Painter
Falling Blocks
Breakout (Mini)
Simple Radar Sweep
Color Flood Fill
Canvas Spritesheet Walker
Line Drawing Tool
Starfield Simulation
Snowfall Animation
41–50: Mixed DOM + Canvas
Bubble Shooter (Simple)
Auto Maze Generator
Stopwatch
Morse Code Trainer
Firework Bursts
Pixel Explosion
Pong (Mini)
Image Scatter
Sorting Visualizer
Data Bar Visualizer
51–60: Speed, Timing, & Data
Aim Trainer
Grid Tap Test
Random Path Walker
Line Rider (Simple)
Memory Squares (Advanced)
Gradient Generator
Canvas Clock
Array Visualizer
Node-Link Drawer
Soundboard Buttons
61–70: Advanced Mechanics
Maze Runner
Snake Game (Mini)
Asteroid Field
Dropdown Quiz Engine
Paddle Challenge
Word Meteor Shower
Drag Physics Blocks
Emoji Rain
Mirror Symmetry Drawer
Gravity Sand Simulation
71–80: Canvas Physics & Logic
Bubble Orbit
Laser Pointer Simulator
Shape Builder
Micro Platformer
4-Color Pattern Grid
Target Spinner
Towers of Hanoi (3 Disks)
Simple RTS Unit Mover
Color Target Spinner
Pipe Connect Puzzle
81–90: Geometry, Audio & Animation
Bubble Pop Challenge
Word Builder Puzzle
Platform Jumper (Mini)
Color Mixer Lab
AI Tic-Tac-Toe (Minimax)
Falling Numbers Speed Test
Light Reflection Simulator
Path Painter Maze
Audio Synth Keys
Chart Race Animator
91–100: Physics, Rhythm & Simulation
Particle Fountain
Emoji Drag Maze
Orbit Simulator
Typing Flash Trainer
Memory Flip Grid
Emoji Reaction Tester
Asteroid Dodge
Pixel Art Painter
Rhythm Tap Game
Physics Blocks Sandbox
Simply open any index.html file in your browser:
No server required
No installation
Works offline
Chrome, Edge, Firefox, Safari compatible
🧪 Testing (when included)
Most sets include a Run All Tests button at the bottom.
This is a basic mini harness that checks if:
Elements load
Buttons trigger correctly
Canvases render
Game loops start
It’s not meant to validate deep logic — just to ensure no wiring is broken.
🤝 Contributing
If you'd like to:
Add new exercises
Submit improvements
Convert the games into standalone modules
Create a TypeScript version
Add unit tests
Pull requests are welcome!
📜 License
MIT License — feel free to modify, use, or teach from these examples.
🌐 Author
Laurence “Lars” Svekis basescripts.com Google Developer Expert — Web & Workspace