Simon is a game.

It's It's based on a real game, a physical game in real life, and we're going to recreate it with JavaScript.

And there is a A four different lights or colors, and they will light up in a certain order, so the player has to remember the order.

Each round, an additional light is added, and the player has to remember all the the order so far in the game until you get to 20 rounds and then you win the game.

So let's see what the final product is going to look like.

So here's how this Simon game works.

There are the power button, the strict but in the start button.

So this is supposed to simulate a physical Simon toy game, and the physical Simon Toy game has a power switch.

So that's what this this check box turns the game on.

You can see when I click the power button you can see right in this Count Square.

This red line appears to indicate that the game is on, and then the strict mode.

It means that if you get one wrong answer, you lose the whole game.

So a strict mon is on you get one wrong answer and the whole game is lost with strict mode off.

If you get a wrong answer, you can start from where you left off.

So let me show you an example how it works.

This is a memory matching game.

So you have to remember the order of the colors.

Let's do this If I press start so I have to remember the order of these.

Oh, I got it wrong.

So since I got it wrong, it starts from where it left off.

So let's do this again.

You will notice that for every round the count goes up by one.

And if I get something wrong, the count flashes.

No.

So it starts from where I left off because I'm not in strict mode.

But if I turn on strict mode and I get it wrong, you can see this count is gonna go down toe one x I got it wrong and I have to start the game all over again.

So let's go into the code because this is what we're going to be building.

Okay, I have sublime text open on the left, and then I just have my browser with the Simon game open on the right.

And in this tutorial, I'm mainly gonna focus on the Java script.

So I already have the HTML and the CSS written.

You can see the HTML file here, the CSS file here the Java script file is empty.

So I'm going to review the HD amount of CSS and show you how those work.

And then I'm actually going to write all the Java script and explained that as I go first, let's see how the project is structured.

So my root folder just Simon game and then I have my index html file.

That's the file you see here.

And then I have a job script folder and a CSS folder.

Now, inside these folders there just one file.

So really, we could have probably put all this into the root folder, but it's good to get into Ah, just the mindset of the best practices.

And generally you'll have all of your job script in one folder and all of your CSS and another folder so right now, we're not gonna need to see this file structure again, so I'll just close that, Okay?

And let me just re adjust this a little bit and I start going through this HTML here so you can see from here.

Here is the heading.

Now, this is stuff that's not going to really appear on the page.

But it's stuff important for the page.

The first thing I wanna point out is this font here.

I'm bringing in a Google font.

Now Google makes all these fonts that you can use on websites.

They're they're free to use.

And you can.

They have a lot of unique fonts that you can use.

So that's the word.

Simon here uses the ghoul font.

It's called Original Surfer.

So if you just look up Google fonts, it gives you instructions on how to include them in your in your Web page.

And also there's ghoul font effects so you can see right here.

It says effect equals M boss, and that's why you can kind of see a border around around this.

It's embossed and ghoul fonts have all sorts of effects you can use, so I would highly recommend looking up cool fonts and the effects if you're not already familiar with them And then here is where we link to our CSS file.

That's the one right here and then something else look at is how we are basically importing these audio files to use.

So there's four different audio files.

Um, we have the audio tag and there's the opening and closing tag in HTML.

Most tags have opening and closing tags, and we have the set of different ideas, which we will reference later in our JavaScript.

And the source is just this file right here.

If you're falling along, you can use these same files or you can use your own files.

So we have the four different audio files for the sounds they're gonna play when each of the buttons are pressed before you go over the rest of the HTML.

Eso this HTML here is what actually makes up the actual page that you can see here.

But let's go over to the CSS.

Um, I'm not gonna go through everything on here.

Um, I will link to both the HTML and the CSS in the description of the video.

So you're not gonna have to type all of this out.

If you're following along, you can just download the HTML file and the CSS file.

In fact, all these files will be on the get hub depository that's linked to in the description.

So you can see, um, for the body you can You can really use anything for the background, but I just use this repeating pattern here.

That's why we have this texture.

We could have also used a solid color.

And then this is just a standard CSS.

You can see that I am using the Google font for some of these things.

And so for CSS, just a quick refresher.

If you have a dot that's going to apply to a class and then if you have a hash mark like this, it's going to apply to an I.

D.

So, um, now, actually explain that a little more once we get back to our HTML here.

So in the body of HTML, we have this outer circle and this outer circle you can see this is the opening def tag, and this is the closing in tag.

So everything is within the outer circle.

That's this dark black circle around here.

And then here we have the top left top, right, bottom, left, bottom right.

And those air, Just these colors here.

And the ideas are important for two reasons.

The point of ideas is that their ah, there's only one of them.

So whereas classes, you can have multiple things with the same class ideas.

You could only have one element with the same I d.

So we use the I.

D.

S and R CSS.

