Playing video games often involves solving tricky problems with logical thinking and trial-and-error strategies. Can you think of something else that requires these skills? That’s right – programming!
In this article we’ve prepared for you 10 browser games for web developers and coders, that you can use to learn more about JavaScript, CSS and HTML, or as a proving ground for your webmaster skills. Some of the games are easy, others extremely difficult, but they are all fun!
Code Combat
Although Code Combat is made for children in school, the game can still be enjoyed by adults of all ages. In it you programatically control the actions of a brave hero going through hundreds of dungeons, fighting enemies and collecting gems. Beating the whole game takes about 20+ hours and covers most programming concepts.
Hex Invaders
In this version of the classic arcade game the world is attacked by a trio of aliens, each sporting a different color. To save humanity, the player must quickly translate a RGB hex value into human colors and shoot down the invaders.
Flexbox Froggy
Puzzle game where you have to help a group of colorful frogs get to their lillypads of choice. Moving the amphibians around is done with flexbox and will truly test you layout building skills. The in-game hints will tell you which CSS properties to use in each situation, but it’s up to the player to decide what combination of values to set.
Pixactly
Pixactly has a very simple, yet challenging concept. The game gives you two random pixel values, one for the width and one for the height of a rectangle. The player then has to draw a box that is as close as possible to the given dimensions.
CSS Diner
A great game for learning CSS selectors. The player is given a table of dishes in animated and HTML form, and a certain item or items to select from the table. The different levels cover everything a web developer should know about selectors, from the very basics to ~ and :first-child.
Screeps
You can think of this game as your digital ant farm where every “ant” is programmed by the player. After setting up a colony and the behavior of your creeps, they will go about their business of exploring the endless game world, collecting resources and fighting enemies even while you are offline.
CodinGame
A huge collection of games that can all be played in JavaScript, PHP, Ruby, Go, Python, and many other programming languages. The platform includes various puzzle, multiplayer and AI based games, while the code is written in an advanced IDE with Emacs and Vim support.
Flexbox Defense
Classic tower defense game with a CSS twist – all the turrets and traps in the game are positioned using the flexible box layout. There are 12 levels with waves of enemies trying to reach your base. To complete them all you will have to apply your entire knowledge of flexbox properties.
Elevator Saga
Elevator Saga is a puzzle game in which you use JavaScript to control the elevators in a building. Hordes of people are going up and down all the time and you have to try and get them to their destinations as quickly as possible. The game tests your algorithm writing abilities as well as your knowledge of JS functions, arrays and event handlers.
Untrusted
Untrusted is a meta-JavaScript adventure game where you play the role of Dr. Eval, an @ sign that can control the world around him by changing the source code. The player is presented with the functions that initialize every level and has to alter them using the game API to create and escape route for Dr. Eval.
Bonus: Dungeons & Developers
A talent tree with CSS, HTML and JavaScript magic instead of fire and ice. Add points in the skill you already know and see how close you are to becoming a true Web Development Master. Submit talent tree as CV for job applications at your own risk.
