Posted on Aug 27 Hello and welcome! 🤩🤩When you journey into web development, there are tiers of challenges, and conquering Javascript is one of them! In my experience, learning javascript is best done through practice. it is possible to watch a ton of tutorial videos, you'd think you've got it nailed, only to end up with very faulty code.In this article, we will be building a straightforward javascript game. This challenge will have you practicing some beginner and core principles of javascript programming. As a bonus, you even get a bit of an HTML and CSS lesson.Let's kick right into what we'd be building!       1. Step 1       2. Step 2       3. Step 3       4. Step 4       5. Step 5       6. Step 6       7. Step 7       8. Step 8       9. Step 9       10. Step 10Today, we'd be building the popular British game called The Simon gameI have learned through experience that the secret to solving coding challenges is to, first of all, understand what's required of you. To achieve this, we will have to understand how the Simon game works. Find a youtube tutorial video here.Let me try my best to explain.This is primarily a pattern remembrance game. This game is in such a way that there are four boxes. Each box is a different color. The game starts with a "Press any key to play" heading. Once you've done this, a box(with a particular color) is highlighted, and the highlight fades after a millisecond. This represents the first pattern. You are to click on the box that was highlighted. You have successfully remembered the first pattern.The game highlights another color...But remember, it's all about patterns 😜😜 If you click on the following highlighted pattern, you fail! 😭😭😭 (I learned this the hard way). Because this is a game of patterns, you have to remember the first color(box) that was highlighted and start from there.Example: The patterns show up in this order [Blue] 1st highlight: play [blue 🔵][Red] 2nd highlight play [blue 🔵][red 🔴][Green] 3rd highlight play [blue 🔵][red 🔴][green 🟢][Blue] 4th highlight play [blue 🔵][red 🔴][green 🟢][blue 🔵].... The game keeps going on in a continuous loop until you miss a pattern and then it restarts.Get a feel of playing the game hereBecause this is neither an HTML or CSS tutorial, I'd be dropping a link to the HTML and CSS codes. You can grab those, get them running in your preferred code editor, open up a javascript file, and let's get started!The first thing we have to think about is that we need to define the colors of the buttons. In my HTML file, you can see that we have four divs with ids of different colors (red, blue, green, and yellow), to identify each box separately. We can do this in our javascript by first of all creating an arrayvar buttonColors = ["red", "blue", "green", "yellow"];We need a way to store the patterns the game is going to come up with and also the pattern that our user is going to be creating (by playing the game), so that we can keep track of it.var gamePattern = []; var userClickedPattern = [];We need to create a Function that enables the game to choose which of the buttons it wants to add in the sequence. We recall from the explanation of the game that this isn't a rigid structure, such that the computer spins off random patterns. To achieve this, let us create our function, and get a randomized variable.function nextSequence() { var randomNumber = Math.floor(Math.random()*4);}We are multiplying our random number by 4 so that we can have values between o and 3. Using a 'Math.floor' method to remove any floating point from our number.We need to make use of our randomized variable to help us pick a random index from our 'buttonColors' array. We will also need to find a way to add the value of the chosen index (the first sequence in the game) to our game pattern array.var randomChosenColor = buttonColors[randomNumber]; gamePattern.push(randomChosenColor);Now, we are going to add a bit of animation, as a visual cue to indicate what color (box) was chosen by the computer.document.querySelector("#" + randomChosenColor).fadeIn(100).fadeOut(100).fadeIn(100);We used the document.querySelector to target the HTML element we want. What we need is identified with an id, hence why we had to use the id selector "#". Furthermore, because we are not hardcoding any particular value, but letting the computer choose randomly, we had to write our code so that the selection is fed from our 'chosenRandomColor' variable.Our nextSequence function should look like this,In addition to the visual aid introduced in our earlier function, we can also add some sound cues. We will be doing this in our playSound() function. You can find the sound used for this project at this github repo. We will be using the default audio class in javascript.*Our function takes a parameter of audioName such that we use this parameter to pass in the value of the name of the audio we want to use. After getting hold of the default audio class in javascript, we went ahead to get a hold of the different sounds by giving it a 'filer' with our audioName parameter. We will see the implementation of this in coming functions. *We need to build a function that helps the track be aware of what button they clicked. This is by adding some sort of visual aid/clue as to which button was pressed by the user.*In our styles.css there is a class name 'pressed'. What we did here is use javascript to toggle off and on our class pressed. Toggling on this class simply increases and decreases opacity. Note also that we used the setTimeout function to set the duration for the toggle off and on. *Our game is looking fine so far, but there is no way to actually track if the user is following the pattern set by the computer, and that is exactly what this next function is for. We write our first 'if' statement.*In this if statement, the conditions we are checking for the concurrency of the index of our game's pattern with the index of our user's pattern. This will enable us to know when a user has overshot the sequence, or underused. It also checks that the length of each of the arrays is the same. If both cases prove to be true, our earlier function nextSequence is triggered. *We of course need to close this off with an else statement that checks for when the user doesn't get the sequence correctly.*In this else statement, we are triggering another CSS class game-over and toggling it off and on. There is a commented-out function here. You will understand it later as it will be explained shortly. *Our final function should look like this:We need a way for the user to play the game. That is, we have to add functionality to our buttons. We will be using the .click method. In the function that is to be included in this method, we need to specify a list of things that we want to happen by the functions we have so far*When we press this button, a bunch of things are going to happen. The first thing we are doing is to capture the id of the clicked button and store it in our userChosenColor of our clicked button. This is achieved using the 'this' keyword. Then we populate our userClickedPattern array, of course, with whatever color(button) the user chooses. We bring in some of our already defined functions which take in our userChosenColor as arguments. *Finally! We need a way to make sure that the user is able to restart the game whenever they miss a sequence. We will achieve this with our startOver function. We first need to create a variable at the beginning of our file that keeps track of when the game has started or not,var started = false; Then our function becomesWe can see here that in our function, we are merely restarting everything, and making sure that everything begins on a new slate. Please, go back to your check answer function, and uncomment our startOver()We are almost at the end of the road, guys!!! 🥳🥳🥳The final thing we need is a way to keep track of when our game begins.Yasssss!!! 🥳🥳🥳 We are done with our first javascript project! Writing this has been an exciting experience. I hope you feel the same excitement when you build this game and show it off to your friends.Thank you for stopping by!Cover photoTemplates let you quickly answer FAQs or store snippets for re-use.Nice post! Sometimes we need only a good idea to learn new skills. Thanks!Maybe, do you consider to cover in the next post how to use a javascript sandbox (playcode.io/ or codepen.io) to run simple projects. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Matija Sosic - Aug 14 Jon Snow - Aug 23 Ifeanyi Chima - Aug 24 Andrew Ezeani - Aug 1 Once suspended, dumebii will not be able to comment or publish posts until their suspension is removed. Once unsuspended, dumebii will be able to comment and publish posts again. Once unpublished, all posts by dumebii will become hidden and only accessible to themselves. If dumebii is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Dumebi The Dev Moderator 👀. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag dumebii: dumebii consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging dumebii will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.