Learn JavaScript while Playing Games — Gamify Your Learning

Within this article, I want to showcase different websites you can use to learn JavaScript while playing games. This method is called gamification and is a well-known technique nowadays.

Introduction

Often if you learn a new technology or language it could happen that you cannot keep your momentum. This is caused by the amount of technology that seems endless. It can get difficult to stay engaged with particularly complicated technology and learning gets stuck.

Gamification is a good solution to this problem. It uses a simple strategic attempt to motivate and engage users while learning something new. It is a technique of adding typical design elements from games to enhance the learning process. This is done by leveraging people’s natural desire for socializing, learning, mastery, competition, achievement, status, or self-expression. Early implementation of Gamification uses a simple reward system for players after they accomplish their tasks to engage them. The rewards include point scoring, achievement badges, or virtual currency to use.

Another approach of Gamification transforms the task itself in a game. This is accomplished by including a meaningful choice, an onboarding tutorial, or adding a narrative.

Within the next chapter, I will show different websites that can all be used to learn JavaScript by playing games or solving puzzles.

CheckiO

CheckiO is a website that teaches programming by providing an online game world with many Gamification features like point scoring, leaderboard, or socialization. It helps you to improve your coding skills. Also, it contains many coding games for beginners and advanced programmers. You can complete exercises using Python or TypeScript that cover a variety of topics, including strings, loops, objects, classes, exceptions, and problem-solving. After completing challenges you will earn points, unlock new games, and advance to higher levels. Furthermore, there is a comment section and a Forum where you can consult the help or see how other users solved the puzzle.

Here is a link to the website:

CheckiO - coding games and programming challenges for beginner and advanced
CheckiO - coding websites and programming games. Improve your coding skills by solving coding challenges and exercises online with your friends in a fun way. Exchanges experience with other users online through fun coding activities

CodeCombat

CodeCombat is a hack-and-slash fantasy game that could be used to learn coding fundamentals. CodeCombat puts the player into action and uses programming to help you survive in a dungeon or battlefield. You will control your personal on-screen character through every challenge.

It contains hundreds of levels throughout different courses, including computer science, game development, and web development.

Within the game, you have the ability to control your personally created character and let him run down a hallway to taunt an ogre through programming.

Every level is set up like a puzzle and could only be solved by typing the correct code snippet. Also, after you put in a snippet the game will be executed and you will see the outcome directly.

Here is a link to the website:

CodeCombat - Coding games to learn Python and JavaScript
Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.

TwilioQuest

In TwilioQuest, you will lead your intrepid crew on a mission to The Cloud. It is a free PC role-playing game that was inspired by the classics of the 16-bit era.

Furthermore, it is an educational game that was designed to teach programming in JavaScript or Python to new developers. The game will prepare you for real-world problems by helping you configure a local development environment and explaining tools that are used by professional programmers.

You will learn how to use your terminal, learn how to code in Python or JavaScript, and contribute to Open Source projects. All these practical software engineering skills will be covered if you play TwilioQuest

Here is a link to the website:

TwilioQuest: Download free for Mac, PC, and Linux
Learn to code and battle to save The Cloud in TwilioQuest!

Elevator Saga

This is a game of programming! Your task is to program the movement of elevators, by writing a program in JavaScript.

Elevator Saga is a game where you have to use JavaScript to transport people with an elevator in an efficient manner. While progressing through the different stages you have to complete even more difficult challenges.

Only efficient programs will be able to complete all challenges.

Here is a link to the website:

Elevator Saga - the elevator programming game

jsdares

At jsdares.com you will learn JavaScript programming by completing “dares”. These dares are short puzzles in which you minimize the number of functions used to complete the task. They are very simple in the beginning but will become more difficult as you progress.

At the moment jsdares only provide a small number of dares but they are working on a greater collection to start with. Also, you have to opportunity to create and share your own dares.

Screenshot of jsdares.com taken by the author

Here is a link to the website:

jsdares
Experimental educational programming environment. Learn Javascript and create your own dares!

WarriorJS

Legend tells of a legendary sword, forgotten in the ruins of an abandoned tower. Thousands of warriors have set off on a quest for the sword, whose bearer would become enlightened in the JavaScript language.

WarriorJS is a learning platform for JavaScript that teaches you JavaScript while you playing a role-playing game. This game is designed for new or advanced JavaScript programmers and will put your skills to the test!

Screenshot of WarrioJs.com taken by the author

Here is a link to the website:

WarriorJS
Code your way through dungeons, prove your skills, and get hired.

JSRobot

JSRobot is a game where you will control a robot that collects coins and should reach the end of a level. All programming is done in JavaScript and every challenge contains information about all JavaScript functions needed to complete it.

Unfortunately, it is a very simple game without a fancy UI and presentation. But it can still be used to practice your coding skills.

Screenshot of JSRobot interface

Here is a link to the website:

JSRobot
Learn JavaScript by playing a platform game: Control a robot to collect coins, avoid obstacles and reach the flag at the end of the level.

Closing Notes

If you try any of these games they could help you to start learning JavaScript and becoming a JavaScript developer. They are encouraging funny and have a lot to offer. Besides, you will get in touch with programming and will gain deeper knowledge about syntax, algorithms, and other important concepts in programming.

Personally, I would recommend using CheckiO, TwilioQuest, CodeCombat, and WarriorJS. They are especially helpful for people who want to work as a developer.

JSRobot, ElevatorSage, and jsdares are good to practice some basic functionality and should not be avoided but I won’t recommend starting with these games.

I hope you will test any of these sites and will find them as helpful as I have. If so I would love to hear your thoughts. Also, if you have any questions, ideas, or recommendations, please jot them down below. I try to answer them if possible.

Additionally, I would love to hear your thoughts and your feedback about these Gamification resources. Furthermore, share this article with your friends and colleagues to also learn JavaScript by Gamification.

Feel free to connect with me on Medium, LinkedIn, and Twitter.