Learn to make game with JS (JavaScript) in 5 minutes ! - Simon Game

 

Simon is an electronic game of memory skill. So, today you will learn to make game with JS i.e  You will learn to make JS games using HTML and CSS.

Introduction

Simon is an electronic game of memory skill. The device creates a series of tones and lights and requires a user to repeat the sequence. The object of the game is to repeat a series of random tile clicks. After each round, the sequence becomes progressively longer and more complex which makes it harder to remember. At first you have 4 tiles , each with different color and each produces different sound on press. The sound helps the player to remember the sequence and the game ends if the player misses a step in the sequence.

The logic behind the game is simple. Today we will be making the Simon game in HTML, CSS and Vanilla JS (JavaScript). So to make make game with JS, of course you need to have knowledge about HTML, CSS and JS. We will be using HTML to make skeleton of our game and add CSS to it to enhance its looks then finally we will be using JavaScript to build logic behind the game and finally complete a game. This project is an intermediate project for beginner JS Developers.

After you have created the game you will be developing the skills of logic building, DOM, function, animation, sound paying and a lot more in JS. We will be doing it in a challenging way so lets gets started.

Prerequisites

• You  must know how the game works.
• You must have knowledge about JS.
• You must have a code editor in your computer.
• You must have a browser to check and run your game.

Testing the Game

You need to know more about the game before you make it. So play the game by yourself so that you will know more what exactly you are going to make. Play Now! 

Getting Started

1. First step is to go your development work place and create a folder called "simon-game-js".
2. Then inside the folder create 3 files named: "index.html", "styles.css", "game.js".
3. Now download the below file which contains step by step guide / challenge for you to complete. Unzip the file and start your challenge. It has both challenge and its solution so by the end you will be enhancing your JS knowledge too.  Download the file from here.
4. After you have completed the challenge your Simon game will be ready. If you don't want to make yourself just look at the final code follow the link of my GitHub Repo.
5. After you have completed your project if you want to upload it in the internet and share it among others then you can use Netlify or Github, 

Here you will know more about how you can upload your local website live on the internet.

Now, in this way you can easily make game with JS in just 5 minutes. If you want to learn more and get coding tips and guides follow The Info Docx.

Challenge Credit - Angela

Reference- Freshman