Unblocked Coding Games
Eleven games that teach real programming skills: drag-and-drop blocks, CSS layout, SQL queries, JavaScript and git. Use them as a path, from a first maze of blocks to code you would write on the job.
- 11 games
- 0 downloads needed
- $0 to play
Block Code Duck PondCodingWrite programs that steer a cannon-armed duck, first with blocks and then in real JavaScript.
Block Code MazeCodingStack drag-and-drop code blocks that walk an astronaut to the flag across ten mazes.
Block Code MusicCodingProgram a melody note by note with blocks and learn functions by turning it into a round.
Block Code Turtle ArtCodingSnap blocks together to steer a pen-carrying turtle and draw shapes, stars and a moon.
CSS DinerCodingType CSS selectors to grab the right food off a table, from basic tags up to :nth-child and attributes.
CSS Grid Carrot PatchCodingWrite CSS grid rules to water the carrots and poison the weeds across 28 garden lessons.
Elevator SagaCodingControl a tower's lifts with your own JavaScript and pass 18 timed transport challenges.
Flexbox Lily PondCodingWrite CSS flexbox rules to hop each frog onto its matching lily pad across 24 levels.
Learn Git BranchingCodingType git commands and reshape a live commit tree to match each level's target. Learn by doing.
Robot CoderCodingPlan a robot's whole program before it runs, using moves, turns, pickups and loops to deliver colored items.
SQL Detective MysteryCodingWrite real SQL queries to sift police reports, interviews and gym logs until you can name the killer.Step one: blocks, no typing
If you have never coded, start with blocks. Each block is one instruction, so there are no typos to fix.
Block Code Maze walks an astronaut through ten mazes and introduces loops and if-checks. Block Code Turtle Art teaches loops by drawing shapes, stars and a moon. Block Code Music teaches functions by turning a melody into a round. Robot Coder asks you to plan a robot's whole program before it runs, then explains what broke.
Step two: from blocks to JavaScript
Block Code Duck Pond is the bridge. Each challenge is solved once with blocks, and the very next level asks for the same idea typed out in JavaScript. You aim a cannon-armed duck with angles and scans.
When you are comfortable, Elevator Saga hands you a code editor and a building full of riders. You write event handlers to move the cars, across 18 timed challenges. It is a real programming puzzle.
Web design with CSS
Three games teach the CSS that styles web pages. Flexbox Lily Pond moves frogs onto lily pads across 24 levels and has a colorblind mode. CSS Grid Carrot Patch teaches grid layout over 28 garden lessons. CSS Diner has 32 levels of selectors, from simple tags to :nth-of-type and attribute selectors.
Keep MDN's guide to CSS selectors open in another tab if you want the official reference.
Data and version control
SQL Detective Mystery sets a murder in SQL City. You write real queries against police reports and interviews until you can name the killer. Learn Git Branching redraws a commit tree every time you type a command, so merge and rebase finally make sense. It runs a simulated repository, so nothing touches real files.
Devices and pacing
A Chromebook or laptop is ideal. Elevator Saga and Learn Git Branching need a keyboard, and CSS Diner is much easier with one. Flexbox Lily Pond, CSS Grid Carrot Patch and Robot Coder work on a tablet. Most of these are long sessions, so plan a class period rather than a five-minute break. For more logic, see puzzle games.
Coding Games: common questions
What order should a class play these in?
A sensible order is Block Code Maze, then Turtle Art and Music, then Duck Pond to make the jump to JavaScript. Older students can then take on Flexbox Lily Pond, CSS Grid Carrot Patch, CSS Diner and SQL Detective Mystery.
Is Coding Golf a coding game?
No. Despite the name, Coding Golf is an 18-hole golf game with clubs, wind and a swing meter. It sits in sports games.
Do these teach real languages?
Yes. Duck Pond and Elevator Saga use JavaScript, the CSS games use real CSS, SQL Detective runs real SQL in the page, and Learn Git Branching uses actual git commands.