JavaScript is a great programming language to learn, games are fun and a good way to learn programming concepts, why not make a game in JavaScript?

Applications that run in the browsers are highly accessible, if you wanted to get maximum visibility for your work building something that runs in the browser is a good choice.

This is a vanilla JavaScript tutorial/challenge. It uses no extra libraries. The tutorial creates a simple matching game to give purpose and provide problems to solve.

The tutorial covers many of the basic features of JavaScript:

  • Arrays
  • Classes
  • the DOM


This tutorial will work with vanilla JS, it will not use any external libraries or frameworks. Everything will be accomplished with standard JS. This will give the project maxiumum compatibility. This approach allow you to focus on the core features of the JS language.

The Game

The game is called concentration.

The game you will build is simple. It will provide an even number of grid squares, clicking or tapping a grid square will reveal a color, revealing second grid square with a matching color will leave both colors visible, if the colors don't match they conceal themselves again.



In order to put it all together you'll to need to have a basic understand of HTML, CSS, and JS.

How to use this tutorial

Each section begins with a short description of what needs to be accomplished. Followed by instructions on how I solved the problem.

If you are new to JavaScript you can read the solution and implement it from what is presented here.

If you are already familiar with JavaScript think of the this tutorial as a series of challenges. Read the introduction to each section and try and solve the problem on your own. Compare your answer to the solution.

If you feel pretty comfident in your ability with JavaScript think of this as an interview question. Stop here and create the game on your own from the description below. When you are finished compare your work to the solution provided.


You'll use JavaScript to provide the logic for the game and control interactions.

You'll CSS to provide the appearance, including the animation.

You'll use HTML to define the structure.

Getting started

This project will be created as a single HTML. All of the code that makes up the game will go into this file. While it's good practice to break HTML, CSS, JS into separate files, I'm going to leave that process to a refactoring step that will be applied afte the game is created. This game will be simple enough to contain it all in a single file, and having all of the code one place will make editing easy, and make it easier to see how the HTML, CSS, and JS interact and work together.


I used Brackets to create the example project and write these notes. I tested using the preview mode built into Brackets. Any text editor will work Atom and Sublime are also good choices. You can also test in any browser you prefer.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more