{"id":9226,"date":"2022-09-21T09:33:28","date_gmt":"2022-09-21T08:33:28","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=9226"},"modified":"2025-12-08T09:39:09","modified_gmt":"2025-12-08T09:39:09","slug":"18-websites-play-games-learn-code","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/18-websites-play-games-learn-code\/","title":{"rendered":"18 websites where you can play games &#8211; and learn code"},"content":{"rendered":"\n<p>Gamification takes the intimidation out of learning something new, engages the mind and helps with retention.<\/p>\n\n\n\n<p>Here\u2019s our pick of the most engaging and fun resources for aspiring web developers:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.20i.com\/blog\/18-websites-play-games-learn-code\/#kids\"><strong>Coding games for kids and teens<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.20i.com\/blog\/18-websites-play-games-learn-code\/#adults\"><strong>Coding games for adults<\/strong><\/a><\/li>\n<\/ol>\n\n\n\n<p>Note: <em>Adults will be able to learn plenty from the kid\/teen resources and vice versa. We\u2019ve separated the child-friendly themed resources from the text heavy adventures and murder mysteries.<\/em><a id=\"_msocom_1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"kids\">Simple code games<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tynker<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.tynker.com\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"266\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Tynker.png\" alt=\"Tynker website\" class=\"wp-image-9227\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Tynker.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Tynker-300x133.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Tynker-370x164.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Tynker-270x120.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Tynker-570x253.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Tynker-150x67.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Get started for free and enjoy programming-focussed games. The range covers basic \u2018tap\u2019 games for children aged 5-9, more complex block-based learning for ages 10-13, then more advanced challenges for those aged 14+. You can even build your own Minecraft mods!<\/p>\n\n\n\n<p>The more advanced games transition into HTML, CSS, JavaScript, Python, Java and AI.<\/p>\n\n\n\n<p>Find out more at&nbsp;<a href=\"https:\/\/www.tynker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">tynker.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">CodeCombat<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CodeCombat Game Trailer\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/rOXRBQIXvlI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The main game is a \u2018multiplayer RPG-style\u2019 game, where you use your coding skills to help you in your adventures, vanquishing monsters and much more.<\/p>\n\n\n\n<p>It has great collaborative features, like being able to create \u2018websites\u2019 with your own custom levels, and has a feature-packed free version.<\/p>\n\n\n\n<p>Python, JavaScript, HTML, CSS, C++ and AI are all covered.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/codecombat.com\/home\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codecombat.com\/home<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Codemonkey<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CodeMonkey Trailer - Coding Games for Kids\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/o3geZ_0r_3Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>CodeMonkey, winners of the 2024 Best of STEM Award in the AI category, have a polished range of learning-games suitable for users from 7 years old.<\/p>\n\n\n\n<p>Their games focus on CoffeeScript &#8211; which compiles to JS &#8211; and Python. These games are subscription-based, and a free trial is available for you to test if it\u2019s the right fit for your use case.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/www.codemonkey.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.codemonkey.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Blockly games<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"421\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Blockly-Games.png\" alt=\"blockly coding game\" class=\"wp-image-9252\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Blockly-Games.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Blockly-Games-300x211.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Blockly-Games-370x260.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Blockly-Games-270x189.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Blockly-Games-570x400.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Blockly-Games-150x105.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p>A completely free, cute&nbsp;set of games&nbsp;aimed at younger children. Carry out block-based tasks and learn the basics of how sequencing in programming works. We particularly enjoy \u2018<a href=\"https:\/\/blockly.games\/bird\">Bird<\/a>\u2019.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/blockly.games\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/blockly.games<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Code.org<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/studio.code.org\/s\/starwarsblocks\/lessons\/1\/levels\/1\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"242\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Star-Wars-Galaxy-of-Code.png\" alt=\"Star Wars: Building a Galaxy With Code\" class=\"wp-image-9256\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Star-Wars-Galaxy-of-Code.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Star-Wars-Galaxy-of-Code-300x121.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Star-Wars-Galaxy-of-Code-370x149.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Star-Wars-Galaxy-of-Code-270x109.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Star-Wars-Galaxy-of-Code-570x230.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Star-Wars-Galaxy-of-Code-150x61.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Code.org have some of the best, free computer science education resources on the internet. Alongside their <a href=\"https:\/\/code.org\/student\/elementary\" target=\"_blank\" rel=\"noreferrer noopener\">5-11<\/a> and <a href=\"https:\/\/code.org\/students\/middle-and-high-school\" target=\"_blank\" rel=\"noreferrer noopener\">11+<\/a> content, they have an appealing range of licensed materials, including a <a href=\"https:\/\/studio.code.org\/courses\/starwarsblocks\" target=\"_blank\" rel=\"noreferrer noopener\">Star Wars\u00a0block-based programming game<\/a> complete with John Williams\u2019 music and BB-8!<\/p>\n\n\n\n<p>HTML, CSS, JavaScript, Python and concepts that span all programming languages and tools are covered.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/code.org\/en-US\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/studio.code.org<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Scratch<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/scratch.mit.edu\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"412\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Scratch.png\" alt=\"Scratch screenshot\" class=\"wp-image-9254\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Scratch.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Scratch-300x206.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Scratch-370x254.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Scratch-270x185.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Scratch-435x300.png.webp 435w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Scratch-570x391.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Scratch-150x103.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Program or partake in fun games, art and animations for free using the&nbsp;<a href=\"https:\/\/scratch.mit.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Scratch<\/strong><\/a>&nbsp;block-based language from MIT. Sharing your creations and getting involved in this<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/scratch.mit.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/scratch.mit.edu<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adults\">More advanced games to learn code<\/h2>\n\n\n\n<p>Some programming knowledge is needed to get the most out of these resources, so we\u2019ve curated them in the category of \u2018coding games for adults\u2019.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">WarriorJS<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1881\" height=\"727\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/WarriorJS.png\" alt=\"Screenshot from the WarriorJS homepage\" class=\"wp-image-17652\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/WarriorJS.png 1881w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-300x116.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-768x297.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-1536x594.png.webp 1536w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-400x155.png.webp 400w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-800x309.png.webp 800w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-832x322.png.webp 832w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-1664x643.png.webp 1664w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-1248x482.png.webp 1248w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/WarriorJS-150x58.png.webp 150w\" sizes=\"auto, (max-width: 1881px) 100vw, 1881px\" \/><\/figure>\n\n\n\n<p>A text-based JavaScript adventure that will put your skills to the test as you defeat enemies, rescue captives and climb the tower in your quest to reach \u2018The JavaScript Sword\u2019 at the top level.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/warriorjs.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/warriorjs.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">SQL Murder Mystery<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/mystery.knightlab.com\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"136\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/SQL-Murder-Mystery.png\" alt=\"SQL Murder Mystery\" class=\"wp-image-9236\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/SQL-Murder-Mystery.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/SQL-Murder-Mystery-300x68.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/SQL-Murder-Mystery-370x84.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/SQL-Murder-Mystery-270x61.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/SQL-Murder-Mystery-570x129.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/SQL-Murder-Mystery-150x34.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Solve a crime and sharpen your SQL sleuthing skills. SQL Murder Mystery drops you into a database-driven detective story where you\u2019ll query tables, uncover clues and crack the case. It\u2019s hands-on, addictive and perfect for levelling up your database detective abilities.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/warriorjs.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/warriorjs.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Codingame<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"568\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2023\/01\/Codingame-graphics.jpg\" alt=\"Attractive graphics from Codingame, a set of many challenges to learn coding\" class=\"wp-image-10467\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2023\/01\/Codingame-graphics.jpg 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codingame-graphics-300x284.jpg.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codingame-graphics-370x350.jpg.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codingame-graphics-270x256.jpg.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codingame-graphics-570x540.jpg.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codingame-graphics-150x142.jpg.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p>Codingame turns programming into competitive fun with its turn-based puzzles, singleplayer campaign, multiplayer battles, community challenges and global leaderboards.<\/p>\n\n\n\n<p>Take part in Bash, C, C#, C++, Clojure, D, Dart, F#, \u00a0Go, Groovy, Haskell, Java, JavaScript, Kotlin, Lua, Objective-C, OCaml, Pascal, Perl, PHP, Python 3, Ruby, Rust, Scala, Swift, TypeScript and VB.Net.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/www.codingame.com\/start\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.codingame.com\/start<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Flexbox Defense<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Flexbox-defense.png\" alt=\"Flexbox Defense screenshot\"\/><\/figure>\n\n\n\n<p>Presented by IndieHackers co-founder, Channing Allen, your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS, then let waves of attackers test your guns to their limits.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/www.flexboxdefense.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.flexboxdefense.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Untrusted<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/alexnisnevich.github.io\/untrusted\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"272\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Untrusted.png\" alt=\"Untrusted screenshot\" class=\"wp-image-9246\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Untrusted.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Untrusted-300x136.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Untrusted-370x168.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Untrusted-270x122.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Untrusted-570x258.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Untrusted-150x68.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Enjoy a synthwave\/chiptune soundtrack in this fantastic meta-JavaScript adventure from Alex Nisnevich and Greg Shuflin where you tweak JavaScript to guide Dr. Eval through a strange \u2018machine continuum\u2019 using the ultimate tool: code.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/untrustedgame.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/untrustedgame.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Code Maven<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"184\" height=\"250\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Code-Maven.png\" alt=\"Crunchzilla's Code Maven avatar\" class=\"wp-image-9237\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Code-Maven.png 184w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Code-Maven-150x204.png.webp 150w\" sizes=\"auto, (max-width: 184px) 100vw, 184px\" \/><\/figure>\n\n\n\n<p>Crunchzilla\u2019s Code Maven interactively walks you through HTML, CSS and JavaScript basics, which you can then put to work in Game Maven\u2019s fun, interactive projects. Code Monster, which you can also find at the URL below, is a great place to start for those with less experience.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/www.crunchzilla.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.crunchzilla.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Elevator Saga<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Elevator Saga\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/J1ie70_rDXE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Write JavaScript code that moves people. Program the elevators to transport people in an efficient manner as you deal with an ever-increasing number of passengers. \u201cOnly the very best programs will be able to complete all the challenges.\u201d Do you have what it takes?<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/play.elevatorsaga.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/play.elevatorsaga.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Diner<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"412\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/CSS-Diner.png\" alt=\"CSS Diner screenshot\" class=\"wp-image-9245\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/CSS-Diner.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/CSS-Diner-300x206.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/CSS-Diner-370x254.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/CSS-Diner-270x185.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/CSS-Diner-435x300.png.webp 435w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/CSS-Diner-570x391.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/CSS-Diner-150x103.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p>CSS Diner serves bite-sized challenges that teach you CSS selectors in a fun, visual way. Quick, addictive and perfect for sharpening your front-end chops.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/cssdiner.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cssdiner.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Flexbox Froggy<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/flexboxfroggy.com\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"311\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Flexbox-Froggy.png\" alt=\"Flexbox Froggy screenshot\" class=\"wp-image-9234\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Flexbox-Froggy.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Flexbox-Froggy-300x156.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Flexbox-Froggy-370x192.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Flexbox-Froggy-270x140.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Flexbox-Froggy-570x295.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Flexbox-Froggy-150x78.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>This coding game from Codepip sees you&nbsp;guiding cute, coloured frogs&nbsp;to their lilypads while you learn CSS flexbox.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/flexboxfroggy.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/flexboxfroggy.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Garden<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/cssgridgarden.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"307\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Grid-Garden.png\" alt=\"Grid Garden screenshot\" class=\"wp-image-9241\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Grid-Garden.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Grid-Garden-300x154.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Grid-Garden-370x189.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Grid-Garden-270x138.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Grid-Garden-585x300.png.webp 585w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Grid-Garden-570x292.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Grid-Garden-150x77.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Another popular and addictive code-based game from Codepip. Grid Garden teaches CSS Grid through playful planting puzzles. Water the right rows and columns to keep your carrots thriving as you master modern layouts.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/cssgridgarden.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cssgridgarden.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Code Wars<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.codewars.com\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"328\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/codewars-interface-screenshot.png\" alt=\"Code Wars screenshot\" class=\"wp-image-9265\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/codewars-interface-screenshot.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/codewars-interface-screenshot-300x164.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/codewars-interface-screenshot-400x219.png.webp 400w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/codewars-interface-screenshot-150x82.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Sharpen your skills and solve real-world challenges (\u2018katas\u2019) in 55+ languages. Climb the ranks and join a global community of developers. This is competitive coding at its best.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/www.codewars.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.codewars.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Vim Adventures<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/vim-adventures.com\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Vim-Adventures.png\" alt=\"Vim Adventures screenshot\" class=\"wp-image-9250\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Vim-Adventures.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Vim-Adventures-300x169.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Vim-Adventures-370x208.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Vim-Adventures-270x152.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Vim-Adventures-570x321.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/09\/Vim-Adventures-150x85.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<p>Where learning how to use the VIM IDE meets classic JRPG: VIM Adventures gamifies keyboard shortcuts in a retro-style world that\u2019s perfect for anyone who wants to boost their productivity in the terminal. Play the first three levels for free.<\/p>\n\n\n\n<p>Find out more at <a href=\"https:\/\/vim-adventures.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vim-adventures.com<\/a>.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Have fun and learn<\/h2>\n\n\n\n<p>The quality and quantity of online coding games has never been greater.<\/p>\n\n\n\n<p>These games are just a selection of our favourites: there are many more out there. Do you have a recommendation? Share your shout-outs in the comments section below!<\/p>\n\n\n\n<p>Are you interested in a coding career? Read how the developers at 20i first got the programming bug:\u00a0<a href=\"https:\/\/www.20i.com\/blog\/how-we-got-into-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How we got into coding<\/strong><\/a>.<\/p>\n\n\n\n<p>Prefer to learn by video? Check out\u00a0<a href=\"https:\/\/www.20i.com\/blog\/10-best-youtube-channels-for-learning-programming-2021\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>10 of the best YouTube channels for learning programming<\/strong><\/a>.<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"Website\",\n  \"name\": \"20i Blog\",\n  \"url\": \"https:\/\/www.20i.com\/blog\",\n  \"@id\": \"https:\/\/www.20i.com\/blog#website\",\n  \"sameAs\": [\n    \"https:\/\/twitter.com\/hostedby20i\",\n    \"https:\/\/www.facebook.com\/hostedby20i\",\n    \"https:\/\/www.instagram.com\/hostedby20i\/\",\n    \"https:\/\/www.linkedin.com\/company\/20i\",\n    \"https:\/\/www.youtube.com\/c\/20ihosting\"\n  ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"@id\": \"https:\/\/www.20i.com\/blog\/18-websites-play-games-learn-code\/#webpage\",\n  \"url\": \"https:\/\/www.20i.com\/blog\/18-websites-play-games-learn-code\/\",\n  \"inLanguage\": \"en-gb\",\n  \"name\": \"18 websites where you can play games - and learn code\",\n  \"description\": \"Check out these online coding games for free. Learn code while having fun.\",\n  \"isPartOf\": {\n    \"@id\": \"https:\/\/www.20i.com\/blog#website\"\n  },\n  \"about\": [\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Computer programming\",\n      \"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Computer_programming\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Online game\",\n      \"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Online_game\"\n    }\n  ],\n  \"mentions\": [\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Tynker\",\n      \"sameAs\": \"https:\/\/www.tynker.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"CodeCombat\",\n      \"sameAs\": \"https:\/\/codecombat.com\/home\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Codemonkey\",\n      \"sameAs\": \"https:\/\/www.codemonkey.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Blockly games\",\n      \"sameAs\": \"https:\/\/blockly.games\/?lang=en\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Star Wars: Building a Galaxy With Code\",\n      \"sameAs\": \"https:\/\/studio.code.org\/s\/starwarsblocks\/lessons\/1\/levels\/1\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Scratch\",\n      \"sameAs\": \"https:\/\/scratch.mit.edu\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"JS Robot\",\n      \"sameAs\": \"https:\/\/lab.reaal.me\/jsrobot\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"SQL Murder Mystery\",\n      \"sameAs\": \"http:\/\/mystery.knightlab.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Codingame\",\n      \"sameAs\": \"https:\/\/www.codingame.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Flexbox Defense\",\n      \"sameAs\": \"http:\/\/www.flexboxdefense.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Untrusted\",\n      \"sameAs\": \"https:\/\/alexnisnevich.github.io\/untrusted\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Code Maven\",\n      \"sameAs\": \"http:\/\/www.crunchzilla.com\/code-maven\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Elevator Saga\",\n      \"sameAs\": \"https:\/\/play.elevatorsaga.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"CSS Diner\",\n      \"sameAs\": \"https:\/\/flukeout.github.io\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Flexbox Froggy\",\n      \"sameAs\": \"http:\/\/flexboxfroggy.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Grid Garden\",\n      \"sameAs\": \"http:\/\/cssgridgarden.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Code Wars\",\n      \"sameAs\": \"https:\/\/www.codewars.com\/\"\n    },\n    {\n      \"@type\": \"Thing\",\n      \"name\": \"Vim Adventures\",\n      \"sameAs\": \"https:\/\/vim-adventures.com\/\"\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"It&#8217;s always better to have fun when you&#8217;re learning. Here&#8217;s some of our favourites, suitable for all ages, from toddlers to longbeard pro developers.","protected":false},"author":36,"featured_media":9315,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[49,51,60],"tags":[79],"class_list":{"0":"post-9226","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-business-tips","8":"category-technology","9":"category-web-design-dev","10":"tag-web-development","11":"cs-entry"},"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/09\/Games-that-teach-you-coding.png","author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/www.20i.com\/blog\/author\/joseph20i\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/9226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=9226"}],"version-history":[{"count":56,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/9226\/revisions"}],"predecessor-version":[{"id":17653,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/9226\/revisions\/17653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/9315"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=9226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=9226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=9226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}