That's one of the ways we use them.

Francis, with this top left here, if I go on here, if I scroll down, I will be able to see top left.

And this is the CSS to create this green section here.

You can even see background is dark green here.

The other purpose of the I.

D.

S is that we can reference them in JavaScript.

And a lot of these we are gonna reference in Java stripped because we're going to add click handlers, and we're going to use javascript to show what's going to happen when you click the different elements on the page.

So we also have this inner circle that's this grey circle here, and it has a bunch of stuff inside the inner circle you can see nestled within the circle.

So we have the title and you can see that there's a special class font infect in Boss.

And that's how we get the effect on this from the ghoul font.

And then we have these switches.

The switches are these check marks here?

Now we could change these check parts to be toggle switches or buttons or something that would look more similar to the physical Simon game toy.

But for now, I just have him as check boxes like we have the power, but then the strict button and then we also the start button.

So if you want to improve upon this project, one idea would be to style these a little, a little more toe look like actual buttons or toggles or switches.

You could do that using CSS, or maybe even used some Java script for that.

So we have these three buttons here, and then we have the labels power and strict.

Now turn.

That's this box here that's gonna tell what turn were on when we're playing the game.

And that's pretty much everything here.

The last thing I want to show you in the HTML is the script tag that links to our Java script file and you'll see it's at the very end.

Now the the CSS is up here at the top.

We linked to the CSS file, but we linked to the Java script file at the end.

Some people do link to Josh through files at the beginning, just like the CSS file.

But it's really best practice to link to the job script at the end.

And that is because we want to make sure all of the HTML is loaded before we load the Java script, because the Java script is going to reference some of the items in the HTML.

And so if the job script loaded too quickly before the HTML was loaded, it could create some problems.

Okay, it's time to get to the good stuff, the JavaScript.

So hopefully you're following along and actually typing this all out yourself, that's how you're really gonna learn.

I mean, you can just watch and just try to learn just from observing.

But if you actually type this out yourself and follow along, it's gonna help you understand the concepts a lot more and you can try out different things.

So, like I said, you can just download the CSS and the HTML from from the links in the description.

But the Java script will be nice of you typed it out with me.

So first, we are going to just type out some of the variables we're gonna use.

So I'm gonna declare our first variable with a let let's order equal.

And then I'm going to put an empty array here, these two brackets.

That's how we're going to set this variable named order to this array now jobs trip.

You're usually gonna end all your lines with a semi colon.

Let is a way to initialize a variable.

There's there's three different ways to initialize a variable We have let we have var And then there's Const and ah of our I'm just gonna do a brief overview of what the different things are.

Um, var will apply to the entire the scope of your entire program.

Let will be a little more of a limited scope and on Lee apply to where it was defined, and const stands for Constant and Constance cannot be changed.

So once you set a variable with Const.

You can't set it to something else later.

So most people say you should only use let and constant and you should never use of are so we're just going to use a lead here.

So order, This is a variable that's going to keep track of the order of the lights and how they're gonna flash.

We're also gonna have let player order.

Now, this is going to be the order that the player is pressing the lights in and let flash.

This is going to be, ah, basically an integer now with Java script, you don't set the types of the variables, but generally you do keep him at one type for the most part, and this is just gonna be a number the number of flashes that have appeared in the game We're also gonna have let turn to keep track of what turn were on.

Um, let good and this is going to be a Boolean true or false, whether the player is doing well or not.

If the player has, um hit all the right colors or if the players not hit all the right colors and let comp turn also is gonna be a Boolean True or false, it's gonna keep track of whether it's the computers turn or the players turn.

We're also gonna have let interval.

I d.

I'm gonna explain that when a little later, um then let strict is going to keep track of if the strict button has been Ah, the check mark has been checked.

It's going to start it false because it's gonna start unchecked.

Um, let noise equals True.

If we're playing noise, this will make more sense later in the program.

Let on equals false.

And that's if the program has been turned on the power button here and it's gonna start turned off and then let when this is just going to say, if the player has won the game or not.

Um, so now we're going to use some constants.

Um, we have to have a way to get some of our HTML elements to reference them in JavaScript.

So that's what we're gonna do here.

We're gonna try to we're going to reference some of our HTML elements in JavaScript.

I'm gonna show you how to do that.

We're gonna have the turn counter.

Now the turn counter Is this right here?

And we want a reference that in Java stripped.

So I'm gonna use this document, that query selector, and then I'm gonna pass in lips.

I'm going to pass in a CSS selector, so I'm gonna just type in turn here.

So why do you document that query selector?

I can pass in any CSS selector.

And this hashtag turn means an element with the i d of turn.

So if I go into my HTML, you'll see it right here.

We have an i d of turn.

So now we've actually taken that html element and put it into this variable turn counter, and now we can use our javascript to manipulate that.

We're gonna do that a few more times.