today i am going to show you how to make
a simon game using mainly javascript but
also html and css
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 the simon game works
there are the this power button the
strict button 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
means that if you get one wrong answer
you lose the whole game so if strict
mode 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 i 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 to one because 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 going to
focus on the javascript
so i already have the html and the css
written you can see the html file here
the css file here the javascript file is
empty so i'm going to review the html
and the css and show you how those work
and then i'm actually going to write all
the javascript
and explain 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 javascript folder and a css
folder now inside these folders there's
just one file
so really we could have probably put all
of this into the root folder
but it's good to get into uh just
the mindset of the best practices and
generally you'll have all of your
javascript in in one folder and all of
your css in another folder
so
right now we're not going to need to see
this file structure again so i'll just
close that
okay and let me just readjust this a
little bit and i'm going to start going
through this html here so you can see
from here to 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 want to 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 google 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 google font effects
so you can see right here it says effect
equals emboss
and that's why you can kind of see a
border around around this it's embossed
and google fonts have all sorts of
effects you can use so i would highly
recommend looking up google 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 to look at is how we are
basically importing these audio files to
use
so there's four different audio files
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 these set to
different ids which we will reference
later in our javascript
and the source is just this file right
here
if you're following 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 that are going to
play when each of the buttons are
pressed before i go over the rest of the
html
so this html here is what actually makes
up the actual page that you can see here
but let's go over to the css
i'm not going to go through everything
on here
i will link to both the html and the css
in the description of the video so
you're not going to have to type all
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
the github repository that's linked to
in the description
so you can see
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'm 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 id
so
i'll actually explain that a little more
once we get back to our html here so in
the body of our html
we have this
outer circle
and this outer circle you can see this
is the opening div 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 are just these colors here
and the ids are important for two
reasons
the point of ids is that there
there's only one of them
so
whereas classes you can have multiple
things with the same class ids you can
only have one element with the same id
so we use the ids in our css that's one
of the ways we use them
for instance with this top left here if
i go in 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 ids is that we
can
reference them in javascript
and a lot of these we are going to
reference in javascript because we are
going to add click handlers and we are
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 gray circle here and it has
a bunch of stuff inside the inner circle
you can see nested within the circle
so
we have the title
and you can see there's a special class
font infect emboss
and that's how we get the effect on this
from the google font
and then we have these switches
the switches are these
check marks here
now we could change these check marks 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 them as check
boxes
uh like we have the power button the
strict button
and then we also have the start button
so
if you want to improve upon this project
one idea would be to
style these a little a little more to
look like actual buttons or toggles or
switches
you could do that using css or maybe
even use some javascript for that
so we have these three buttons here
and then
we just have the labels power and strict
now
turn that's this box here that's going
to tell what turn we're 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 this script tag that links to
our javascript file
and you'll see it's at the very end
now the the css is up here at the top we
link to the css file but we link to the
javascript file at the end some people
do link to javascript files at the
beginning
just like the css file
but it's really best practice to link to
the javascript at the end
and that is because we want to make sure
all of the html is loaded before we load
the javascript because the javascript is
going to reference some of the items in
the html
and so
if the javascript 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 going to 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 going to 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 javascript will be nice if you typed
it out with me so first we are going to
just type out some of the variables
we're going to use
so i'm going to declare our first
variable with let
let 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 javascript you're usually going to
end all your lines with a semicolon
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 avar i'm just going to do a brief
overview of what the different things
are
var
will apply to the entire the scope of
your entire program
let will be a little more of a limited
scope
and only apply to where it was defined
and const stands for constant
and constants 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
const and you should never use var
so we're just going to use let here
so order this is a variable that's going
to keep track of the order of the lights
and how they're going to flash we're
also going to 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 a basically an
integer
now with javascript you don't set the
types of the variables but
generally you you do keep them
at one type for the most part and this
is just going to be a number the number
of flashes that have appeared in the
game
we're also going to have let turn
to keep track of what turn we're on
let good
and this is going to be a boolean true
or false
whether the player is doing
well or not if if the player has
hit all the right colors or if the
player's not hit all the right colors
and let cop turn
also is going to be a boolean a true or
false it's going to keep track of
whether it's the computer's turn or the
player's turn we're also going to have
let interval id
i'm going to explain that one a little
later
then let strict is going to keep track
of if the strict button has been the
check mark has been checked
it's going to start at false because
it's going to start unchecked
let noise
equals true if we're playing noise
this will make more sense later in the
program
uh let on
equals false
and that's if the program has been
turned on the power button here and it's
going to start turned off
and then let win
this is just going to say if the player
has won the game or not
so
now we're going to use some
consts
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 going to do here we're going
to try to
we're going to reference some of our
html elements in javascript i'm going to
show you how to do that we're going to
have the turn counter
now the turn counter is this right here
and we want to reference that in
javascript so i'm going to use this
document
dot query selector
and then i'm going to pass in
whoops i'm going to pass in a
css
selector so i'm going to just type in
turn here
so when i do document.queryselector
i can pass in any css selector and this
uh
term means that an element with the id
of turn
so if i go into my html you'll see it
right here we have an id 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 going to do that a few more times
const
top left
equals document dot query
selector and then this time
it will just be
top left
and then we'll just kind of speed this
up a little bit
okay
you can see now i have a variable for
all the elements we're going to
reference the top left top right bottom
left bottom right the strict button the
on button and the start button
these are all the elements that you can
interact with
besides the turn counter you can't
interact with the turn counter but all
these other elements we can interact
with
and we're going to use javascript for
the interaction
so we just use the the css selectors for
each of those elements like top left you
can see here uh id of top left
and then we got all these elements into
variables and since they're always going
to stay the same we were able to use
const
so now that we have the variables set up
we can start
writing the code that's going to allow
us to interact with the game and play
the game
so how i'm going to organize this
is
i'm going to write the program
in the order that you would play the
game
so first of all you're going to interact
with these buttons here like like the
power button the strict button and the
start button
so
i'm just going to start um we'll just
start with the strict button for now
so
i'm going to reference the strict button
now this is the variable we just
made up here
and i'm going to
add
event
listener
and so if we add an event listener it's
going to be listening for some event on
that element
and the event is going to be
change
and so i'm going to pass in a function
now this is going to be a an arrow
function here
there's a couple ways to make functions
in javascript
and this is a common way for event
listeners where
this is what we're going to be passing
into the function
and you put the arrow the equal and then
the
the more than sign and we have these
curly braces and this is what's going to
happen
when that
that check bar box is changed
so
i'm going to put
if
strict
well before i actually do this i want to
actually show you it working so let's
just do a console.log
and i'm going to say
checked
so a console.log if we open up the
javascript console we can see something
happen with this so i'm going to save
this
i'm going to
refresh here now i'm going to open up
the javascript console on the side here
now this if i click the strip button we
should see something appear here
okay you can see it now says checked
because this changed
now this would actually work you can see
every time i click here it increases the
number because it's saying that it has
put that word that many times
this could really be also
at event listener click
this could be click or change and it
would do the same thing
because we're just trying to keep track
of when we clicked it or changed it
because we are going to in the code the
logic of the code it's going to check
whether the that checkbox is checked or
not
so let me show you that now first of all
i'll close the javascript console
and we'll just move this back over
so
we can see the code a little better um
so what i'm going to do here
is say if
strict
button
dot checked
equals equals true
so that that's a way that we can see
if this is checked now dot checked
is only going to be something we can
use
if we're dealing with a check box but
since strict button is a check box we
can see if it's checked as true or if
it's not checked it will be false then
we can do something so if it's check if
it's true we're going to set strict
to equal
true
else
we are going to set strict
to equal
false so this is just a standard if else
statement so if it's checked
strict should be true
else
strict should be false
so we've now just finished that whole
button and we can go on to the next
button
which is going to be the on button
so again i'm going to do an add event
listener
and again it's going to be a click event
and so i'll pass in the event you'll see
notice that above we pass in the event
to this function
and
we never use that event here that's okay
it's still that's still when you're
creating an event listener you always
pass in the event even when you're not
going to use that event in the function
so
this time again we're going to check if
the on button
dot checked
equals equals true
and so if the on button is checked
we'll do a few now we're going to do two
things um we are going to set on to
equal true
um
just like
we said strict equal true and remember
these variables come from up here on and
strict
but we're going to do one more thing
if you remember in the example i showed
you at the beginning when you turn the
power on we want a line to appear right
here to show that it's on
so to do that i'm going to do turn
counter
dot inner
html
now enter html well let me just finish
drawing this line so this is going to
equal and just this dash
inner html is something that you can
use on any
html element to
set the html to something different so
now
the html within
this turn counter is going to
be this line
so if we look in here right now here's
the turn counter and within the turn
counter
is nothing
between these two brackets here there's
nothing there
but when we do this
turncounter.interhtml
it's going to put a dash
right in the turn counter
so we'll do
then else here
we're going to do on equals false
and then
turn counter
dot inner html
equals and we're going to set it back to
nothing
so let's just see if this works and i'll
save that
refresh and if i turn the power on
you'll now see this line appear
when i click check in uncheck it
so this is starting to have at least
some functionality
we're going to do a few more things in
the else here
i want to make sure it's it's higher so
it's easier to see
so we're going to do a few more things
when you turn this off
so we're going to clear the color
so this is a function this is how you
call a function in javascript i still
need to define this function
but let's say you're playing the game
and one of the colors lit up um when you
turn the power off all the colors should
um
all the lights should go off or these
the colors there are a lighter color
should go back to the darker color
and then the other thing we're going to
do is to clear an interval
now i'm going to be talking more about
what this is more later when i define
the interval
but
i'll just put it here now we're going to
come back to that
you can see we we passed in this
interval id
so just keep this in mind we're going to
come back to that later i'm going to
explain that
so we have the on button done
the final thing
is
the start button
so just like before we're going to do an
ad event listener
and it's going to be a click event
listener
and we're going to do a function an
anonymous function in here
it's an arrow function
and here
we're going to just do one thing if this
is the start button and it should only
do something
if the game is on so if
on
or
there's been a win
we are going to
play
so let me go through this if on
this is just a shorthand way of saying
if on equals true
or
when equals true
then call the play function which we're
going to get to in a minute here it'll
play the game so will you put click the
start button and we're going to play the
game
so that's what we're going to do now is
define the play function
so this is how
so this is one way to define a function
this is called an arrow function that
was introduced in es6
there's another way to define a function
a more common way is like this i'm going
to use the function keyword
function play
and i'm going to
um so this is the name of the function
this is anything we're going to pass in
to the function
which is going to be nothing in this
case and then the whole function is
going to take place within these curly
braces here
so um first of all i'm going to go up
and actually add some semicolons to
these here
and
at the when we first try to play the
game the first thing we want to do is
reset variables now if it's the first
time you've played the game the
variables will already be reset but if
you're playing again we just want to
make sure that variables have been reset
so let's see we're going to set when to
equal false
because you're starting the game you
haven't won yet order is going to equal
an empty
empty array we're going to fill that in
a second here
the player order
again is going to equal an empty array
the flash
is going to equal zero there's been zero
flashes
interval id
equals zero
let me scroll a little bit here
turn
equals one
turn counter dot
inner
html
equals one so that's this count is going
to go to one as soon as you press start
because we're on the first round of the
game
what else we're going to have
good
equals true
that means the player hasn't hit
anything incorrect yet
and now we are going to use a for loop
to fill up this order so we need to
randomly fill up this order
um of
this array here so we have four
different quadrants so we're going to
fill up the this array
with a random series of numbers
to indicate the order that these are
going to light up in the game
so this is how we're going to do the for
loop
for
var so when you have a for loop you pass
in three different things you initialize
a variable
i i equals zero
we're going to loop until i is or
we're going to loop while i is less than
20
and then at the end of the loop we're
going to increment i so it's going to go
through this loop 20 times
because in this game you have to get 2
you have to do 20 rounds before you win
the game
so this is how we're going to fill the
array
order dot push
math.floor
math.random
times
four
and then plus
one
so this whole line
basically gets a random numbers between
one and four and fill this fills this
array so this is the array we're going
to push something onto the array and
what we're going to push onto the array
we have this a random number this gets a
random decimal but when we multiply it
by four
and then add one here
it gets the number between one and five
but it could still be a decimal so
math.floor is going to round it down so
we can actually see what happens here by
just doing another console.log so i'm
going to console.log
and i'm just going to log order
so if we go into our page here
and i'm going to open up the javascript
console
if you hit the power button and the
start button
you will see that we have this array
this is an array right in the console
and it's just 20 numbers 20 random
numbers between 1 and 4.
so that's how we've made this array
that's going to show the order that
those lights are going to flash in the
game
so let's go back over here
and
we'll set the comp turn to equal true it
starts with the computer
flashing lights and then the player has
to match those lights
and then we start the first turn
so this
i'm going to just type and then i'll
explain what it means the interval id
equals set interval
game turn
800.
so let me break this down
um
set interval means it's going to
run a function
after every certain amount of
milliseconds
so set interval it's going to run the
game turn function
every 800 milliseconds
that's going to make it so the computer
flashes a light
on here
every
milliseconds and it's going to keep
repeating until this interval is cleared
now the interval's going to clear
after all the lights have flashed but i
haven't um i haven't
done that yet but we need this interval
id here
that's what we set up here and we have
it down here the reason why we have an
interval id is so we can clear the
interval so i told you we're going to
come back up to here if you turn the
power off
clear interval
that means it's going to stop simon from
flashing the colors
because it's going to stop
running the game turn function every 800
milliseconds and the game turn function
is what flashes the colors
so this starts the game
so now that we've referenced the game
turn function
let's define the game turn function
okay the game turn function so i define
the function the same way function
game turn
and then
we are going to say what's going to
happen when this function is called so
on is going to equal false
now this is
just a tricky thing where whenever on
equals false
the player cannot click any of these
buttons so while the computer is
flashing colors we don't want the the
player to be able to click any of the
buttons so that's why on is set to false
here
so now let's see if
flash
equals
turn
then we're going to do something
so that means if the number of times
the lights have flashed
equals the turn that we're on the turn
shows right here
then
that means the computer's turn is over
so if the computer's turn is over
we're going to
clear the interval
and a bit will will show what happens if
the computer's turn is not over
but if it's done flashing all the lights
like that we're going to clear the
interval this is what we talked about
earlier with the interval id
comp turn is going to equal false
and then we're going to clear the color
if any colors are are lit up and on is
going to equal true
now the on is equal to true that means
the player can now start pressing
buttons on there
so
down here
if if it is the computer's turn then
we'll do these things if the turn's not
over if it's with the first thing we're
going to do when i clear the color
because we want to clear the color from
the last time the computer lit up
something oh and that reminds me i
forgot to put the parentheses on the end
whenever you're going to call a function
you have to put parentheses on the end
of the name there
so clear the color and now i'm going to
set a timeout
set timeout is very similar to set
interval
so set interval is going to keep
repeating this over and over
set timeout is going to do something
uh once
after a certain number of milliseconds
so
again i'm going to use one of these
arrow functions from es6
and it's going to run this function
after a certain number of milliseconds
so i'll put the milliseconds at the end
so
i haven't defined what the function is
but you can see
here that
um
every two for it was going to wait 200
milliseconds and then do what's what's
in here
so
what's in here
is it's going to flash
a number or a color
so we have to know what colors it's
going to flash is it going to flash the
green red yellow or blue
so we're going to have an if statement
here so if
order
flash
equals
one
okay let me explain this line here
so remember order is an array
and so flash
is
the the number of times we've flashed a
color and flash starts at zero
and so zero is the first item in the
array
so
if the first item in the array is one
and remember this array is an array of
random numbers one two three four so if
the first item is one we're going to run
the one function which we have to define
later that's gonna flash the the green
right here
and i'm just gonna copy this line
and we're going to do it uh
three more times another thing is
normally with an if statement here
you're going to
put in these parentheses what the
condition is
and then you're going to have a curly
brackets and you're going to run the
things in the curly brackets
if the condition is true
but you can also skip the curly brackets
and just put the thing to run if the
condition is true right after the
parentheses
so inside the parentheses is the
condition
and then right afterwards is the
function you're going to run if this
condition is true
so
this is going to be
2
3 4
and these are going to be functions 2
3
4
so it's going to run the function
depending on what the number is
and then the last thing that has to
happen is the flash
has to be incremented
so it started at zero but it's going to
go up one every time the computer
flashes this happens after 200
milliseconds
because of this set interval up here
a light is going to flash every 800
milliseconds
but since we have this 200 milliseconds
here that means it's going to stop
flashing for 200 milliseconds and it's
going to flash again to the end of the
800 milliseconds
well i can demonstrate it by just making
these functions here the one two three
four functions and we can actually run
this and see what happens
so i'm gonna make the function
one
and we're not gonna pass in things to
any of these functions that's why this
is always empty here
and now we're going to say if
noise
and so if it's if it should make a noise
then it will make a noise remember we
had these
sounds here in their html
and now we're going to use them in our
javascript
so
var
audio
equals document dot get
element
[Music]
by id
clip
one
so this get element by id
is pretty much very similar to the query
selector but query query selector you
can use any css selector
and
get element by id you just put an id in
here but since we already know it's an
id we don't have to put a hash mark now
i could have put query selector and then
put hash mark clip 1 but i just wanted
to show you a different way you could do
this
now
this id clip one is right here if we go
back to our html clip one here so we're
now getting this sound effect
and on the next line we're going to play
it by doing audio dot play
now
we could have put this at the top
but i decided to do it this way where it
is right in here instead of up here with
the rest um
and actually i'm going to make one more
change really quick instead of var this
will be a let i already told you that
that we don't really use var anymore
it's going to play the sound
i'm going to set the noise
to equal true
just in case it was set to false
now you'll understand more of this noise
thing later when i show you when the
noise is set to false
and then top
top left
dot style
dot
background
color
equals
light
green
okay let me break this down for you so
top left
is this thing right here that we got
with the query selector
style means we're going to change the
css style
you can change css using javascript and
we're going to you change the background
color element
right now background color is green but
we're going to set it to light green if
i go into my style and i find top left
actually the background is dark green
and then i set the background color to
be
light green
so we have this thing here for what
happens when you click the one
now it's going to be pretty similar for
two three and four
so i'm just gonna copy this
and that's gonna be two three four so
i'm gonna change this to two
and this is clip
two
and the color is gonna be
tomato
now just so you know i could be using
hex codes
or some other way to indicate a color
but html has a set of keywords that you
can use to
specify certain colors
so tomato is a keyword to signify a
specific color in java in in html that
you will see soon when i do the example
so this is going to be 3
and set that to 3
4
set that to 4
this color is going to be yellow
and then
this color is going to be light
sky
blue
okay
i think we have enough code here to do
an example so let me save that i'll
refresh here and if i press start
okay it's not working let's check the
console
clear color is not defined
oh yeah so
i
oh i just spelled this wrong so let's
see clear
color
and then i'll refresh
now let's try see if i get any
clear okay it's still i spelled it wrong
but then the pro another problem is that
i actually never uh defined that
function
so let's do that right now i'm going to
go down here clear
color
[Music]
oh i put the word function
so function clear color
i'm going to use a line very similar to
this where it says top left dot style
dot background color equals light green
so top left dot style that background
color equals
dark green because that's the initial
color that we specified in the css
and then same with this one
top we got
oh now i'm seeing another problem now
that i'm actually copying and pasting we
have top left here this is supposed to
be
okay we got top left here this is
supposed to be top
right
this is supposed to be
bottom left
and this is supposed to be bottom right
so now i can continue to copy and paste
and i'll be getting the right code here
so
let's see
this
instead of tomato is going to be dark
red
and then
the bottom left
instead of yellow is going to be golden
rod see these are all
html color names
and then
the bottom right instead of light sky
blue is going to be dark
blue
okay let's see if we're going to get any
errors now i'll power this on press
start
and it seems to be working so
let me
close that for now
so we could see it just went and but it
never really went back
hmm
so let's see if we've done something
wrong i was expecting the color to turn
off at some point
oh
the problem was i put dark color here
instead of dark
green so it never turned back to dark
green
so let's try it again i'll save this
refresh and start this
okay
so now it turned green but now i can't
click it though so i'm trying to click
here to show that i know that this just
lit up
but that's not working because we
haven't programmed that yet so that's
the next thing we're going to program so
to make it so a player can click these
colors we're going to have to have some
more event listeners
so let me move this code up a little bit
and i'm going to add some more event
listeners so top left
dot eve dot add event listener
and this is going to be another click
event listener because we're just look
listening for the user to click the top
left
and
just like before event
so now
we're going to check if
it's on
we only want a user to be able to click
there if the program is on
um so if it is on
we'll
do a few things the player order
dot push
one
remember player order is an array of the
sections that the player has um clicked
or pressed
so if the player puts us here be we're
going to push 1 onto the player order
array
then we're going to check
if the player was correct this is going
to be a function
to check to see if the player was right
now whether or not the player was right
we are going to call the one function
now this is the same function that the
computer called that just lights up that
color
i and now
if
the player has not won if the player is
not one yet
then we're gonna set the timeout
and we're going to clear the color
so
after
300 milliseconds
we're going to make sure the color is
clear that the the color that the user
clicked is going to clear
after 300 milliseconds
let's actually test this out
but i'm going to comment out this
checking if if they've won
because we haven't made that function
yet
so let me refresh here
oh actually only works if i click up
here yep
that worked except the color didn't
clear because i forgot to put
parentheses here
so let me just try again to make sure
everything works
okay we got that one to work
and now
uh well let me un comment this i'm just
going to do some copying and pasting
because we're going to do this for every
corner
so
we got top left
now i'm going to do top right
and for top right we're going to push on
the number two
we're going to call the
two function
but
everything else will be the same
so now we have bottom left
bottom
push on a three
this is gonna be three
everything else is the same
now we have bottom right
push on a 4
4
and everything is the same
and now we just need our check function
these are all calling a check function
and this will be one of our more
complicated functions
so let's get to it
function
check
[Music]
and so
we're going to check if if it's correct
so if player order
in these brackets i'll put player order
dot length minus one
that just means the last thing that the
player clicked
if the player order does not equal the
real order at playerorder.link minus one
the last thing that the player clicked
then good equals false
so if they're not the same good equals
false remember good
is true if the player is getting
everything correct and good is false if
the player has something incorrect
we'll just put that onto the next line
so it's easier to read
and so now
if
pl playerorder.length
equals equals 20
that means they've gotten every single
one right
and
good that means they haven't missed
anything
if good equals true
now i could have just put and good i
didn't have to put good equals true in
fact i will just do that if we're on the
20th round
and good we haven't got anything wrong
then
we'll call the win
game function
if
good
equals false
that means the player got something
wrong
we're going to do something else so
first i'm going to flash the color
this is a function that we still have to
write
then the turn counter
dot inner html
is going to equal
no
that just means right in here it's going
to say
no
and then the next thing that's going to
happen
is that we're gonna set a timeout
and then the turn counter
is going to be set back to the turn
number
so it was the the turn counter was set
to no but after a certain amount of
milliseconds is going to go back to the
turn number
and then also we're going to clear the
color so we're flashing the color here
and then we're going to clear the color
here
after a certain number of milliseconds
and i'll just put those milliseconds
which is going to be
800 milliseconds
we're also going to do something special
if
we're in strict mode here
so
if
strict
if for a strict mode i'm going to call
the play function and remember play
function is just like repeating the
whole game starting the game over with
else if we're not in strict mode
then we can repeat the round so let me
set some things up here to repeat the
round so if you get something wrong then
the round is repeated if you're not in
strict mode so comp turn is going to
equal true
and the flash is going to equal zero
and the player order
is going to be an empty array
good equals
true because we now we're back to having
nothing wrong because the round has just
started
and
and oops
interval id
equals set
interval
so we're setting we're starting this
just like we did before
in the play function is with a set
interval by calling game turn
with 800 every 800 milliseconds
and then
the final thing that's going to be in
this function
is
noise
equals
false
so
so remember we're still in the good
equals false if statement so if the
player got something wrong we're not
going to play a noise noise is going to
equal false
the
you only play the noise if the player
got the right it clicked on the right
thing so now we can see up here
why we check to see if noise is true we
have a few conditions so far
the condition if the player wins the
game
the condition if
the player is wrong
but now there's the condition if the
player got it correct but has not won
the game yet so that's the condition i'm
gonna do now
so
if
turn
equals
player order
dot length
and good
and
we haven't won yet
then
turn plus plus so we've now gone to the
next turn
and we're going to clear the player
order
for the next turn to begin
comp turn is going to equal true
[Music]
flash is going to equal
zero
turn counter
dot inner
html equals turn
now there's there is some uh code that's
repeated from here to here so there
could be some room for refactoring here
an
interval id equals set
interval
game turn
yeah again this would be a
prime place for some refactoring since
we have some repeated code here
and that's it for this check function
but within the check function we
reference two functions that haven't
been created yet
the win game function
and the flash color function so let's do
those now first the flash color function
it's going to be very similar to the
check color function so similar that i'm
going to start by copying and pasting
so the flash color
do flash
color
we're going to just set these to the the
other colors so
light green
and then instead of dark red is going to
be tomato
instead of goldenrod we'll have yellow
and this is gonna be a light sky blue
and then the other function is the win
game function i'll put that at the end
so function
win
game
[Music]
and so when the game if someone has won
the game
first we're going to do the flash color
function that i just defined here whoops
and then we're going to do turn
counter
dot inner html is going to be set to
when
and on is going to equal false
so now a user can't click anything
because on is equal false and then when
is equal to true because the game has
been won
and that actually should be the full
game so let's do some tests to see if
anything goes wrong so just saved i'm
going to
refresh here so let's see we'll hit the
power button start
okay
okay let's see what happens when you
press the wrong thing
it says no and then it goes back
ooh
it was supposed to play this again but
it didn't
so let's see what went wrong
okay i have a spelling error right here
so this says sticked it should say
strict
i'm sure some of the viewers probably
saw that i spelled that wrong okay so
that was supposed to be if strict so
let's save that
refresh
let's see what happens here
okay good it replayed from where i lost
now if i should turn onto strict mode if
i get something wrong it should replay
from the beginning to start a new game
if i get something wrong
yep it went down to one it just started
a new game
now let's test what happens if we win
now i'm not going to sit here and go
through 20 rounds to see what happens
when i win i'm going to just make some a
change in the code here
so instead of length
equal 20 i'm gonna change this to length
equal three so we can check what happens
after three rounds for winning the game
here it comes
yep and see all of them light up and it
says win right there and so we should be
able to start again by just pressing the
start button
yeah
and then if we turn we can turn it off
any time see i click the power button
and the light went out and then this
went out
so
we have just created an entire
simon game
everything works i talked about some
areas of refactoring that you may be
able to work on on your own
you can make this design a little better
um some of this code that was repeated
we can try to not have repeated code and
i saw some other places like right here
if comp turn this could really even be
an else statement
and you may be able to figure out a way
to not even have the comp turn variable
but that's something you can try to
figure out on your own
thanks for watching again my name is
beau carnes
don't forget to subscribe and remember
use your code for good