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.
- 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 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.
You'll CSS to provide the appearance, including the animation.
You'll use HTML to define the structure.
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.