Name: Simon Game JavaScript Tutorial for Beginners
Uploaded: 2020-03-30T04:54:16.000Z
Duration: 1 h 3 min 23 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

To-infinitive

Today, I am going to show you how to make a Simon game, using mainly JavaScript but also HTML and CSS.

Present continuous

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.

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.

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.

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

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

And if I get something wrong, the count flashes.

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.

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.

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

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

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

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

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.

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.

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.

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

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.

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 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.

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.

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.

Subtitles ListPlay Video

Simon Game JavaScript Tutorial for Beginners

random

interact

script

track