hey everyone and welcome to this
tutorial on learning javascript through
making seven classic games my name is
annie cuba and i'm a software developer
and course creator on youtube in this
course i'll be teaching you how to use
javascript methods and properties in
order to build seven games in order of
difficulty
this will be
rock paper scissors memory game
whack-a-mole 2d breakout frogger connect
4 and space invaders if you are new to
javascript please make sure to do the
gives an order as once i cover a method
of property it is unlikely that i will
go into much detail on it again
by the end of this course you will have
used all of these javascript methods and
properties
now who is this course for this course
is for anyone who has covered the
fundamentals of javascript in theory and
would like to use it in practice so in
other words if you are familiar with
what a function is a variable is what
loops look like and so on this is the
course for you however if you have never
touched javascript before and would like
to have a go anyway please do give it a
go and see how you get on i will be
taking things super slow and explaining
as much as i can along the way
now it is important to stress that these
games are just to learn javascript and
will be the bare bones of the game
this means that i will be giving you the
most basic level of code for the game to
work i'm doing this for two reasons
reason one being that it would be too
much to build a game with all the real
features of the official games as well
as tests for them and reason two is that
i want to give you the opportunity to
take the game build on top of them add
features add levels style them up and
truly make them your own
now some of you might have already seen
this video before this is an updated
version that takes things much slower
with a more beginner approach so i hope
you enjoy it
next up we are going to be making a game
of rock paper scissors in this game i
will be showing you how to make a game
that checks for a win lose or draw
against a computer that randomly selects
either rock paper or scissors
if you pick rock against scissors you
win but against paper it will lose if
you pick scissors and the computer
chooses rock you lose but will win
against paper and if you pick paper well
you guessed it you will lose against
scissors but win against rock if you
choose the same answers of computer it
is a draw by the end of this tutorial
you have used all of these following
javascript methods and properties
okay so let's get to it with our first
example
now this approach as i mentioned is
gonna be a little bit more beginner
friendly i think um
we really sort of take stuff step by
step and we don't use switch statements
we use if else or if statements as well
as
just use numbers more than anything as
well as html rather than just purely
javascript so hopefully you enjoyed this
tutorial and hopefully you watch the
other two as well to show me which one
you prefer better so yeah definitely let
me know that uh let's go
so first off here is my project as
mentioned there will be no styling in
this so i simply have an index html file
and then i have linked my app.js file
to my index html so because my app.js
file is in the root of my project all i
have to do is simply name the file
obviously it's a javascript file because
of the js extension we are telling our
code editor to treat this as a
javascript file
so make sure that the script tag is at
the end of your body
so there we go
all the code that we're going to all the
html code that we write is going to have
to be above
this script tag now we could have used a
dom content loader in the app.js file so
i do that in a lot of my videos too so
that is just another way that you can
work so you can put the script tag at
the bottom or you can use the dom
content loaded
event listener the choice is up to you
okay so the first thing that i'm going
to do like i said i am going to be
working with html and css in this video
is i'm just going to put some h2 tags
so this is my first h2 tag and i'm just
going to put compute computer computer
choice i've got our
computer choice and in it i'm going to
have a span
to sort of break up that h2 tag in which
i'm just going to have an id
of
computer
choice because we're going to want to
pick that out to work within our
javascript file later so we have the
computer choice
i'm also going to have
user choice
so
let's put user choice
you can have your choice if you want
it's it's up to you
and then finally let's also have a
result
so i'm just going to have results
like so and give it the id of
you guessed it results so we can pick it
out to work with it in our javascript
file later
now along with that i'm just going to
have a button
um let's put rock in it and then just
give it the id
of
rock like so
again so we can pick it out in our
javascript
um and then let's have i'm using command
d by the way to select that and i'm
going to put paper
once again command d so i can select
both and scissors
scissors
scissors there we go
so there we go now if i open this up i'm
going to copy the path and simply go to
my browser
this is what you should now see in your
browser so i'm just going to get the
inspect up as well
great
now the next thing i want to do is do
some logics so that if i click on rock
rock will show up here and at the same
time a computer choice will be generated
and then we can figure out who's won or
lost
so for this i'm now going to have to go
to my javascript file
so in here
the first thing i'm going to do is
actually pick out all the uh
elements with these ids so i'm picking
out essentially the span and i'm doing
it by the id
so i'm going to use document get element
by id i could use query selector i'll
show you how to do that in another
lesson but i'm simply just going to pick
out computer choice
like this and i'm going to store it as
const
computer choice so we can work with that
element in our javascript
let's do the same for user choice so
once again i'm simply picking out this
span based by the id
so that's what i'm doing and let's save
this as
user choice and let's do the same for
the result of course so i'm actually
just going to copy this
um
let's call this
result display
and then pick it out by the id of result
because that's what this is it's an id
of result
great
so we've done that the next thing i want
to do is actually
get all the possible choices so there's
many ways i can do it um this is the way
that i'm going to show you for this
tutorial
uh const possible choices and i'm
actually going to use a query selector
to get all of them so document
query selector
all
and i'm going to pick out everything in
here that is a button
element
okay
one thing i could have done is given
this as a class name of
button and if i gave that same class
name to all of these i could pick it out
by class name
but as i only have three buttons here
and i don't plan on putting any more
buttons here okay so keep that in mind
when you're styling it up
if you want to add more buttons
in here perhaps use the class name on
those buttons otherwise this is going to
pick up that button that you create
so const possible choices i picked out
all the buttons so i can use them now
i'm going to grab the buttons possible
choices and for each
button
or i can call it a possible choice
whatever you want plus
possible choice
i want to i'm just going to minimize
this because we don't really need that
for each possible choice i'm going to
grab each possible choice and use add
event listener to listen up for a click
so if i click any of the buttons i want
essentially something to happen
okay so i want this fi we can pass
through a function i'm literally just
going to pass
through a function like so
and then what i want to happen is well i
want to pass through the event
so e for event
and then i want to actually get
the target id
so whatever i click i want to get the id
and i want to save that as um the user
choice but i want to save it globally
okay so i'm just going to put let user
choice so we can access it wherever
so whatever etag the e target id is i'm
saving it to use a choice i'm just going
to save it here so i can use it in my
file
so that is what i am storing so the next
thing i could do is actually
get the user choice maybe we should
rename this because
user choice display because we now have
two user choice that can't have that
display
so now i'm going to get the user choice
display
and using
the property of inner html html and once
again just going to assign it the user
choice
okay
so let's see if that works click
scissors click paper
click
rock
nice
let's carry on
um i'm just gonna actually
put a space there
oops not there what am i doing
you computer choice space space result
space
okay
so we are
displaying the user choice the next
thing that i said i want to do is
generate a computer choice
so let's write a function that's called
generate
computer
um
okay what's that function gonna look
like
generate computer choice so what i
actually want to happen here is i want
to get a random number right
so
uh
i can use const
random
number
and then i'm going to use math
random and then multiply it
by i can use the number three
sure um if that's what i want i can also
use possible choices
length
okay
so that is the same as just simply
putting the number three but for
beginners i'll just keep it as three for
now um again like maybe i'll just put
or you can use
possible choices
length as that will return a three
um
okay
so now that we've got a random number i
actually need to
wrap this in mouth floor to round down
that random number because that'll give
me a random number okay uh and then we
want to make sure that it's a full
integer
let's check that
random number
so that will give me a random number
that's actually from zero to two as we
count in indexes so i could just get
this and add one just for readability if
i wanted to so now let's check this
one
three
two
so it'll always be either one or two or
a three right
so there we go
um so now if
random number
deeply equals
one
let's say that computer choice
uh equals rock i'm just making that up
it could be scissors
let's computer
choice
and then if
random number equals 2
say
scissors
and random number equals three
let's say paper
okay
so
and then let's actually
uh get the computer choice so
computer choice display inner html and
just show the computer choice
so now
there we go
great
cool
okay so we're randomly generating
computer choice and rather regenerating
a choice for us
um as i said i've done it this way as i
think it's beginner friendly however
there is a much neater way we could do
all of this that wouldn't involve saying
equals one equals two equals three which
i'm really excited to show you but i
think as a beginner this probably might
make a lot more sense and it's more
readable but you know let me know
okay so now that we've done that let's
actually get the result so i'm gonna
write another function function
get result
now if
computer choice
deeply equals or equals up to you
um
user choice
well then
uh return
we'll get the results
so
let result
and then we will say
it's a draw
however
oops
so that is one
now if computer choice
this time equals
um
rock oops
and
user choice
equals
let's say paper
then
who wins then
you lost right computer rock paper yeah
fine
now now we have rock and scissors
well then you lost again
and then we have uh
[Music]
actually no you win
you win here computer is rock but your
paper you win i should really learn how
to play rock paper scissors computer has
rock
but you have scissors
you lose if computer has um paper
and you have scissors
you win
if computer has
paper but you have rock
you lose
um
what else is there
if computer has scissors
and you have rock
you
win
and then a computer has scissors but you
have
paper
excuses paper
you lose i think that's right oh my god
okay
cool
so now that we've got the result get
result we've got the function get result
i'm just going to put it in here too so
great every time we click we do all of
this essentially
now i could move this function out
if i wanted to or i could just keep it
there the choice is totally up to you
so now let's have a go scissors the
computer choose paper oh wait the
results aren't showing ah we didn't do
inner
in our um
let's get the result display in the html
result
cool
so paper oh you lose
scissors i chose as a computer choose
rock so i lost i chose raw computer
tools scissors i win
cool it's a draw
amazing so that is how
i would show you how to make rock paper
scissors as a beginner
as i mentioned please take this go wild
and proven as you wish um i did do it so
it's quite verbose and it's quite easy
to read
uh and of course i did these random
numbers here because i just thought
again it was more readable for a
beginner so if you are a beginner let me
know what you think
is this clear enough for you
uh i'm going to move on so once again no
styling of course
let's do it
in this section we are going to look at
memory game memory game is a game where
you as the player have to match two
cards on a board until none are left we
are going to be building out our board
game with the use of these following
javascript methods and properties
by the end of this tutorial you will
have a game that looks like this
okay so once again basic styling so you
can take the game style it up and make
it your very own
okay so the first thing that we are
going to do is start off our project i'm
using webstorm which is an ide that i'm
going to use in order to start my
project of course feel free to use vs
code or whatever code editor you wish
so in webstorm i'm just going to create
a new project so go ahead and click here
it's going to be an empty project which
i am going to choose to call
memory
game
just like so and click
create
and great so once my directory has been
made i'm just going to add some files to
it so i'm going to create a new html
file and let's just call it index.html
so there we go index.html and i'm also
going to create a css file for all our
css
so a new
styles.css file or i could just choose
css
just click on that and of course a
javascript file this is a javascript
tutorial so here we go i'm just going to
call it app.js just like so
so there we go there we have our three
files i'm going to start off with the
html
so let's first off give this a title
this is just some boilerplate code that
has been generated for me by webstorm if
you don't have this generator then
please
pause here and just copy all this out
there we go that's a little bit bigger
for you now we're going to have to give
this a title this is not going to go
show up in our browser this is actually
going to show up in the tab of our
browser so memory game once again this
will not be visible
hopefully you should know about by now
if you code html but for those of you
who need a refresher this will be
i'll just show you now let's go ahead
and open this up
and there we go memory game so i used a
shortcut that webstorm offers me which
is just to click here which will open up
in chrome but if you don't just go ahead
and
copy the path for this file the
index.html file
and just
simply paste it in the browser
like so
okay both ways will work
so i'm just going to inspect the page
to show
you what we're going to be using to
debug we're going to be using the
console log to debug and then we can
also use this tab to see what elements
are in here at the moment there's
nothing in our body tags but as you will
see memory game is showing up in the
browser tab because that is essentially
what the
title tag here does okay make sure that
it is in the head tags like so
okay so first things first let's start
off with some html
now in this game like i said this is a
javascript tutorial so my html is going
to be super basic we're going to be
adding most of our elements
through javascript okay so i'm going to
show you how to do that now first off
actually we do need to link up our style
sheet so go ahead and use the link tag
like so thank you tab nine and the uh
href is going to be
styles css
just like that and let's just close off
our link tag
there we go we can actually just make
this sorry self closing
just like that
okay
so what we've done is we've now linked
up our style sheet we have just used the
style css file as it's not in any
directory so it's just in the root of
our project the same location as like
index.html file so that's all i really
needed to do
here
great and now let's link up our script
so to do this i'm going to use the
script tag
just like so and i'm going to use source
app js
in order to link up our
whoops javascript so
there we go
what i am saying is that after all the
elements have been read then i want to
go to my script tag and read whatever is
in this file
okay so make sure to put it at the
bottom between your two body tags and
once you have that let's go ahead and
start adding some html
so the first thing i'm going to do is
just add a h3 tag like so and in it i'm
going to keep the score
so just like so and then with the span
i'm going to break this up so that's
what the span tag does it breaks up
these two tags i'm actually just going
to pick this out with an id i'm giving
an id so we can pick this up later with
our javascript so we can now pick out
with our javascript this whole element
okay the span the two span tags by its
id i'm going to show you how to do that
later
so we've got our score and then i'm
going to create a div
and actually give it the uh we can give
it the id grid
if we want or we can use class because
we are going to silent up but
essentially we want to be picking this
out with our javascript later too so now
if we look in our
game
we will just see a score okay we won't
see anything else because you know the
span tag essentially doesn't have
anything in it yet and our div here
doesn't have any styling and it doesn't
also have anything in it yet
so great let's carry on
oops sauce sauce
so first things first let's actually get
to
adding some elements to create our grid
in here
so i'm just going to go ahead and open
up my app.js file
so as we saw from the beginning we need
to essentially create 12 cards so we can
do this in javascript and i'm going to
show you how
first off i'm actually going to go ahead
and start off creating an array i'm
going to call it the card array so const
card array
and an array means we open up these two
brackets this is essentially an array
and i've assigned the array to the value
caudary and inside my array i'm going to
be adding
objects okay so this is essentially an
object it's going to have a name
and let's go ahead and call this fries
and then it's also going to have an
image
and i'm going to put a path to my images
which i'm going to store in an images
folder so again in here i'm just going
to go ahead and create a new
directory this time called images and
i'm just going to put in some images
that i have pre-made
okay so here they are in my downloads
folder one two three four five
six
food images one blank image which is
going to be the back of our card and
just one white image for you know if we
get a match so all of these i'm just
going to drag into my images folder i am
going to share this repository with you
in the description so you feel free to
take these if you wish
okay
so there you go as you will see they are
all
here
now
so now
in
my array i'm going to actually put the
path to these
images so i'm going to go into the
images directory i'm going into here and
i'm going to get the fry's png thank you
tab nine
okay so here's our first object that i
have made
and i'm actually going to make another
object this time let's call this
cheese
burger
and then of course this needs to be
cheese
burger too
so we've got our fries object our
cheeseburger object we also need the
hotdog object so name
hot dog
image
images
hot dog
png and we are making this array as a
reminder remember to create our grid
with we're going to use this to create
our grid with all of these images on it
so we've got our hot dog the next thing
i want to do is ice cream
so i scream
ice
cream
what else do we have
we have
milkshake next
milk shake
and this should be
milk
shake
just one more i believe because there
should be six pizza
and the
url
and the
fire is called pizza png okay so there
we go there are six
essential images
and i'm just going to go ahead and get
all of these six
oops
and just paste them again because we
need 12 cards okay we need 12 cards with
two matching each time
so there is our card array now what i
need to do
is essentially
get them
you know
uh in a random order
so
if i just console log out
card array
and look in the console log you will now
see that same entire array that we just
wrote showing up here
okay so now to get this uh sorted
randomly i'm going to show you what to
do i am going to essentially get the
array
and use the javascript method of sort
to essentially sort everything in the
array randomly and to do this i'm going
to use math
run
and this is a nice trick
you just do
that
so this is a little bit advanced so
apologies for this it's just a nice way
or trick to sort an array randomly so
it's definitely one to remember the sort
javascript method works by comparing two
values okay it compares the two values
and then sorts through it and because
math random
the math random that you see here
returns back a number anywhere from 0 to
less than -1 we are checking that it's
either you know smaller than 0.5 or
larger than 0.5 so the first value in
the array is going to go ah it's smaller
than 0.5 and then it's r larger than 0.5
and it will shuffle it based on that
okay a lot to get your head around but
you can watch my uh sort
algorithm explainer i will make sure to
link that in the description below this
is advanced though so if you can't get
your head around it don't worry just
remember that this is a nice shortcut to
shuffling an array
randomly
okay so now if we console log
the card array
it should be
random each time so we've got fries
cheeseburger
pizza hot dog cheeseburger
milkshake cheeseburger fries so that is
working
let's carry on
so now that we're getting a array that
is shuffled randomly what i'm going to
do is use that to create our board so
first off like i said let's go in here
and let's grab the
div with the id of grid and we're going
to grab it by
using the id
so what i'm going to do here is
i'm going to use document
query selector
and i'm going to search for the id
of
grid so this hash here means we're
looking for an id of grid and we're
going to go into our document and use
query selector to search for
the
id so this method essentially looks
through the whole thing and finds a id
that is grid and goes ah okay that must
mean we want this element the whole
thing
so let's save this as something i'm
going to save this as const
grid
display
or we can just call it grid it is up to
you
so now if i console.log
grid display
you will see we have picked out the div
with the id of grid this is looking good
okay so we've got the grid and now i'm
just going to make a little spaces here
so we can see what's going on
once we have the grid i'm going to write
a function called create
board
so this is what a function looks like
there we go and a function essentially
does something and we have called this
function create board so that if we need
we can reuse it or it just makes
everything more readable
so what i want to do is essentially for
each item in my
array
i want to create an element
so to do this i can use four each or i
can use a for loop i'm gonna use a for
loop as i think maybe that's a bit more
beginner friendly
four let i equal zero so i'm just
writing the syntax for a for loop this
is what a for loop looks like
i and then we have a number here
and then i increment by one so this is
the syntax for a for loop what is
essentially saying is that we're saying
start from zero so let i equals zero and
as long as i is smaller than ten you
wanna increment i by one
okay
so
for loop right here this is what a for
loop looks like and essentially what we
are saying is that we want something to
happen
you know 10 times because as long as i
is smaller than 10. we start counting
from zero so we go zero one two three
four five six nine
which is essentially ten items if you're
counting from index zero and then we
stop because i then becomes larger than
10 so we can't execute this loop anymore
so what do i want to happen well like i
said i want to create images right so
i'm going to use document
create element which is a great
javascript method that will allow us to
create an element and i want to create
an
image
so i actually just need to write this so
we are creating an image now let's go
ahead and save this as card
so i've saved as the constant card
and what i want to do to this image once
i create it well i want to add
i want to add one of these images to it
so let's grab the card we have just
created if i actually console log this
out just so we can see everything and i
just consolidated console log out card
and then perhaps i as well so we can see
what's going on and now i call this
function because don't forget we need to
call the function in order for the
function to release all of this
wonderfulness and essentially you know
execute the code in it
so i've call the function now so let's
go back here and refresh this page and
you will see that i'm creating an image
tag each time with the index number all
the way to nine
so that is what i'm doing so far in my
function
so to the image tag well i want to get
the image so we've stored this as card
in our javascript and i'm going to use
another javascript method the method is
called set
attribute and we're going to set the
source attribute to my image as well as
uh for now actually i'm just going to
give it a blank
card
so we're going to go into our images
directory i'm going to get the blank
card so blank
png so now i'm going to console.log out
the card after we've add the source
uh attribute with image blank png
and
we're going to look in source and there
you go you will see the path to the
blank images file
so that's what we have
done
okay
so we've done that we also want to add
i'm also going to add a data id so that
each card has an id that is unique so
data id
and that's just going to be i
so we can keep track of each one so now
let's go ahead and have a look and if we
refresh this you will see the source and
the data id has been added to my card or
in other words my image
tag
so
great and then of course we're still
printing out the number to the side
so now that we've done that we can see
it we need to actually put it in
something we want to put it in the grid
display we want to put it in between
these two tags okay so that's
essentially what we're going to do with
javascript however
so what i'm going to do is get the grid
display
and i'm going to append
the
card
to it we can use a pen we can use a pen
child okay there's actually two methods
to our disposal so now
ta-da we have added the 12 cards
into
our div
with the id of grid
amazing of course you won't see it here
okay
we have done we've added this in
javascript and it is being displayed
here
okay think of this as sort of just more
of a starting point that you want to
start out with and then we're adding
stuff with javascript okay and that's
being added through this script tag so
that's why you won't see it's being
added after
this
and that is what is being displayed in
our browser
cool so maybe let's give this a little
bit of styling while we are here there's
again not much styling in this because
as you know as i've stressed many times
i don't want this to be about styling i
want you to be able to take this game
and truly make it your own style it up
really do whatever you wish to it add
more features add more levels perhaps
add you know like level two will have
many more cards i mean that is totally
an option
uh what i'm gonna do is actually use
display flex
well actually let's give it a width
first let's make it 400 pixels
and height
300 pixels this is because i'm just
going off of the size of the cards i
pre-made
so now our grid
all right we need to well we can pick it
out by the id as well if we want because
that was a class uh i thought i gave
this a class of grid but i'd give an id
of grid so we need to look for the id of
grid
okay
so now
the id of grid
has the
width
of 400 height of 300
but all of these
divs have essentially stretched to fit
it i don't want that
so what i'm going to do
so now
you will see that the grid
has a width of 400 and height of
300
would see we are missing some
cards why is that
uh that's because we're only looping to
ten sorry that's my fault this was the
boilerplate that i
showed you sometimes it's good to see
mistakes though instead of looping over
just saying 10 times we want to get the
array and get its length okay so i'm
going to get the array
and use the
property of length to find out exactly
how many elements are in our array and
how many times we need to loop
so now
there we go
we have
all of our cards all 12 cards
so this is looking good maybe i'm just
going to zoom in a little bit so you can
see everything a little bit better
and i'm also just going to add display
flex
flex wrap
wrap
just to get rid of those lines in the
middle so display flex essentially means
so by adding display flex it means we
can utilize the flex wrap
okay from flexbox to make sure that all
of these did just wrap over each other
nicely just like so
great
so that's actually it for our styling
that's all the styling we're to do so
i'm going to shut this down now and get
rid of the index.html file as well and
let's just focus on our javascript
so wonderful we have created our board
and now
once we've created our board i'm
actually going to write a function that
allows us to flip the cloud when we
click it
so let's go ahead and write our function
for this
function
flip
card
so once again there's our function
that's what a function looks like
and what i'm going to do is essentially
think of which
card i clicked on
so to do this i actually need to add an
event listener to each card as well so
right here i'm going to get the card and
i'm going to use add event listener of
the javascript method that will allow us
to listen up for events so in this case
i am listing out for a click so if i
click on the card i want something to
happen and that something is going to be
the function flip card which i'm going
to pass through here's a call back
notice i'm not calling it okay otherwise
it'll be called straight away i only
want to call it
if we click on the card there's loads of
events you can pass through here okay
just check out the mdn docs i've chosen
to pick click because i want to listen
out if we click we could use mouse over
there's many things you can do
so for now i'm just going to console log
clicked
okay so now if i click on a card clicked
clicked
clicks clicks clicked
so we are listening out for clicks on
the cards that is
pretty good the next thing i'm actually
going to show you how to do is on the
click well i actually want to get the
card i clicked data id
so
let's go ahead and do that now
so i'm going to use the this keyword
the this keyword essentially will let us
use whatever element we clicked
okay
and get its get attribute so i'm going
to use get attribute to get its data
id
okay
and then let's save this as let
card
id
so now i'm going to say click and it's
going to show us the card id because i'm
going to pass that through this can be a
const it's not going to change
if i click it
you will now see that i'm getting each
card's card id so here are the data ids
i'm picking out
and i'm just printing them in my console
log
okay
so hopefully that makes sense please do
have a play around here if
you wish that this keyword is
essentially what is allowing us to
interact with whatever element we click
okay and we're getting its data id and
we're saving it as the card id and then
we'll just console logging it out
so we're getting the card id but why are
we doing this right well we are doing
this so that we know exactly which card
we clicked and we can then pass it
through into our array
to get the name
okay
so that's quite cool and it also means
that if someone's inspecting our code
they won't be able to you know
inspect it and figure out what's under
our cards because we're not saying we're
just giving them an id
so what i'm gonna do is i am going to
get my card array
and i'm going to
pass through the card id that we just
picked out in order to return
the name
okay
so if i just call i'll do this step by
step i'm going to console log the card
id
so console log if i click on this one
well we know the first one has a data id
of zero so let's click it
oops
click
clicked zero and i'm getting returned
ice cream image ice images ice cream so
we know that the ice cream image
lives there now okay and we just want to
get its name and store it in an array so
for the next time that we click the next
one if they match we know it's a match
so let's get this object's name so i can
do so by
clicking dot name
uh by the way actually let's console log
that out the whole card array after the
shuffle
just so we know if everything's working
correctly
so
this one is going to have data id 0
click
clicked on xero
and we have got its name so we've gone
into the array and got its name
because the first item in our randomly
shuffled array has the name pizza and
has the image this one
cool so hopefully that makes sense if it
doesn't please do have a play around
here
so there we go we are getting the card
we're getting the name back from our
random card array and what i want to do
is put it into
another array so i'm going to create an
array up here
and let's just call this
uh const cards
chosen
and make it an empty array i can use
const because you know we're not gonna
be changing the array we're just gonna
be pushing things into it so it can be a
const in fact you know some people would
argue and say that for best practices it
should be a const so i'm going to get
the array and i'm going to use the
javascript message method of push
to push an item into that array and what
i want to push through is just the name
okay
so there we go and if i console log
the card's chosen now
so let's go ahead and click that one you
will see i've pushed in fries into the
chosen array because fries must be here
it's the first one that we go fries i've
just pushed through the name
and if i click another one
i've added ice cream so obviously these
aren't a match and what ideally need to
do is you know clear them out and start
again
so
let's deal with that a little bit
later however
because what i also want to do when i
flip the card is actually add the image
so once again i'm going to get this card
that i clicked or this element and you
set attribute
set attribute and this time i'm just
gonna use source and instead of adding a
blank image i'm actually going to get go
into the card array again pass through
the card id
and get that card's image i think i
support image image okay and just assign
it to the card
so let's check it out
milk shake and pizza
cool and of course they're not a match
so
one other thing that i want to do is if
cards chosen so i'm using the cards
chosen array that i just made and if
it's length suddenly equals two
right because we have two items in there
so we want to check for a match
i'm going to
[Music]
check for a match but let's maybe do
this after some time has
passed or you could do it immediately
but i think it's nice to see both the
cards first so for this i'm going to use
set timeout
and i'm just going to pass through a
function that i want to check so set
timer as a timing event
uh or yes a javascript method that will
essentially
call a function after a certain amount
of time has passed so i want the first
parameter you need to pass through is
the function so we're going to write a
function called
check
match and the second is going to be the
time that i won't pass before we call
this function i'm going to say it's 500
milliseconds
so
let's write our check match
function
check
match
so for now i'm just going to say
console log
check for a match
and i'm actually going to get rid of all
these console logs so we can see
everything a little bit clearer
so
click
oops i misspelled something console log
check for match
click click
check the match okay so obviously two
items are in our chosen cards array so
we're checking for a match
and what do we want to do in our check
for match function well we want to do a
few things
uh first off i want to
get both of the items in my chosen card
array
and essentially check
i guess if
they match
so i'm going to go into my card chosen
array and get the first item and if it
equals the cards chosen
second item submit let's make this an if
statement if
this is true if this statement is true
well then we know it's a match so let's
alert ourselves saying you found a match
of course if you're coding this you
don't have to mix an alert you can make
a nice neat pop-up but you know as i
said we're just doing the mega basics
here
so there is our alert and what do we
want to happen if there's a match
well i'm going to have to
go into the
cards we're going to get the cards so in
fact right before we do this i'm going
to write something that will get every
single card
on my grid and i'm going to do this with
document
query selector but i'm going to choose
query selector
all to look for all the cards so
essentially all the
let's say all the uh
image elements that live inside my div
with the id of grid so i can do this by
just selecting all the images because
you know that it's a small project so i
could just look for the image tag or if
you want to add more images later on and
be really specific you could say that
you want to look into
the div with the id of grid sorry the
dots for class name the id of grid and
find all the images that look inside of
it so that's if you want to make this
project bigger i'm just going to keep
this like this for now because i'm not
going to add anything else in there so
maybe it's a little bit overkill so i'm
searching for every image in my entire
document
and i'm going to save this as cards
okay
so if there's a match what i want to do
i want to get the cards and i need to go
into
the cards and find the cards by their
ids so just like we're saving the names
of our chosen cards here i'm actually
going to also make another array
const
and let's call this
cards chosen
ids
and make this an empty array too so when
we
push the card in we're pushing in the
name but i'm also going to push its id
in
so
push the name cards chosen ids push
the
this items get
or we can just use the card id
so i'm going to push in the card id into
the chosen ids so
i'm going to show you what this looks
like actually now before we move on
console
log
cards chosen
but also console
log
cards chairs and ids
oops
okay so click
so what's happening here these are the
cards chosen and we're also saving the
ids id 0 and 1 have been pushed into an
array and now we're going to use that
because we're going to go into the cards
that we just picked out so all the cards
in our document and we're going to pass
through
the
chosen card ids
first item
and we're going to use set attribute
source
images
white
png so i'm just going to talk you
through this a little bit so what i'm
saying let's just console log this out
console
log all the cards
so one two
so here are all my images
and what i'm saying is i want to go into
i want to find
this card exactly and i know this has an
id of zero so i'm gonna go into this
array and get this
card essentially or this image tag and
i'm just going to assign it the
background color of white if the two are
a match
so
let's just try again a match
okay so you found it's a match and then
i've turned this background to be white
because i've essentially added
a
image
white png to it so let's do the same for
the other one as well
so what i'm going to do is just grab
this line
and the second item in this chosen
cards that chosen id array we're also
going to add a white image
too
okay so if it's a match we add the white
images to those cards
what i'm also going to do is on those
same cards so let's go into the cards
pass through the id the first id
in the card chosen id array i'm going to
remove event listener remove
event listener to stop listening out for
clicks
on the card
okay so that will just stop any weird
activities happening because we want to
remove the abilities to click on the
card
so great and also i'm going to make
another array because we want to start
collecting
const cards
one
okay we want to know exactly how many
matches we have so all i'm going to do
is cards one
and i'm going to push in
the
content of the card's chosen array which
will either be something like hamburger
and fries okay
or whatever two matches i guess if it's
match they'll be hamburger hamburger
so there we go we are recording how many
cards we have won how many matches we
have
great and of course we then need to
start again so after all this has
happened so i'm just gonna do it down
here we then need to get our cards
chosen array
and just make it empty again so we can
start this process all over again
uh
okay so we do actually need this to be a
let cut let
because if we want to just replace this
with an empty array that needs to be let
and we're going to change this to let
one as well because we again are going
to want this to be an empty array
so we can start the whole process
again
wonderful
so we have read the logic of what
happens if the two cards are a match
now
we can also do something to alert if we
click the same image so if
uh cards
actually maybe let's
save this
i'm going to save this up here as const
option
1 id
just to make things a bit really easier
to read for us option
2 id
and that's going to be the card second
id in our cards chosen ids array
so now i can just simply use this
variable
instead
just like so
because i am using it quite a lot so
this just makes it a little bit
neater
so now if card option 1
so if the id
equals card
option
2 id well then let's just do an alert
you click the same card because
that is technically true you have
clicked the same image
so that's all i want to happen
cool
and then we can start again as well so
if you click on the same image we're
going to reset everything
great
so
we've done something for if you know you
click on the same card
we've done something for if
we found a match
but now we need to write something for
anything else that happens so if it's
not a match
then what do i want to happen i guess
we just want to change them back to
being
blank right so we just want to flip them
back so i'm going to do that by
getting the blank
image which actually isn't blank we're
just turning it back to this one okay so
we flipped it over it's become a
cheeseburger it's not a match so then we
have to flip it back to here however if
it was a match we just want the white
one
okay so that's what i'm doing
i'm flipping it back and then we empty
both the cards chosen and the cards
chosen id array
so there we go
and then let's also do an alert that
says
try again
great
now
the last thing that we want to happen in
the check for matches function is if we
get all of the
cards right so if suddenly cards
one so a quads one array
length
equals
the card array
length
but then divided by two okay because
obviously if
there's
uh 12 cards we can only get six matches
so that is what this line
says
we don't actually need to have this like
so
and then we can you know you can do an
alert
or we can
also
to show it in the result so i'm going to
grab this span by the idea of result
and
maybe let's go ahead and
pick it out
the same place we do the grid
so we're going to use document query
selector to pick out the id of result
and let's save this as
result
display
just like so
so if
it's the end
i'm going to get the results display i'm
going to use inner html
to say
congratulations
you found them all
okay
uh and otherwise i actually want to just
add the score to the results in html so
we add the score when we find a match
right so i'm just going to get the
results in html
and what do i want to display well
actually we could just show this let's
just show as a default after every time
that we click check match and i'm just
going to show
the um
i guess the cards
one
array length right because again
if we get if we push something into the
cards one array we get it's just like
getting one point uh instead of inner
html we can also use
text content if we wish so maybe let's
go ahead and put that here as well
and then of course we also need to
change these back to being
blank
great
so
i think this is it
let's check it out
so
that's a match we found a match we get
one to the score these term blank
that's not a match try again
and as you can see here you can't cheat
and inspect right so we're literally
just guessing
i'm not really paying attention maybe i
should be
there's a pizza there's a pizza found a
match there's two points
cheeseburger
milkshake milkshake
cork cheeseburger cheeseburger
cool
ice cream hot dog
hot dog hot dog and let's see if this
works
found a match and congratulations we
found them all and we can't click on
anything else because we've removed the
event listener from all their cards
amazing so hopefully this made sense
i've really enjoyed teaching you guys
how to make this game of memory game
again it's just the mega mega basics
please take this game make your own
style up truly make it incredible make
pop-ups add more levels i can't wait to
see what you have made
now we are on to our third game which is
going to involve some timing events
in this section we are going to build a
game of whack-a-mole this game will
involve us having to build a grid that
randomly displays a mold that we have to
click with our mouse in order to get a
point we have to get as many points as
possible in the time we define
by the end of this tutorial you will
have used all of the following
javascript methods and properties
so what are we waiting for let's get to
it
okay so first things first here is my
file setup in which i have some standard
html boilerplate making sure that my
style sheet has the correct path
to my actual style sheet which is here
and same for the script tag to pick up
my javascript
making sure that the path the relative
path is
the same
so the first thing i'm actually going to
do for my game of whack-a-mole is uh
make a grid so above the script tag make
sure it's above the script tag i'm just
going to make a div
that has the class of grid
and in here well i'm just going to put
in nine divs as i want my wacomo grid to
be three by three
and then i'm gonna give each of them a
class
of square
i could technically add these in
javascript but you know it's not that
many so i'm just gonna
put in the nine divs each with their own
id
so one two
three
four this is so we can identify each one
but i want each one to look the same so
i'm going to style all of them as
squares and that's why i have chosen to
do it this
way
so there we go that is our grid we of
course need to style it so we can see it
while we are here i'm also going to add
a um h2 tag for the score
so i actually want my score to show up
here i'm gonna hard code it as zero and
just give this idea of score so we can
pick it out later with our javascript
i also want to have another h2
tag that is going to tell us how much
time we have left
so i want the game to count down from 60
seconds
and i'm just going to put time
left
and you know what i'm also going to give
them a label so quite simply i'm just
going to make it really basic please
style this better than the way i'm doing
it right now i just want to give you the
sort of um skeleton
to make your own so your score
and then time
left
okay this is looking good let's style it
up so we can see it in our browser
so in here i'm just going to pick out
the bridge
and then the grid well i'm going to use
display
flex and i'll show you why in a bit
um actually let's get rid of it so i can
show you so i'm just going to get rid of
it for now i'm just going to give this a
width so let's say each of our squares
is going to have
let's make each square 200
pixels uh wide and high
so which means this would be 600 pixels
and this height
of 600 pixels
so that will look like a square and then
let's
um we could give it a border or we can
give each square a border so let's do
that
so every square with the class
of square every div sorry with the class
of square we know we're looking for divs
with classes because we put the dot same
for grid we're looking for a class a div
or an element with the class of grid to
style
so let's make each square we decided
that each square we want to be 200
pixels with our 200 pixels so height 200
pixels with 200 pixels and then i'm
actually gonna give each
one
let's give each one a border
um
i'm just going to get bought a color and
be really simple of black
okay
so this might be a problem because i
don't know how thick the border is
in which case our grid might look a bit
strange but let's go ahead and see
so i'm going to copy the path and i'm
just going to put it
into our browser
so
here is our grid
you can see
all the squares inside it however
they don't seem to have the border color
that's because we need to give it
a
border style
of solid
you can actually maybe just change this
it's too much for me i can do border
solid black one pixel
so that's another alternative it's just
like a shorthand of what i wrote before
and i'm also assigning the border width
so that we can know
how big the border is going to be so now
if i refresh
we now get the nine divs stacks over
each other what we need is for them to
snake over each other so that they can
fit in
and i could do so by adding display flex
to my grid
so now if i refresh it
see all the squares will try fit into my
grid
so if i go on grid there's the grid and
they're all trying to fit in it
i want them to stack over each other
like a snake
so i can do that by adding
flex wrap
wrap there we go
now they don't fit the third one isn't
going here and that's because
we need to make the grid fit the border
two so what would that be one two three
four five six
so width six
606
and height six or six
and there we go the squares now fit
perfectly into
my grid
so this is looking good
if i want to see grid um sorry square
with id3 it's that one four is there
five is there six is there seven eight
nine it's literally snaking around
perfect
let's carry on
okay now i also want
i'm going to go ahead and make the mole
for the moment i'm just going to give it
a background color of blue but obviously
we want to switch this out later so we
actually probably want like a more image
i'll show you how to do that but for now
i'm just going to have the class of mold
to be blue so for example if i add the
class
of
mold here
and
refresh you will see that the third
square has a classic mole so that square
has turned blue we can even see it when
we inspect the elements so that's great
let's just pretend that's our more for
now until we get an image to put there
next up let's do some logic so let's
move on to our app.js
file
okay so actually i'm just going to
remove
the mode class from here
because we're going to add it
with
our
javascript so the first thing i want to
do is actually select all the squares so
we can work with them in our javascript
file
so i'm going to do that by using the
document query selector so i'm not
making this up
document query
selector
all so that's the javascript method that
will essentially help us look for any
thing with the class name so dot of
square
so we're going to search for all those
and we're going to store it as
squares
okay so we're finding all the squares
and we're storing them under squares
now even though we don't have it because
i removed it i'm actually also going to
store the mole so i'm going to go
document
query selector
not all because there's only going to be
one mole at any time and i'm going to
search for the class of
mole
so now we have our squares we can work
with them and then now we have our mole
if it's on the page that we can work
with
okay we have two more things to pick out
so we can do them later and that is the
element with the id of time left
so once again document i could use query
selector or i could use uh get element
by id but just so you know in query
selector if we're searching for a
element with an id we need to use hash
and then the name so this is like an id
we're searching for an element with an
id
of time left
and let's store this as
time left
and then finally one more thing and
that's the score
so this thing right here we need to get
this element so that we can manipulate
this with our javascript
so once again i would get document
query selector
and then look for the id of school
and let's save this as score
well maybe yeah let's just save a score
that's fine
great
so
let's start off with the result as zero
even though we've hard coded it we need
to tell our javascript the result that
we start with is zero
and we'll do the time a little bit later
um
let's actually focus on getting the uh
game to work
so i'm going to write a function called
random
square so we want to get a random square
to put our mole
now in here for each square so i'm going
to grab all the squares
and using the javascript method of for
each
so that is a javascript method
i am going to
get the class name
so i could put i here i could put
whatever we want i could put square
so
we could actually use square maybe that
makes more sense so for each square in
our squares array
i essentially
want to
get these square
and i want to go class
list so that is the javascript property
and i'm going to remove the mole if he
exists on any of the squares so we have
a fresh
slate to start with
so that is what's happening here i'm
going getting each square and for each
of the squares i'm removing the class of
mole so as the first step that we want
to do in our function
before we start adding omo randomly
so i'm going to write let random
position
and then i'm going to use so once again
i'm going to go into my squares
array and i am gonna pass through
so if i pass through a zero into my
squares array it would literally get me
that first square if i pass a one well
then i'm talking to the second square in
my array i need to pass you a random
number in here okay i want to pass
through a random number from
essentially
uh
zero to eight
because i want a random
index from zero to eight because there's
nine squares and we start counting from
zero
so i'm going to do this by passing
through the javascript method of
math
random like this
and then multiplying it
by
9 but i'm also going to use math floor
to round whatever that number is down
so for example if i console
so now if i
console log
random position
and look in here
i need to actually call that function
so random square
random position before initialization
okay
that's because i console logo up here
whoops
there we go
and refresh
i'm going to get literally a random
square
each time each time with an id
from one to
nine
okay
there we go
so that is it that's what is happening
here if i actually console logged
just this
you will see that once again i am
getting a random number
from essentially
zero to eight let's check that
math
rand my trusty mdn
okay math random one has a function for
a floating point in the range from zero
to less than one okay so in this case
it's we multiplied by nine so zero to
less than nine
so that is exactly what numbers are
getting back and we're rounding it down
so that's what we're doing see no matter
how many times i refresh this we'll
never get anything above eight because
we're rounding down okay so eight's
gonna be the highest and that makes
sense because zero one two three four
five six seven eight do we only go up to
the eighth index
so hopefully that makes sense
uh i have a read of this from mdn if
you're not sure and have a play around
with it but that's exactly what we are
doing here
great so i'm just going to get rid of
this for now
okay
now whatever random position we should
probably have random square i'm going to
have random square because essentially
what we're getting back is a random
square as we saw for the first console
log so for whatever random square we
have i'm going to use class list
add
more class
so once again we should now get a blue
scare
in a random position
so that's our mole every time you
refresh the page
putting itself in a random square
let's carry on
so i'm happy with that but i actually
want to put this on a timer so i want
this to be on a timer
um so what i'm actually going to do is
instead of just having the function like
this
i'm going to write this in another
function so we can attach it to a button
if we wish
move mole
and then i'm going to put let timer id
equal null because we need to actually
stop this timer interval from moving and
i'm going to use the javascript method
of set interval
to move the mole
so i'm just going to put random square
to generate a random square and let's
say every 500 milliseconds
so this is a so now i don't need this
here
and nothing will happen if i refresh the
page
however if we
invoke the function or call the function
which is why i want to do this in a
function because you now have the option
to attach this to a button if you wish
right because if i do this now it will
just start on the page load see
we're getting i'm not doing anything we
are getting a random square light up
with a mole every 500 milliseconds
so that's some extra work for you if you
want it at the moment i'm just calling
the function on the page load but you
can attach it to a button if you wish
so that's working
um
it is essentially
on a timer and we can use this timer
which is why i've done it like this i
could have just done
that
but because it's on a timer we can
actually use this timer to stop i'm all
again in our button if we wish so that's
that's optional for you that's why i've
put it there
um cool so the next thing i want to do
is actually
listen out for if we hit the mall
because we want to get a point each time
we hit the mall
so i'm going to do this
up here
and now i'm going to grab the squares
and for each square
um for each
id in the square
i am going to get the id and use add of
again this could just be square so let's
just maybe put this with square makes
more sense for each
square in our squares array i'm going to
add an event listener
to listen out
if we
put mouse down
so you show me click
on the square
and then i'm just going to put a
function here
so i'm passing through the event and
then a function of what's to happen if i
click the square
and if the square id
equals
the square that is the random square
so let's actually save that um
i'm actually going to
put so we want to save something i'm
going to put hit position
and then i'm going to get the random
squares
id so i'm literally getting the id of
the square so i'm getting this thing
right here and that's how we can do it
so i'm getting the id of the random
square and i'm saving it to hit position
so perhaps i'm just going to put let hit
position leave it as blank
if the square id
equals whatever the hit position is at
that point in time
then i want to get the result
and add one to the result
cool i also want to display it in our
score so score
let's do text content or in html
whatever you want equals the result
okay and then i also want to make the
hip position
oops so clear out hit position equals
null again okay
cool
i can just spell that right hit position
so this is looking good so
amazing so that's what happens if we hit
a mole let's see if that has worked
now we've got that working we are adding
a score each time we hit it the last
thing we need to do is actually get our
timer to stop working
so let's do that i'm going to do that
below here
and then slow it down so we can see it a
bit because it's way too fast
so i'm going to write a new function
called countdown
and then in here
so in my function
uh well with each time we invoke this so
i'm going to put this
um
once again because i'm not attaching it
to anything i could just put set into a
vowel
so i'm just gonna put this down
here and call this let
um
count down
timer id so we can stop it if we want
equal set interval
and then i'm going to put this on a set
interval so i'm literally going to pass
through the countdown function
and i want the countdown and function to
invoke every 1000 milliseconds so it'll
be like one second two seconds
three seconds and each time i want
something to happen and with that i want
to get the current
time so let's actually write um
let current time
equal 60.
so i want to get the current time
and i just want a minus one from it and
then actually want to display that i
want to display that in the time left
so
time left
text content
current
time
okay
so that's really it
uh
if however current time
equals
zero
so like we get to the end
i want to clear the timer so clear
interval
count down timer i d
okay so i want to clear this
and then maybe let's get an alert
that says
game over
your final score
is
and then the result
so that is looking good
let's have a go so to make this a little
bit faster i'm just going to change this
to 10. let's see how we're doing 10
seconds
so zero you can see the time is working
we're clicking we're clicking on the um
mole we're getting points
and then as soon as we get to zero game
over your final score is nine we could
do with the space there but that looks
good
awesome you can see this is still moving
around we can actually stop that thanks
to
this timer id so i'm just going to move
this out
so it's global
and we can use it here so we also want a
clear interval timer i do
let's try that now
once again
let's click click click click
click click click click
go score five go to scroll
okay then we have your find some scores
five
zero and it stops moving
so there we
have it
we have now built our game of wekamo
um if you are interested in how to get
an image let me show you that very
quickly
so i'm just going to use uh this
whack-a-mole from my github feel free to
take him i've already pre-made them to
be 200 by 200 pixels so let's just
download that i'm going to save image
and let's save them as short mold that
sounds good and downloads and then i'm
simply
just
gonna very basically
dragging off a limb in here
so there he is
and then in my style sheet instead of
having background color blue
i'm gonna have background
image
and then i'm going to put uh url and
then the path to my mole so it's the
root so i just put ro mole
jpeg
because it's a jpeg
and then i'm gonna put
background
size
cover
so let's have a look at that
and there we go we have our little
mole
moving around
so
oops game over find squares three let's
fix that space
okay score is put a space there and
let's make a move faster so let's get a
random square every 500 milliseconds
again and let's change the current time
to start with 60
seconds so once again boom boom this is
more realistic you can of course add
levels you can make them go as fast as
you want like this is really fast
you will see the score adding
and you'll see the time left
so that is it i hope you've enjoyed this
tutorial on how to make whack-a-mole
without canvas
and practice your timer skills
thanks very much for watching and i will
see you soon
in this game we're going to be building
2d breakout another retro game the aim
of this game is to break all the blocks
that you see in order to complete the
game and of course once we are finished
doing this giving you the bare minimal
logic and code in order to get this game
working i would love for you to take
this game style up give extra levels and
share it with us on twitter i can't wait
to see what you built
okay so let's get to it
the first thing that i want to show you
is my setup for the game
so as always i've created an index.html
file with some boilerplate so i've
simply given our project a title i've
linked our style sheet so this cell css
file to the html file making sure that
the path is correct so as this file is
in my root or the root of the project
that is fine and i've also chosen to put
a script tag at the bottom of my body
now make sure to make the path uh
correct as well so index.js is fine as
the index.js file is in the root of my
project
okay so i've chosen to do it this way
you can also choose to use a dom content
loader on your javascript page as long
as the javascript is after
any html elements you should be fine
okay so
that is it these files don't have
anything in them yet the first thing i
want to do is actually make my grid
so i'm going to do this
by simply putting a div here
with the class of grid
so like that which i'm now going to
style up
in my style css file
so i am picking up the class of grid and
i am telling my css file to class by
using this dot
so let's make our grid i don't know 600
pixels and a height of 300 pixels
and i'm just going to give a border of
solid
black
one pixel so we can see it
so go over here
copy the path
and then in here
just gonna paste the link
and there we go
there's our grid
it's going to inspect the page
so we can see our console log up too
okay
now the next thing i want to do is
actually use our javascript to start
putting in the blocks so essentially
what i want to do so instead of
literally hard-coding it in the html
like this
so let's just make a block for now we've
got a class of blocks once again let's
pick out the class
block
and i'm going to give it a width of 100
pixels
and a height of 20 pixels any background
color
of a blue
so now if we go back here refresh
that's our block
now it is important that because i want
to be making loads and loads of these
blocks and i'm also going to want to
know the position of each block as well
as the
i guess positioning of all of these
corners
i'm going to make my
uh i guess identifier or how we're gonna
be moving the block this
bottom left corner
okay so what i mean by this is i
essentially i'm just gonna give this a
position absolute
not relative but absolute so that we can
move things around
we need this here uh in order to use the
left
property so not on here i want to use on
the block
so i'm essentially using my javascript
going to be adding left margin and
bottom margin to all the blocks to
position them so what i mean by this is
if i just go left 50 pixels
refresh
i've moved the block
left 50 pixels from this point right
here okay
well essentially from this but i want to
make this this sort of anchor point
of our block
so i'm going to be using left and bottom
to do so once again i'll just put 50
pixels so you can see
there you go you will see that the
bottom margin and the left margin are
the same from this anchor point right
here that is now from now on our anchor
point of each
block
that's important that's what we are
gonna be we're gonna be adding left and
bottom but using our javascript
so just get rid of that for now
so
we've done it
we have created a blog but we wanna do
in javascript and we want to make 15 of
these blocks okay we'll make 15 of these
so first off let's start by making one
right
so to do this i would use let's store
this as block so const
block and i'm just going to use document
and create elements so there's a
javascript method that i can use to
create an element and i want to create a
div
so we've created a div we've stored it
as a block
next i want to give my block
the class list that i have already made
of block
so without the dot each time this time
i'm going to add the class of block to
my newly created div that i have called
block
and the last thing i want to do is
actually grab the grid
so oops grid
so i want to grab this grid i'm actually
going to delete this now don't need it
i can grab this grid by essentially
getting so once again a document so i'm
going to enter the document and i'm
going to use query selector
to look for the class
of grid so i am telling it i'm looking
for the class of grid i have to tell
query selectors query selector can look
for ids and all sorts of things so i'm
telling it i want to find the class of
grid i want to store this element as
let's say grid
so now that we have our grid i'm going
to use a javascript method called append
child so i'm not making up that exists
to put in our newly created block
with this style of block
okay
so let's go check it out
and there we go
we've done that with javascript okay
we've deleted the one we hard coded and
we've added that with javascript
so that is pretty cool
but i need 15 of these
so i need 15 of these and for each one
of these so i'm going to use grid
style and as we said i'm going to use
left
so let's just say for now i'm just going
to put
as you know 100
pixels just to show you that it's
working
and grid
style
bottom
50 pixels
okay so
fresh
oops not grid remove the grid i want to
move the block
swoopsy daisy
refresh okay
great so you now move the block
bottom 50
left 100
oops
cool so i'm just going to put this in a
function
let's say
draw my block
function
add block
i'm just going to put all this in here
fun
chin add block
okay so
add block
you go
save that
okay now refresh
there we go so now only when we call
this function we will create a block but
like i said we want 15 of these and i
want all of these to be different for
each one
so to do this i'm going to create
a
class a block class
so create block individual
and i'm going to use class for this so
class block that's how far we want to
deal with a class
and then for this i need a constructor
so once again as we discuss on x and y
axis so x-axis
y-axis and this is going to be the
bottom left of our block
and using this bottom uh left x and y
axis i can essentially decipher all four
points of my block and where they are on
our grid
and i'm going to do this using the width
of the block
so let's save that const with block
width
and we know this is
100 and the height which is 20. so 100
and const
block
heights
which is 20.
so now using the x y axis let's get all
so this bottom left
well we know that the bottom left is
just the generic x and y axis so i'm
just gonna put x axis
y axis so whatever we pass through into
our block constructor that's gonna be
the bottom left of our block
then let's do bottom right lips bottom
right
oops
and i'm going to pass through so to get
the bottom right
the x axis
is
we're going to have to add to the x axis
the y axis is going to
keep the same
so yeah bottom right
x axis move it over 100 pixels y axis
the same okay yeah that's right cool
now we need to get the top left
and the top left is going to be the
x axis and then the y axis we need to
add the height
lock height
and finally this top
right and the top right is gonna be the
exact
like
opposite as in
um
you know the other corner completely so
we're just gonna get the x axis
and add the block
width and the y-axis and add the block
height
so hopefully that makes
sense we essentially want to find out
where each point each of the four points
of our block is on our grid at any given
moment in time and we can decipher all
of those from the bottom left x and y
axis
okay so that's how we're going to be
creating all 15 of our blocks by passing
through two values
great
so now let's actually make an array of
these blocks so const blocks this is
going to be
all my blocks
constant blocks
and then i'm gonna create a new block
and i'm gonna pass through
well i guess on the first one i just
want to make one here so again we need
to add a left so let's just add a left
margin of 10 and because this is 300
pixels
i don't know let's just put in 270 and
see what that looks like so 10 to 70.
so let's just try with this one first
uh draw
all my blocks
instead of add block i want this to draw
all of my blocks so well we need to make
function add blocks plural let's change
that
and we need a for loop
so for let i
equal
zero
as long as i is smaller than the blocks
array length at the moment it's just one
in there but
for the future we implement i increment
divided by one
okay
now as long as we want to loop over our
blocks around keep creating these blocks
so we want to essentially get all of
this code and put it back in here
okay so create a block
add the class of block then we want to
get the block
that's left and instead of just hard
coding something
well we want to go into the block
so
we go into the blocks array
and then
get the our first item so just i is fine
because we're going to be looping we're
going to get that first items
i'm going to style it so we want to get
this
x axis from the bottom left okay because
we're going to be working with this
so we want to get the x axis and assign
it to the left
so
bottom
left
and the first items we do like that
so hopefully that makes sense um
let's just look at this again
so we know that we need to give our
block styling from the left
so we want that to be essentially this
so that's the styling we want to get
from the left
so and i just use this as the sort of
anchor point
so i just want this value right here
okay
so i can do that by going into the
bottom left and grabbing the x-axis that
will give me 10
because that's how this works by
creating a new block i'm passing through
a 10 to be the x-axis i'm passing
through 270 to be the y-axis and then
i'm getting all the other values so
maybe it's worth me console logging
this
console log
blocks and let's just get the first item
so this
refresh
cannot okay let's just i'm just going to
comment this out now because it's
throwing errors for us
okay
so that is my newly created block i pass
through a 10 i pass through 270 and from
it we get all four points that will
create our block
so the x and y axis
of all of them
okay i hope that makes sense we have
generated all of these just from passing
through two parameters
so now we know where each block is and
all four of its points and we're going
to use that for collisions
so we've created one block but we want
to create
loads of blocks so first off let's go
back to this function we want to add
the styling of 10 pixels so we need the
px
to the left and we want to add
so once again let's use
our anchor
so i'm going to go into the block
first block so i'm going to go sorry i'm
going into the blocks array i'm grabbing
our first block
and then i'm using the anchor so i'm
going to use the bottom left corner to
get the second value so the y-axis which
we know is 270.
and then i'm going to
just assign to pixels and then we're
going to put that in our grid
so let's refresh
cannot read property 0 of undefined
and there we go
we've drawn our first
block
now let's get to drawing the others so
we just have to now create blocks this
is so what's so good about creating
classes
2 3 4 5 6 7
8 9 10 11 12 13 14 15.
okay so we've got our first
block
i need to put commas that's fine i'm
just gonna
d d d d d d i'm just pressing command d
to do this
and i'm just gonna go like that
there we go
so now our second block well let's put
that in position let's add
110 pixels
to the
left so the x-axis to move along left
for this one let's add another 110 to
that so 230
another so 340
and then another so 350
um i think fine should be
five should be okay let's see what that
looks like
and obviously we're looping over so as
many as we add we will create
and that looks great let's maybe chop
off the grid a bit
hold on
it's too big so let's make it 5
70
okay maybe 560.
okay
done it
okay so we've got one row i want three
rows
so i'm just essentially gonna
maybe i should just use one two three
four one two three four five let's
delete these
i'm gonna use these and instead now i'm
gonna move the y axis
so instead of two
i'm gonna have two forty so i want it
closer to the bottom
two from two to fourteen
and then the fine let's see how it looks
actually first
that looks good
and then once again here i'm happy with
those so i'm just going to copy i'm
happy with the x axis for each but these
i want to move closer by 30 each so once
again come on d come on d come on d
10. oops not that one though
and amazing we have created all of our
blocks
pretty cool
so now we've done that
i'm pretty happy with this we've drawn
our blocks
let's get to creating a user
so just like we did before
and user
i'm going to let's store it as user
i'm going to get my document
i'm going to create
element i want to create a div
now use that i want to style classlist
ad and i need to make a
essentially i just want to make it the
same as a blog
i'm just going to call it user and maybe
make it purple
so we can see
the difference so this time i'm going to
add the class of user and once again i'm
going to get the grid i'm going to use
append
child to put in
so i use what appeared there but we sort
of want to move it here right so we want
to move it in this row and down here
so
[Music]
what like just like we did here um i can
do that
i would get the user use style
left
and then
well let's give it a position
can't start
position
well actually let's call it user starts
we don't know what other starts we want
and then let's make it start we want to
make it start in the same x axis as the
middle one so 230 and let's just say 10
pixels from the bottom so we've got our
user start that's where our user is
always going to start
but then we also need a current
position
okay let's just do it yeah so we have a
user start from where you always start
no matter what no matter how many times
you're refreshed but then because we
want to move our user left and right
we're going to have to track that so i'm
going to have a let
current position as this will change so
it needs to be a let
and to start off i'm just going to
assign that to the user's dot
so i hope that makes sense
um it will in a bit we've got a sign
position then i'm assigning that
starting position to the current
position of our user because that will
always change
but we want it to be that to start so
we've got our current position and the x
and y axis
now just like we did here i'm going to
get the current position
and i'm going to get the
x axis from it so the first value
and just use pixels
and let's do that for the style bottom
two of the user so go into the current
position get the second value
and add pixels
cool
so now if we refresh
that's where our block where our user
block will show up
okay so we've done that
now let's go to moving
our user left and right
so i'm going to do this
so we've added our user
move user
okay to move our user we're going to
have to use keys
so i'm actually going to write a
function called move user and pass
through an event
and then i'm going to use the switch
case to listen out for keys
okay and i'm going to use a switch case
for this because we're simply going to
be listening out for our left or our
right and we can use a switch case for
this
um
so this is how you write a switch
case you would pass in through something
here and if it equals the case then you
execute the code and then you break out
of it
so if you haven't looked to switch cases
please do but this is what we're going
to be using
so i don't know how many you know about
keys on your keyboard but essentially
oops
if what i'm writing here so case arrow
left
if
so i'm passing through the event and the
event if i par if i literally click a
key on my keyboard and the value
assigned to that key has the value of
arrow left
then
i essentially
want to move
my current position right so if i press
arrow left i want to
take away from the x-axis of our current
position
so i would do so by grabbing the current
position
and this the x-axis so the first
uh
item from that array i'm just going to
minus 10 to the value okay so i'm gonna
do that and then once again
i'm going to
reassign
value
okay
so actually i'm going to be using this a
lot so i'm going to put this in its own
function i'm going to call it draw
user
function i'm just going to do this to
avoid repetition draw user
i'm literally just going to take this
code out
and replace this with the function draw
user
to make our code cleaner
so now instead of drawing the user again
here by literally writing out that code
again i'm just going to put full user so
we're going to move the x axis position
and we're going to redraw the user so
that is what we're going to do
and then we're going to break
so let's check that out first off we
need to attach this so let's grab the
document again and use a javascript
method called add event listener to
listen out so i'm not making this up key
down is an event that we can listen out
for so we're listening out to any time i
press any key on my keyboard
that's what key da p down does you can
have key up as well i think key down
makes more sense than just singing out
for when you take your finger off a key
and then i'm going to put move user so
the function
so anytime i press a key down on the
keyboard we're going to listen now we're
going to invoke this function
and then see if the key is our left and
if it is we're going to move the x-axis
of our current position 10.
so let's do this and pressing left there
it goes left it's moving 10 pixels
awesome
but it also goes off so that's a problem
let's fix that
we're going to fix this with an if
statement
so case our
left
i'm just gonna write if
as long as the current position so the
x-axis of our user
is larger than zero so as long as it's
larger than zero
then we execute this code okay so that's
all i'm writing as long as our user
so this point right here
is larger than zero because this is 0
then we can move left otherwise we stop
we don't execute the function anymore so
it appears like we are stopping
so that's what i have done with that
let's now do the same so there we go
for
the case
of if we press arrow right
so it's essentially the opposite if
current position
x-axis
is smaller than the board
width
we declared what the board width is
yeah
const
board
width equals
560
60.
so as long as we're smaller than that
we want to get the current position
and let's just add
oops add 10 this time
and then we have to redraw the user
right because it's got a new position we
need to re-control the user
let me break out of this
so let's see
[Music]
it's not stopping ah
but it stops there
this is because this is our anchor point
remember so we're gonna have to minus
the width
of the block
so minus
block
width
so now once again
stop nice
stop two
this is looking girl
and i like it
let's carry
so we are moving our user that is good
i think the next thing we want to do is
create a ball
so add
once again let's create a ball let's use
document
create element to create a
div
now let's get the ball and use class
list add and then a class of ball which
we have not yet written
let's do it now ball
uh let's make it width 20 pixels height
20 pixels
border radius to make it look like a
circle 10 pixels
background
color
red
we also need to give it a position
absolute as with everything if you want
to start assigning it left and bottom
uh values
so we've created the ball we've styled
the ball now we need to grab our grid
and use the pen child
child
to put the
ball in it
so put it this is the parent we are
putting the ball inside the parent
that's why it says append child
and that's apple
just as with the uh user let's give it a
start position
so
const ball start this time
we'll start equals and then
uh
[Music]
i guess
let's just make it a little bit higher
let's see how that looks
we'll start
and then let
ball
current
position equal
full starch
save that
and then i'm just gonna grab the ball
and use style left
to use the
current ball current position ball
current position
first value plus the string of pixel
and ball style
right
now we want to get the second
value so let's see what that looks like
that means
i don't want it there
right
oops that's going to be bottom
because we're assigned from the left and
the bottom
okay
just going to move it over a little bit
so it looks more central so i'm just
going to change this to i don't know
okay
so that looks good
okay
so we've added our ball
just like with the draw
user i'm going to do the same for
the ball so draw the ball
[Music]
grab the ball
actually i'm just gonna once again
i mean it's just
neater for me to reuse this function as
we're going to be using a bit
so that's our function now i've just
essentially taken it and there we go so
i've drawn the ball
next up i want to work on moving the
ball so
move the ball move
move
for this i'm going to write a function
i'm going to call it function if i can
just spell it right function move
oh
okay
so we essentially want our ball to
uh
move by adding an x and y axis
so let's just say we want to make it
move uh
like
like left and right so it looks as if
it's going to the top
uh right
corner of our grid i would do so by
getting the ball
current position
x axis
and adding
two
and i will do the same
for the y axis
so that will essentially move our ball
and then of course i would have to
redraw it
draw
four
okay
so now let's actually put this on a
interval
so to do this i'll put set interval and
i'm going to pass through the movable
function and let's say you invoke it
every 30 milliseconds
so now
there it goes
awesome
but it's going off the grid it's going
through the blocks we need to next
tackle all of this stuff so let's tackle
it not going through the grid so when it
hits the walls of the grid i want it to
change direction so let's do that first
so first off i'm actually going to put
this on a timer id which i'm going to
declare at the top
i'm just going to leave it blank
and we're going to have to clear this
timer id
when we want the ball to stop so i want
to stop this interval by running by
getting that timer id and passing it
through clear interval
so we've put that on a timer the next
thing i want to do is only make
the when i want to change the direction
of a ball if it uh hits a wall
so let's write a function called
i'm going to check for collisions
now let's actually write the function so
function check for
collisions
okay
so first off
let's
check for
wall collisions
as i said
collision
[Music]
and i could do this by basically saying
that if
full current position
x-axis
is smaller than sorry is larger than or
equal to the board
width
once again minus
we need to account for the ball width
itself so let's just put ball diameter
as the ball width and ball height are
going to be the same
so ball diameter
constant ball diameter
equals 20 because we know that because
that's the width and height we gave it
so if the current position is larger
than or equal to the board width minus
the
ball diameter so if it's larger then we
know it's off the grid and we need to
change direction
so
change direction we need to write a
function for this
change direction
i'm just going to write that function
now
function
change
oops
change
direction
okay
so currently we know that uh our ball is
moving plus two
uh
and plus two x and y
so we need to sort of change this
so i'm going to go back here and instead
of just adding a 2 and adding a 2 here
this is going to be the x direction and
this is going to be the y direction and
let's store this as variables
let x direction
equal to
let y
direction
equal to
and we're going to change these values
so
if
x direction
on collision deeply equals two
and the y direction on collision both of
these
currently are two and two and they're
moving two and two so that essentially
the ball is moving to the top right
corner of our grid we want to change the
direction and we want to change it so
imagine it's going like this we want to
change it to move like that right
because that makes sense in physics
so
i would simply just get the y direction
and change it to minus two
and then return out of this
okay
so we've done it as if it was moving
to the wall let's actually write an if
statement for this at the top so we can
see if this works
we're also not invoking the check
collisions function in which the change
direction
function is in
so where should we move where should we
put this
i think we want to put it in the
interval
so after we draw the ball every time we
draw a ball so every 30 milliseconds we
want to check for a collision
so still we won't be able to test that
let's write a rule for
um
well actually we might
okay so let's test this out
and
there we go
and
okay so it's changing direction
um
it's hard to see because it's actually
going through the top wall but it's
hitting as soon as it hits this axis
right here is changing direction i'm
actually going to maybe move
the grid so we can see a little bit
better let's just give it a margin top
of i don't know 80 pixels
refresh
and then once the red ball hits this
wall right here
it will change
direction
i don't really think that's the
direction it should be changing i think
we should change
okay so if it hits that wall i
essentially
want
to change
just make this an equal
it's going that way so plus 2 plus 2
and then i want to change the x
let's see how that looks
it's going there
and then i want it to go
okay i think that looks
better let's actually get to working on
this stopping at the top pool now
so
if the ball current position is larger
than the ball width minus the ball
diameter change direction
or
if the ball
current position
y-axis so let's go for the second value
maybe let's i'm just going to split this
out so it's easier for us to read
is
larger suddenly or equal than the board
height this time
minus the ball
diameter
change direction
oops undefined board height it's not
defined did i not define that
i guess not
const
board height
equals 300 we know that from our style
sheet
okay
so now
but it's also changing
okay let's just account for everything
because
at the moment everything is essentially
going to go one way so if
so if we hit that wall we want to change
the x direction
so now if
x direction
equals
minus 2 because
that's what it is
and y direction
equals
2 because that's what's happening at the
moment
i want x direction
to change back to
two
and return up this
since again that actually needs to go in
here so now let's see what happens when
we hit the top wall
ah
okay
if x direction equals two actually let's
keep this as y and we return out of this
if x direction
is 2 and y direction is
minus 2
x direction
let's change to minus two
if
x direction
so i'm just thinking about how
it now equals
minus 2
and
y direction
equals
both equal minus 2
then let's just put y direction
equals 2
and return out of this
and then we've just account for one more
if x direction
equals
minus 2
and
y direction equals
2.
let's just make it more exact just in
case
deeply equals for all of them
x direction
equals two and return out of it so i
think we've now accounted for all of
them let's see how that looks all the
combinations
so hit the top wall
bam bam
awesome
we'll see that won't happen and it goes
to the bottom so let's actually write
rules for the other two now
so we also know that if
the ball current position
x-axis is going to be smaller than or
equal to zero so if a gulf goes off the
left-hand side of the board then we want
to change the direction
before that happens
and then
check for
game
over
so if
ball
ball current position
y axis this time
is smaller than or equal to zero so if
it goes off the bottom of the board
we want a clear interval
timer id so we want to stop it
and let's also get like a console log
out
well actually let's just put it in the
display so
let's get you div
let's give it the id of score
i'm just gonna hard code zero for now
let's pick it out
um
so const
score display equals
document query select
query selector and then let's look
for the score but the idea of score
okay
so let's actually
show
so let's get the score display and in
that html i'm just gonna put yeah
okay
um
i'm also gonna get rid of the
event listeners so we can't move
the user anymore remove event listener
key
down
move user so we can't move the user
so now
it's going to hit the top wall it's
going to change direction change
directions again and when it hits the
bottom boom
you lose and it stops and we can't move
our little user so the purple user
anymore
cool
let's change the direction to check if
it's going through the left side so i'm
just going to do this by
putting i think
minus
two and okay that one
so go da da da da
hit the top wall change direction and
boom
everything looks like it's working this
is looking great
now time for the tough part i'm going to
check for collisions for any
of the blocks
so let's do it
okay so in our check for collisions
function
i i'm gonna let's just do it up here
check for block collisions
and i'm gonna have to use a for loop for
this so for let i equals zero as long as
i
is smaller than the block's length
we increment i like so
okay
now
i'm gonna have to essentially check if
the ball
is in between the blocks
uh
bottom left
x axis and bottom right x axis so the
bottom width and also
in the height okay so if
any if it's in there if it's in there we
know it's a collision right so we need
to write this and we need to loop it
over for every block
so i would do so if
you need to do it with an if statement
so if
it's going to be a long one so we're
going to go into our actually let's use
the
okay i'm just going to use the ball
current position
let's check the x axis first so if
the ball's x axis is larger than
the block so i'm going to go into the
first block and check the bottom left
because that's our anchor
x axis so if it's larger than the bottom
left x axis but smaller than the bottom
right x axis we know it's in the middle
of the block
so if it's larger than that
and
ball
current position
x axis so the first value
is smaller than i'm just going to get
rid of this so we can see the javascript
was smaller than
so into the blocks
the first block
use bottom right
x-axis
okay so all if all of that is true that
statement is true and
now let's do the y-axis the ball current
position
y-axis
and let's account for the ball diameter
so maybe let's put that in brace
parentheses two
so
if now the y position is smaller than
the blocks we're going into the blocks
again
and we're going to use
i
and then we're going to get the bottom
left
y-axis
and
the ball
current position
y-axis
is smaller than
whatever block we're looking at top
left
y-axis so if all of this is true
all of these statements are true
then we know
that we
are in
our ball is in a block it's in the area
of a block
okay
so if all of that is true
well what do we want to happen
well i guess i want to remove the block
um to do this i need to remove the class
of the block we've just hit so we need
to grab all the blocks from our document
grab or blocks i'm going to go into the
document and use query selector all to
grab anything with the class of block
and let's make this an array by using
the javascript method of array from
so i'm going to put that
like so
so
now
so i'm just going to console.log this
see
what all blocks look like
okay so very fresh
and we collide with any block
one of undefined great what have we done
wrong
our top left needs to be capital l
okay
so now when we collide with the block
bam
we get all the divs with a class a block
and an array you can see it's an array
because of the um
square brackets so that's what the all
blocks looks like that we've just
console logged so we're going to get all
the blocks
and now
all blocks we're going to go into that
array of blocks wherever i is because
we're looping so whatever block we're
dealing with
and we're going to use class list to
remove
the class of block
so visually we won't see the block
anymore it will still be there though so
we need to do get rid of that two
so we need to get rid of it essentially
from this array as well
we need to get rid of whatever block we
are dealing with remove it from this
array
so removing the class is completely
different removing it from the other
array that we have it in so i've used
splice to essentially get rid of
whatever the index is so i
and we do it like so so just remove the
one item so whatever say say we hit the
block with index two we then need to
remove it from our blocks array by using
splice and passing through e2
into here
so we remove it
so once we removed it we also need to
change direction
cool okay
so let's see if that's worked
boom boom and it's changing nice
and then you lose okay so this is
looking
good i think maybe let's also add a
score so score
plus plus
and then score
display
inner html whatever the score is
and let's set score at the top so let
score
start with zero
just so we can keep track of how many
we are hitting
okay so the next thing we've to do in
collision so we've accounted for
collisions
in here
um
we also need to check for
user collisions right so if
a little paddle hits it so i'm going to
do that in here
check for user collisions
and now
if
so once again a full current position
x-axis
is
larger than the current position
of our user's x-axis
so if that's true and
the ball
current position x-axis
is
smaller than the current position
x-axis plus
the block width so we are essentially
checking if the ball is in between
uh
the two sides of our user and whatever
it is it's current position
so if that is true
maybe let's put this in its own
okay so if that is true
and
the ball cut well we could just do it by
no let's just make it for the whole i
was going to see if we could just do it
if it hits the top
of our user but let's just do it
properly
if the ball current position y-axis
is larger than the current position
y-axis
and the ball
current and the ball current position
y-axis
is smaller than the current position of
our user
y-axis
plus the block
height
so if the two are in the same space
we then also want to change direction
so check it out
so now i'm moving it's going to hit boom
boom
this is looking fun
and we're adding to the score everything
is looking great
i think we only have one last thing to
do
obviously this is
uh just a very basic simple game if you
want to be super precise like you can
see sometimes the ball is passing
through a block a little bit i think
this one might pass
no it didn't hit it uh then please do
fiddle around with the if statements
okay
now we have one last thing to do and
let's check for a win
so i'm gonna do that
here
so we've just added to the score
check for win if
the
i guess we're gonna check the length of
the block's length so blocks
length
deeply equals zero
well we're going to get the score
display
use inner html to display you win
and once again we're going to stop the
game so clear interval timer id
and once again we're going to get the
document and stop
our little guy from moving so
key
down
move user
okay great
and there we go let's just see if it
wins now please do expand on this game
you can add a button that will
essentially start the game that would be
quite cool so the game just doesn't
start on its own when we load the
browser
um i would definitely do that and it
shouldn't be too difficult you just
uh
put in the functions to
move the ball in that and perhaps as
well the user
and then once you press the button the
game should start so i'm just going to
wait for this i just want to check that
we get a message that we win all of them
and then i'm going to show you how to
deploy it onto the internet
so
just bear with me while i
win this game you can also mess around
with the score so for example if you
pass one level you could increase the
speed of the ball
i'll show you how to do that in a second
um that could be quite fun
you can also make your paddle smaller
there's so much there's so much you
could do
so once again
come on just gonna hit
one more so hit that one and then
see if i can do this one
and
come on
yes you win
okay
so yeah as i mentioned you can make the
game harder by essentially i mean if i
move this changes to 10
it will go super fast ah
so that's quite fun too i'm just going
to move it back though because i think
it's too fast for me i don't like it
okay
in this game we are going to make
something a little bit more complicated
we are going to be building the retro
game of frogger the aim and frogger is
to get to the other side of the pond and
the road using floating logs and
avoiding the cars we are going to be
building the bare basics of this game
leaving you to add styling and any other
features at the end
by the end of this tutorial you should
be familiar with the following methods
and properties
okay
so let's get building
okay so let's do it let's build a
frogger game
so all i'm going to do is start off on
webstorm and i'm going to create a new
project this is going to be an empty
project and i'm just going to call this
frogger and just click click create
so that is creating my project for me at
the moment just an empty directory so we
need to go ahead and add a new file
that's right it's going to be an html
file which i'm going to call index
so
thank you webstorm so if you did not
using webstorm then please just go ahead
and type out index.html
and here is some boilerplate code that
has been generated for me
so i'm going to put in the title frogger
this is not going to show up in the
browser okay this is going to show up in
the tab so if i just go ahead and open
this up using this shortcut right here
you will notice that frogger is showing
up here okay so that is what this title
tag does for those of you who do not
have webstorm you can also
open this file by just copying the path
to it so copy the absolute path and then
just simply paste it into your browser
like so so two options for you
i'm just gonna go and inspect this page
and get up our console logs as well
so
how are we gonna make our game of
frogger well if you watch my tutorials i
do usually like to add elements in here
with javascript but sometimes it's not
worth it sometimes it's actually better
just to uh start making the game from
the html file itself and this is one of
those occasions
so i'm going to actually build the grid
in html and then add functionality to
the grid and my gamer frogger is going
to be nine by nine squares
okay so this is what the game is going
to look like as a reminder again
and i'm going to go ahead and create
those
81 squares in the index html file
so
the reason i actually just want to do it
in the index html is just because each
div has
is going to have a different class i'm
essentially going to draw out what i
want the starting state of the grid to
look like
so
let's give the
wrapping div the class of
grid
as that is going to be our game board
and in
here i'm going to actually start making
my divs
so we're gonna have one div two three
four and then this one i'm gonna give it
the class of
ending block so this is essentially
where you wanna get to that symbolize
the end of the game and then i'm just
gonna have a few more of these
so
13 to be exact one two three four five
six seven eight nine 10 11 12 13.
and now it's going to get interesting so
now i'm going grab a div and this div
essentially is going to symbolize uh the
i guess the
row in our grid where all the logs are
going left so that's why i'm actually
going to give it a class of
log
left
i'm going to copy that i'm just going to
paste this out
oops
nine times as it is a nine by nine
square so there's one whole entire row
of logs going left and then one whole
entire row of logs going
right so i'm going to use
ctrl
g
and change these to log going
right now whilst we might want to give
them the same styling we will know that
they have different classes and we will
know that we can uh essentially know
which direction the logs are going to be
going on these rows
okay
so good
and now i'm just going to add a row of
empty div so one two three
one
two three four five six seven eight nine
and now just like we
did with the logs we're going to do the
same for cars going left
and cars going right
so obviously we have to look out for the
cars so i'm actually going to take all
of these
again
and this time i'm just going to replace
log with car so ctrl c ctrl
so ctrl g ctrl g all the way down so i'm
selecting all of them
and there we go
and let's do two more rows of divs
so there's nine divs and there's another
nine divs
and now we're also gonna have to put the
starting block in here so i'm gonna do
so from the
fifth one one two three four five so
just in here and i'm going to give this
class
starting
block
okay so like i said at the moment we
won't see much but that is what the
styling is for so let's go ahead and
style it up
so all i'm going to do is link up my
style sheet using the link tag
which is the self-closing tag
and i'm gonna do rel
stylesheet type style
type text css and the h reference for
this well i know that my style sheet is
gonna live in the root of my project so
i'm just going to type style css and i'm
going to create a file
called
styles
css which is going to live on the root
which is why i've just literally typed
out the name of my file like this we
don't need to go anywhere it's just that
file
okay
so we've linked up the style sheet now
let's add some styling
so the things we're gonna have to start
up well i'm actually going to style my
grid
to make sure that everything in it fits
the way it should so i can look for the
class dot is for class of grid let's
make this maybe a little bit bigger
and i'm going to say that my grid i'm
going to give it a border of white one
pixel solid
uh and we can make it black
okay so now if i look in here
it's just one line okay because we
haven't given it a height or a width
so
what i'm going to do is say that i want
it to be 180 pixels
height
and 180 pixels
width
so that is now going to look like
this
however
if we then give styling to all the divs
that live inside the grid so this is how
i can do i can grab the element with the
class of
grid
so i'm literally looking in here i'm
like oh what has a classic grid this
does and now i want to say that every
div that lives inside of it so every div
that lives inside of it this is the
syntax for doing so it's kind of a
height of well because i chose 180 here
180 divided by 9 is 20 so i'm going to
put 20 pixels
and width 20 pixels so that exactly
nine divs fit in my square
uh along the width and the height
okay so that is all i have done so now
if you look in here
and i can actually look at the elements
that make up this page
so there's my body there's the div with
the class of grid and inside you'll see
all the divs you'll see each there's 20
by 20.
however they go all the way down we
don't want this we want them to fit
inside
the square right
so i'm going to do so easily by adding
display
flex now you think that would work but
all display flex does is make sure that
all the divs fit
however just fit on the
uh i guess as if you just squashed them
together in a box so they're no longer
20
pixels why they're 2.25 pixels wide
because that's the only way we can fit
81 squares on here so i'm gonna also add
flex
wrap
okay
so there we go so now all the squares
are fitting in here they're essentially
going this they're wrapping so they're
going starting from here and going
and then they're starting on this row
going
and so on and so on and so on you'll see
as i highlight you will see the
corresponding element being highlighted
in the inspect tool on the right
so great
we've done that now let's get to adding
some more classes
so more styling to the classes sorry
so let's first off start the ending
block
so once again i'm going to grab the
class name of ending block and i'm just
going to actually give it a background
color of let's go ahead and give it red
so because we know this is the one two
three four fifth square where do you
think it will be
i think it will be fifth so somewhere
here
and there it is okay one two three four
five
uh and let's do the same for the
starting block now so starting block and
let's say the starting block is going to
be
blue
so all we've done is add a class to this
block right here
um
did we miss
it seems we need to add one more div
because i did stop there so let's go
ahead and add one more div
we seem to have missed one
to the bottom which actually means i
want to move this one to be
here instead because i want to be the
fifth from the end
and there we go
so we've added those let's continue
adding more styling so let's pick out
the log left this time
and i'm going to say that log left
and actually
log
right
so we can do it this way
um
or we could just give them all the same
class but i'm going to choose to do it
this way and i'm going to give them the
background color of
light
blue
so now that we know
where that is it's here we've
essentially made like a sort of
uh i guess river that we have to cross
where all our uh all our logs here are
going left or we that's what we plan and
all the logs here are going to be going
right
so that's what we've done let's do the
same for anything with the cars now
so i'm going to pick out
car left
so
dot car left and dot
car right
and i'm going to give it a background
color maybe of like light
gray this time because this is going to
symbolize a road that we need to
cross
and once again it seems we have
missed a very important
div so maybe let's
fix that one two three
four five six
okay so we're going to add one here
and then we need to
get rid of one of these
okay
so hopefully you are now at this
place where you have this kind of
styling
if you are great if not please check out
the code that i have shared in the
description below this is what your game
should look like at the moment and now
it's daily time actually let's go ahead
and add a few more things to her html
before moving on
so we've made our grid the other thing
that i want to actually show in here is
how many seconds we have left
so i'm just going to go ahead and
add an h3 tag that's gonna say second
left and essentially we're gonna count
down the second so i'm gonna add a span
tag and the span tag so make sure that
says span it's gonna show us the time we
have left so i'm just gonna hard code a
20 in here for now but i'm also going to
pick out the span tag by giving it an id
and i'm going to give it the id of
time
left
so we've done that i'm also going to do
the same for result so h3
results
and once again i'm going to
give it a span tag like so
and i'm going to give this an id
of
result
okay which we're just gonna leave
like that or we can hard code it as a
zero i'm also gonna give a space here
just to space this out a little bit
and
great
one other thing i'm actually going to
add is a
start pause button so here is a button
and it's going to say start the game or
pause the game if we want and let's pick
it out so i'm going to give an id of
um
[Music]
start
pause
button
okay
so i think we've got everything now so
the only thing we've got left to do so
after all of this has been loaded
we then want to
go to our javascript file so i'm going
to make a script tag
uh and i'm just going to the source
which is going to be the app.js file
which we are yet to make so let's go
ahead and make that make sure that the
bottom of your body tag so in between
the two body tags after all the html
that you have just written
so let's make a new file this time it's
a javascript file i'm going to call it
app which is
just showing up here as app.js thank you
webstorm for doing that for me and let's
start picking stuff out
so
first things first let's actually pick
out everything in here
i need to pick out this span element and
i'm going to do so by the id
so in my app
file i'm going to use document and a
javascript method called
query selector let's make this a little
bit bigger query selector making sure
that's where the capital
s query selects that and i'm looking for
the uh element with the id of time left
so this needs to be an id and let's say
this is something i'm going to save this
as
the
time
left
display
just like so so we've got the time left
display the next i mean to pick out so
let's go ahead go let's go looking in
our file again so we need the query
selector and let's go looking
for the span with the id result
so i'm looking
for an element with the id this this
means id of result and let's save this
as result
display you got it
you can of course call it whatever you
wish
so we've picked out those things let's
also pick out the button so once again
document query selector and let's go
looking for the id of
start pause button
i'm going to save this as
the start
pause
button
great
so
i think this
might be it for now actually let's go
ahead and pick out all these squares as
well so every single little div that i
made so let's save this as squares and
i'm going to use document and query
selected this time all
because i want to pick out all
all the
divs that live in
the div with the class name of grid so
the dot is saying i'm looking i'm going
to go looking in here i'm looking in
here and i'm looking for anything with a
class name of grid this dot means class
name so i'm looking for that but then
i'm also looking for the only the divs
inside of it okay so i'm looking for all
of these and i'm saving them
under the const squares
so hopefully that makes sense let's
carry on
so
first off i just want to add a little
green square which is going to be my
frog and i want to essentially add it to
the board and then i want to move it
with my keyboard so that is the next
steps that we are going to do
so let's get this up and let's write a
function
called move frog
okay so this is a function that i am
going to write
and what i'm going to do so
each time that i essentially
move
a key on my keyboard so we're gonna have
to listen i'm just gonna console.log
this out for now console.log
moved
i essentially need to listen out for any
time that uh
i press a key on my keyboard so i'm
going to use document and then i'm going
to use add event listener and to listen
out for the event of key up so there's
many many you can choose
from there is a list on mdn there's like
click but i'm going to use key up
there's also key down
and so basically each time i press any
key on my keyboard any key at all i'm
going to
uh invoke this function okay so this is
the callback function if this happens
then this function is called
okay
cool
so at the moment if you see here i'm
just going to get the console.log up i
can press any key
moved moved doesn't matter right any key
however now
that i um know that is working i want to
decide which keys are going to move my
mail my uh frog sorry and where it's
going to move
right
so let's go ahead and do that
so
what i'm going to do
is first off let's go ahead and add
our frog to the board so i'm going to
make a class of frog as well dot frog
and i'm gonna give it the background
color of
green
and we're gonna add this dynamically in
our javascript
so i'm gonna use
these squares actually i'm going to grab
all these squares
so if i go ahead and actually console
log all these squares
this is what they will look like i've
literally picked every single one up
from my html and put it in a huge array
or no list
and they are here with the class names
so that's all i have done and i'm going
to use that so
i'm going to go into my squares array
okay and wherever i am at the moment so
let's choose which index we want to be
in so i'm going to say let current
index equal and because we start
counting from zero so like this div has
index
zero this one has one two three if i say
my current index is zero i should be
here so zero
and if i pass a zero through into my
array or in other words as we now know
it as current index
and then i do class list add and then i
add the class of frogger
or frog sorry
where do we expect
uh this
to show up when we press the key so i'm
gonna press a key that's right it shows
up here because this is the div with
index zero okay is the first div in our
array
if i change this now to be two
it will be let's press the key here
because this is the square with index
two zero one two okay so hopefully you
got that
let's carry on so this is gonna decide
where we start we wanna start at the uh
starting block so there's our starting
block this actually has the index 76
so let's go ahead and change that to
start at 76.
so
if we move frog well
i only want to move the frog actually if
we press a certain key so i'm actually
going to use the switch case for this
this is the javascript
switch case
and i'm going to pass through e
key
and if the case is
our left so essentially what we're doing
is passing through
the event
into our function
and if the events key is our left then
what do we want to happen well at the
moment we're just going to put console
log
move
left because that's what we want to
happen let's maybe make this a bit
smaller now
and we are going to break
so there's our first
case
um let's do another one
case arrow
right we're gonna move
right
let's do arrow
up
move
up
and do arrow
down
and you guessed it it's going to move
down
so let's see if this works first before
we do anything else
so now
let's press up
we're getting move up let's press left
move left
move right
and move down so you should be pressing
the arrows on your keyboard and you
should be seeing these show up in your
console log
this works because we are passing
through the event into our function and
then getting the key of the event if i
console log out the event
so e is for event
[Music]
each time we press it you'll see how
much information that actually is so if
i press up
oops console log is not defined con
sol log
let's press up now
see okay so this is all that's happening
there's so much stuff and we're looking
through it we're going oh my god there's
so much stuff but i want the key and the
key is arrow up we could use the key
code but this is sort of depreciated now
so it's safer to use the e key
cool
so great hopefully that makes sense
so how do we move left well to move left
it's kind of simple really we just want
to be in the index that's minus one of
this so we're gonna get the current
index
and we're just gonna minus one from it
just like so okay i'm going to save it
back to index
so
we can write it like this or a shorthand
for writing this it's just taking
current index and saying that -1
equals so that will now change whatever
current index is so if i press move left
current index will now be changed to
75
okay
so that's all i'm doing and to move
right we're just going to get current
index and we're going to add one to it
so plus equals one
and to move up well this is probably
more interesting because we're actually
going to
use the
width of the
grid so we know that the width this can
be a constant as it's not going to
change is nine because we have nine
squares here so if i want to if so say
if i'm here and i want to be in this
square here and this square is index 76
well this square is obviously 76 minus 9
right
so
what do you what even is that
index
67 where we simply minus equals
the width which we know is nine
okay so now if we press up
we are essentially making current index
we're getting that value 76 were
minusing 9 from it
which is giving us the value 67
cool and of course then to move down
it's just the opposite so current index
plus the width
great
so
let's see how that looks
however we're leaving a very long uh
thing of frogs behind us and of course
if we try to move down we can't do that
because there's not only divs so
everything is breaking as you know we
can't move in here
so let's fix all of this
so before i call each function i'm
actually going to remove the frog from
whatever square it's in okay so i'm
going to use class list remove
so this means that if i press up
so let's go ahead and start off actually
with
maybe we should um
add the
frog class here as well so i'm just
gonna go ahead and add the frog class
okay so we're here and if i press up
the first thing that's gonna happen is
i'm going to remove the frog from the
current index so index 76 so i'm going
to remove it from here
and then we're going to add do all this
additions to find out what our current
index is based on what
key we pressed and then wherever we end
up we're going to add the frog class
again
okay so hopefully that makes sense let's
see if that's worked
wonderful
so now we can move around okay
so the next thing we want to do is
actually limit our movement so that if
we go into this column here
we can't move anymore because otherwise
we end up on the square on the other
side and we don't want this behavior so
similarly to being here
this will cause breakages okay because
there's no div to go into
on the left side so what i'm going to do
is use maths for this i'm going to use
modulus
and what i essentially need to do is say
that any square with the index is 0 or
any square with index 9 18 and so on so
any of these numbers if they are
divisible
by nine
and leave no remainder so that's what
i'm going to write
so
if
current index so whatever square index
we are in
index
modulus width
equals zero
so if this is true we are we know that
we are either in this square this
squared this square the square the
square all these squares we know we are
here okay
so if that is true we don't want to be
able to move left but otherwise we can
so actually what we need to do as long
as the current index does not equal zero
then we get the current index
and minus one from it but if it does
equal zero well then this is not true so
we don't do anything
okay hopefully that makes sense if i
replace this with numbers maybe current
index at the moment when we are
oops that should say current index
so at the moment when we
are here we're in
current index zero
zero modulus nine because we have
defined width as nine here
does in fact equal zero so we don't do
this okay
same as if we are
here this this square has the index nine
and nine modulus nine does equal zero so
this is not true so we don't do this
okay
however if we're here
then this statement is
true
because the remainder will not be zero
so then we execute this so we are able
to move
left i know that might be a lot
especially for those of you who are not
familiar with uh the modulus operator so
please pause here
um maybe get a piece of pen and paper
and write down the equation because it
is it's just maths at the end of the day
great so we're going to apply the same
logic to the rest of these
uh let's do moving right next
so this time we want to move right as
long as
uh
the remainder is smaller than eight
so if
current index
modulus width
okay and the remainder is smaller than
width which is nine minus one
if that is true
then we want to
add one to the current index okay only
if it's true
and let's do the rest as well so moving
up
this one will be if current index
this time minus width
is larger than equals
larger than or equals zero
so as long as we are
essentially
in this row okay or anything under it
then we can move one up however if we're
in this row
so
essentially if
you know the uh index so for example
let's do this again so if i'm here
we are in a current index with this
index one
so replace this with one one minus width
is
minus eight right so minus eight is not
larger than zero which means we can't
execute this which means we can't go up
however if we are let's go one down so
this has the index ten
ten minus nine is larger than zero okay
so then we can
go
up
okay because 10 minus 9 is 1 and that is
indeed larger than zero
okay and one last one going down if
current index
plus with this time is larger than width
multiplied by width
then we can
move
down because essentially we're checking
that if we're in any one of these
squares minus the last row again get out
your pens and papers and pads and just
uh literally just try it out yourself
just go into any of these and be like oh
i'm in index square with index whatever
and see how that works
so great hopefully that makes sense i'm
just going to get rid of these console
logs and let's test it out
so
we should now
be able to move everywhere
correctly so we can't oh we're stopping
there i'm actually pressing the right
arrow nothing's happening i'm pressing
the up arrow nothing's happening i'm
pressing the down arrow fine for fine
and stop i'm pressing yet nothing's
happening and we go left
and great nothing's happening i'm not
getting any breakages either there's no
like red in my console log everything is
looking good
wonderful
so what we need to do next is get some
logs moving right and some
cars moving so let's go ahead and do
that next
so to move the cars and the logs
actually i'm going to go back in here
and give these
we can just add to the class
list perhaps we should do by class list
rather than id as we are going to
actually
yeah okay let's do that
so let's give all of these an id
sorry a class and i'm not using id
because i'm going to be repeating these
um
again
so just in here i'm going to add a new
class this is separate to this class
we're going to need a space let's give
this l1
let's give this l2
l3
f4
l5
and now i'm gonna stop at five and this
will become apparent soon i promise i'm
just i just don't think there's any
point giving all of these squares in a
row
an id when actually we just want uh the
colors of the squares to be changing
based on
uh
five squares
this really doesn't make any sense now
but it will i promise so i'm going to
give this the id of l1 again
l2
l3 so now anything with this class is
going to have the same behavior and so
on and so on
and let's also to
l4
now the log right
i'm going to start with l5 this time
and then
l1
two
l3
l4
l5
l6
l7 oops not l7 uh l1 again
l2
l3 so let's start with the logs first so
what i'm going to say now
is that anything with the class of l1
or l2
or l3 the classes of those
are gonna have the background color
uh
brown and then anything with l
four
and l five is going to have the
background
color
like blue
okay
so in actual fact we don't really need
this anymore so i'm going to show you
i'm going to comment this out because
now we're using these classes to color
in everything with log left
so there we go we've essentially made
one log another log and another log and
another log and we want these to be
going left and we want these to be going
right
and as you will see this is l1 so all
i'm gonna do is just change the location
so it looks like it's moving left
okay by literally getting l3 and we're
making it move to l2 l2 to l1 okay so
just doing that and doing it again
and so on and so on but not all the way
because we only really have to account
for these
okay because from here on it repeats
itself
right
okay so hopefully that makes sense this
should this should move like this one
and then this should look move like that
one and this should move like
that one
okay so
we've done that so what i'm going to do
is write a function
so i'm just going to make some space
so we can
see everything a bit better
so what i'm going to do is write a
function called
function
function called move
log
left
and all i'm going to do
is use the switch case again so switch
and we're going to be looking for true
statements
okay
so if this is true well what i want to
do is actually get uh i want to go in
here
and pick up everything with log left
so we know how to do this now i'm just
going to do this up here
so const
log
left plural equals document query
selector all remember so just like we
did to pick out all the divs in the grid
and i'm going to look for anything with
the dot so the class of log left so i've
just collected anything that has the
class log left and we're going to check
if they have
these classes
so let's go ahead and grab all the logs
left
and actually
i'm now going to
write in my another function actually
function auto move
logs
and i'm going to grab logs left and for
each
so for each of the divs with the class
of log left i'm going to choose the call
log left you don't have to call it log
left you can call it whatever you wish
that is how four each works and for each
of them i'm going to actually pass them
through the move log left function so
each of them will now be affected by
this function move
log
left and i'm going to get the log so or
the div with the class of log left i'm
gonna put it in the function so put it
into this function now boom
put it in here
and if
so if log left
class
list
contains
l1 okay so essentially again what we've
done is we've grabbed all of these divs
we've saved it as
logs left
and now i've got all of these divs
so each one and i'm passing it through
into the move log left function so i'm
getting a div and i'm checking if it has
a class of l1
okay
and if it does
well what i want to do is get that log
left or the log going left
class list
remove
l1 and instead
log
left
plus list
add
l
two
because we're going
left so we need to replace it with
l
two
right because
l1
yes whatever this one is
needs to be there
okay
so perhaps maybe i'm just going to show
you how this
looks at the moment
so i'm just going to call the function
automotive logs but of course we need to
uh
put this in a timing event
right
we need to essentially make this execute
uh you know every maybe second or so
so i'm gonna do this down here i'm gonna
say
uh
we need to put this in a
set
interval
so i'm just gonna put set interval
auto move logs and let's do every 1000
milliseconds so every second
oops
let's get rid of that
you will see that this has now changed
to l2 it's obviously hard to see on here
because they're all the same color but
this has now changed to this which means
we need to change this l2
to an l3 and so on and so on and so on
so we're going to do all of that
so case in fact i'm just going to copy
this
if it contains l2
then remove l2
and add class l3
and same for l3 if it contains l3 remove
l3 and add l4
and we need to do one more
actually two more sorry
if it contains l4
remove l4 and add a5
and of course if it contains l5
remove l5 and add
one
so now if i refresh this usually you
should see them all the top row moving
one
to the left
there we go and of course is doing it
every one second so if we look in here
boom boom we're literally just changing
this to that this to that this to that
and it's looking like it's moving
so hopefully you now see why i did that
of course you could have done l1 you
could have done all the way up to l9
but there's no point because actually
the rotation only happens on five
squares okay
so that is what's happening see if you
take any of the one two
three
four five and then essentially goes
right here one two
three four
five and it goes back here okay even
though it visually doesn't look like it
that's what's happening so great
hopefully that makes sense now that
we've done this we're literally just
going to apply the same thing to this
row and then the cos so let's do it this
is good for repetition and good for um
learning again
so i'm actually just going to get all of
this move log left
and call it move
log right and we're going to pass
through the log moving right and how do
we get this well we need to
look into our document and get all the
logs moving right by picking out
anything with a class name log right so
we're going in here we're finding all of
these
okay
and once we have our logs right
because there's many of them i need to
get each one so logs
right for each
log going right so for each div
essentially i need to pass that div
through move
log right
so i'm going to pass it in right now
look right
now that's being passed into here
and if this so we're passing true
because we're looking for true
statements so if this is true however
let's change all of these to log right
now so ctrl g we'll do that on webstorm
log right
if this is true well now we need to go
the opposite way so if it contains l1
we change it to an
l5 so we remove l1 and we add l5 so now
we're going the other way if it contains
l2 we remove l2 and add l
1
3 3 so we go the other way l2
4 4
three
five five
four
so
once again let's check it out of course
we need to
okay so that's being called in the auto
logs rights log right
and let's see
amazing
so visually they're going the other way
cool
now let's do the cars
so the cars um let's decide i guess we
want the cars to be
smaller right like two squares so let's
color that on our board first
but once again i'm going to actually
just add the same
well no because they're smaller we're
only gonna have to have a rotation of
three so let's go ahead and do that now
all i'm gonna do is do c1
c2 and the car is gonna just be one
square c3
c1
c2
c3
c1
c2
c3 and do the same here
c1
c2
c3
c1
c2
c3
c1
c2 c3
so now let's go in here and pick out
that anything with the class of c1 is
going to be our car so let's just give
it a background color maybe like black
or something
and then
also that means that c2
and c
3 are now going to be our roads
so what color do we give the road light
gray let's get rid of these don't really
need them
there we go
so there are cars and now let's make the
cars rotate so i need to go from this
one to here to here to here and then
change from here to here to here and
same for these
so let's do it i'm going to go in here
and let's
write a function
um
i know i have to auto move cars and auto
move logs but we could just auto move
elements
instead right so that we can just put
everything in there auto move elements
and now let's write a function once
again like pretty much exactly the same
just a little bit shorter
so let's pick out anything so const
cars
left equals document
query select all i'm going to look
everything for the class of car
left
and do the same for cars going right
cars
right
cos
right
cool
so that means
logs left this should be capital l sorry
which means i've obviously done that
somewhere else logs left okay so that
means that once again i'm just going to
get my cars going cars going left
for each
car left i'm going to pass it through a
function which i'm yet to write called
move
car
left and pass through the car
left
and do the same for cars
right
car
right move car
right
okay so let's write our function
again i'm probably just going to copy
this because it's pretty much the same
let's start with the left one
paste it here
move
car left
and if let's just change these so
control g
car left class list oops car
left
cliff car left class class list contains
c1 then remove c1
and change it to c2
again here c2 c2 change it to c3
and c3
c3 but this time we change this to c1 so
it loops the loop stops there and let's
just get rid of these
and now car moving right
so i'm just going to use ctrl g
car
right
and we go the other way this time so
this should be c
3
this should be c1 and this should be c2
okay
there we go
everything is moving this is looking
good the next thing you need to do is
actually decide what's safe to go on
what isn't and also we need to make sure
that we can see our frog at all times so
i can do so easily in two ways the
easiest is probably just to move this
down to the bottom so it's the last
styling applied
so there we go you can also use
important to overwrite any classes
great
so i think now probably let's decide
what makes something safe to go on or
not
so i'm going to write a function to
check for a lose
so
let's do that
so back in here
i'm going to write a function
called lose and let's define what
happens
so what happened if
essentially
let's say if you hit a car which has the
class list c1
then the game's overwrite because you
know
the car hit you
uh but also if you go in the water you
also
the game's over right and the water is
this one so if we go in here if our
current index where we are contains the
classes c1 or these then it's a game
over so essentially if we look here
again
so if our current index is any one of
these at any point so say i'm in this
div and it has the the class list uh
like c1 for example any point then the
game is over so we need to check for
this
so what i'm gonna do is say if
current
index so we need to get our squares
actually all the squares so all the divs
from our board that you remember from
before and if squares let's go into the
array
and we're going to pass through the
current index so if current index is 0
we're going to get the first square in
our array
and if that square
class list
contains
c1
so the car
well we know that's a game over
right so
what am i gonna do i'm actually gonna
get the result display which we've
already picked up out here
oops
and i'm just going to do text content
you lose
so just
like that and i'm also going to actually
stop this so let's assign this to a um
id i have to do this up here actually
so let timer id at the moment it's null
i'm just leaving it as null this is a
shorthand for me doing that
and then
we need to assign a sentence interval to
the time id
which means if i want to stop this
i just need to pass the timer id
through clear interval so clear interval
timer id and let's actually remove the
uh frog so the frog obviously is here
because wherever the current index is
that's where our frog is so class list
remove
frog
okay
and also let's remove the uh event
listener so document or remove event
listener so we're gonna stop listening
out for key up
on our keyboard that essentially moves
the frog
great
and let's check for the lose uh where do
we want to do this
i think
maybe with the with the lose piece with
here
so each time everything moves i also
want to check for a
loose
okay
so that will be checking every one
second to be precise so let's see if
that works i'm just gonna go here and
then i'm gonna go here and up we lose
because the car hit us
so once again maybe a bit slower let's
stand here and wait
ah okay we get yule is showing up the
frog disappears and now obviously we
can't move anything the uh it's not
listening out to our key ups anymore and
even if we wanted to we couldn't move
the uh
mount the frog i guess because you know
we've removed it so
actually that's not technically true
because we add the class of frog in the
move frog function so we do need to
remove that event listener
cool
so this is looking good let's do the
same for if he goes in the water
so if this is true
or
that's how you write or
or
it contains what is the water
like blue l4 or l5
so
contains
l4
oh
contains
oh
five
okay
so that is it should we try it out just
so everyone's on the same page
so let's actually try past this without
getting hit oh well yes okay so we got
we fell in the water so that is looking
good
great now the next thing we need to do
is uh see what happens if we win and if
to to win we just have to really get to
the red
thing which is our
ending block so that's the class we're
going to check for this time
so
function win
if
squares
current index class list
contains
uh ending
block
well then
let's also do all these things so clear
the timer remove the event listener
maybe let's not let's not remove the
frog because you know
be nice to see the frog
uh you win
but we do clear the
timer
so oops
let's put this function
function
why did i do that
make sure these are parentheses so the
curly braces these are parenthesis and
these are curly braces
okay so let's also check for this every
one second after
moving everything
so cool now let's actually try get to
the end so this is gonna be fun
uh
and then i need to stay on these
you win
cool and then everything's taken away
so great the last thing we need to do is
just add the timer so let's do it let's
add the timer so i'm going to start off
with the time uh let current time and
let's say we want to do this i'm just
going to put five seconds for now
because
you know i don't want to wait around
loads in order to see if this works but
we can change it to something later
and all i'm going to do
is
so
we need to show
i'm actually going to do it when we move
everything so in here as well
i actually so each time this function
gets called i want to get the current
time
and just minus one from it okay and then
i want to show it in the time left
display so i'm going to use time left
display text content
current time and because we um
we hard code the number 20 there so by
the time this happens we take away one
from whatever the number that we saved
up here is so maybe let's make this 20
just to make things easier
so it's starting off as 20 but then we
call this function and we take away one
from 20 and we show 19.
so this is looking
good
i think that should be fine we also need
to write what happens
if we hit zero right so if where's the
lose function
so
another thing that we need to check for
is if
the current time
suddenly
equals zero or is less than or equal
to zero
then also we lose
right because
essentially the game
is kind of over
so
great so if that is true we also lose
and we clear everything out
now i can also
so let me just show you what this looks
like again we are going to have to wait
till 20 so i'm going to come back to
this
we can also hook up the start pause
button to essentially pause our timer
from uh counting down so i'm going to do
this by grabbing the start
pause button let's just check how much
time we have left four three two one
you lose okay because we run out of time
and then that's just staying at zero
cool but if i want to start the game
because at the moment it just sort of
auto starts
uh we can use the start button to do
this so all i'm going to do is get the
start pause button and choose add event
listener to listen out for
clicks on it
okay
and if it is clicked
i could write a function should we write
a function should we just do it in here
and i'll do it in here just to show you
that you can also just write the logic
of a function here so start pause button
why is it not liking this does this not
exist
stop pause button
start pause button ah
start pause button
okay
start pause button add event listener
if timer id
exists
because at the moment when we press
start time
this will be null okay so if we press
again and there is a timer id we just
want to clear
interval timer id okay we want to pause
it else
timer id
equals set
interval
and then we essentially just
move this whole thing actually just to
here
okay
so we move that in here and we also move
the part where it listens out for the
key frog
for the sorry for the movements of the
frog for us moving the keys so i'm going
to actually take this and only allow
this to happen if we have pressed the
start button
okay
so whoops
to make this a function we need to
actually do this so that is now a
callback function
and
great so once again
say we are playing this game for the
first time we've just started the game
timer id as we set it up here is null
okay so we press the button we click it
timer id does not exist so we don't
clear the interval so we just go to set
up set our countdown going essentially
so we automate the elements every one
second and we
enable
us listening out to uh
key presses so we can move the frog
however if we press the button again so
at this point a timer id does exist
right because our countdown is going
then we stop it we clear the interval
and whatever time we are left with is
the current time
so let's check it out
so obviously nothing's happening stop
so i can move it i can move it i can
move it to pause
ah this shouldn't i should not be able
to move that so
when i paused it i also want to
remove
event listener let's try again
start
moving around pause
okay and i can't move
the frog anymore and start
it's console of the time id to see
what's going on
so stop
pause obviously exists i'm going to
press it again
ah timer id we need to assign the value
null again
so
let's try now
start
oops
start
pause
restart
okay cool so actually
you know what we probably need to check
for these collisions way often because
if i'm fast enough it doesn't register
because it only checks every one second
right but if we move faster than one
second
um
it kind of doesn't work so i'm gonna
move the
check for
um
lose and win and i'm gonna put it
in its own function
or own sorry uh
interval so time id
let's
which we call this
uh outcome
timer id
again equal
nothing
and
i'm just going to say out
come time id
set interval
and we're going to check for
wins
loses and
wins so
function
check
out comes
i'm gonna put those in there
and then
i'm gonna check for this
every 50 milliseconds so you really
can't uh
cheat i guess
so that is gonna keep
going
and i guess
we'll probably clear it here when the
game is
you know
of paused
because we don't really need it going i
guess if it's paused so let's stop that
and also let's stop it on the lose so
again clear
interval
clear
into four
so now we should check for this way more
often
let's try it out
start
so now if i oh see it's checking way
more often now
let's refresh stop
there's no cheating that's gonna happen
so there we go that is the basics
the super basics for the game please
take this game improve on it uh you know
ad levels or perhaps you know you want
to be able to start a new game from here
instead of having to refresh all these
things you can do hopefully now i've
showed you how you can take everything
you've learned and apply it
um let's do this let's try win this okay
so actually if i wait here this should
be a empty space for me to go soon okay
oh i'm not meant to go in the water
sorry
okay
let's do it
um i don't know why i have a results we
don't really need a result let's get rid
of that
so i need to go in here
and there we go so i won i did it
uh the result we don't need that to be a
zero because we're not collecting any
points so let's just keep the result as
this and it'll either say we win or we
lose
so
there we go i hope you've enjoyed this
lesson and i'll see you in the next
videos
in this game we are going to build
connect four we're going to take a
different approach with this game we
have been working with a lot of modulus
this is a different approach in which we
are just going to define which indexes
uh create a match or don't create a
match of four so i'm excited to share
this alternative solution to you to what
you have been doing previously
so what are we waiting for these are the
javascript methods and properties that
you will learn in this section
okay so let's do it as you can see here
i've already have my project set up with
an index html file an index.js file and
a styles css file which we now have to
hook up to work together
i have gone ahead and put in some html
boilerplate for us
we have a title which no will not appear
in the browser it will however appear in
the tab which i'll show you later
and a link tag so we can link our style
sheet now as our style sheet is in the
root of our project i simply have to
write styles css to hook
it up
i'm also going to put in a script tag
and if you know me i'm going to show you
two ways to put in the script tag we can
put in a script tag at the bottom of our
body
so if i just put a script tag with the
source and once again it's in the root
of our project so the index.js file
so that is what our script tag
is linked to i'm just going to put a
char set
as
well
so char set
uh
that one thank you very much
now if you know me you i will now tell
you that you can't be your script tag at
the bottom of the body but make sure
that is after any html that we want uh
to put in or alternatively you can also
put it
in the header so in the head i'm gonna
just put it here just to show you
another option
because we can also use a dom content
loaded we can use an event listener to
listen out for
once everything here is loaded and some
people say that is a more foolproof way
so i'm going to show you how to do it
now as always the option is up to you if
you prefer to use the script tag at the
bottom of your um
body that is fine just don't use both
otherwise you'll have two scripts
running so i'm just going to leave mine
here because i want to show you how to
do this you can also use the document
and use add event listener to listen out
for when the dom content has loaded
okay and then
once it has all our javascript we're
going to put in between
these
two
little curly braces okay
done
now
let's move on
now because i want this to be a sort of
beginner lesson we could use javascript
to add all these divs for our connectful
game but i'm just going to keep it very
simple and put them in here in our html
so our connect4 game is going to have
it's gonna be seven squares wide and six
squares high
okay but i also want to put in like a
secret seven squares at the bottom
because we want to tell
our browser where the bottom of the grid
is and this is just a solution that i
thought of of course like you don't have
to use it but this is just the way that
i would solve it in order to build our
game
so what's that seven times seven is 49
let's do it i'm gonna make a div that
i'm gonna give the class of grid because
this is where all the magic is gonna
happen this is gonna be our game grid
okay so let's call it a class
now any div that i'm gonna put in here i
essentially want to be or represent the
little squares on my connect for game
so as i said i'm going to need seven
times six for the game but then a secret
seven which we will go into later so i
need 49 of these so is just gonna face
one two three four five six seven eight
nine ten of course like i said we could
do this in javascript um i do do it
i do add these divs with javascript in a
lot of my other games so if you wanna
check out how i do that it's a create
board function that i use pretty
generically please go ahead and check
those out so one two three four five
that's 50 divs i'm just going to get rid
of the
last one to make it 49.
okay now i did say i wanted the last
seven to have like a
like uh represent the end of our
you know
connect four board so i'm just going to
give them a class of taken
again you will see why later on
so there's one
two
three four
five six
seven
great
so we've got a div with a classic grid
with 49 divs in it
now let's actually style it up to uh see
it visually
so
because we want to
grab the grid i'm going to grab the
class so use a dot for class of grid
and i'm going to decide that i want all
my squares to be 20 by 20 pixels which
means that i need to make the grid
well let's first give it a border of one
pixel solid and as a default it's going
to appear
black
solid one pixel black
and then height
i'm going to go with 120 pixels of
course and then width
7 x 20 is 140 pixels
okay and now while i'm here i'm also
going to style every single div inside
the div with the class of grid and i can
do so like this by once again grabbing
the class of grid
and then every div inside of that so
that's how i would write that is going
to have the following styling i just
want them to be
height
20 pixels
and width
20 pixels
now i'm just going to give a background
color for now so you can see what's
going on
so now if i just copy
the relative oops copy the path sorry
and then go to a browser
and paste it
you will see there's my grid
and there are all the squares
but it obviously doesn't look right
right we need the squares to fit in the
grid so i want them to sort of like
snake over so i'm gonna do this by
adding
display flex
so now if i show you what that looks
like and refresh whoops
fresh
okay now they're in there but they're
all squashed look how thin they are
i don't want that i wanted to snake over
so i'm also going to use flex
wrap
and there we go
okay
so now oh i think we've got too many one
two three four five six seven yeah we
have too many but that's
that is fine seven times one two three
four five six seven so we need to delete
seven ten more ten of these is totally
ten
we did a few too many so one two three
four five six seven eight nine ten
delete
okay great
so now they all fit if i
just go over the one two you will see
how they are snaking over and then of
course we have the last seven which have
the class of taken
so so they're outside of my grid and
we're just using them to let our code
know that this is the bottom of the
connect for
uh
board game is that a board game you know
what i mean game
okay so i'm just gonna get rid of the
background color blue and while we're
here i'm gonna
add a class of player player player
one
i'm gonna give it a background color of
let's say
red
and then a border radius because i'm
going to make them circles of 10 pixels
because border radius on a 20 by 20
square is gonna make this a circle
so we've got play one and let's make
player two
let's move to player two
blue
okay
cool
so we've got everything we need now
let's start picking out elements from
our html and our javascript so we can
work with them
so the first thing i'm going to do is
actually pick out the squares so i'm
going to
save them as squares i'm going to use
document query selector all thank you
tab 9
to pick out and once again this is going
to be useful because we just learnt this
to pick out all the divs inside
the div with the class of grid
so that's how i would do
that
so we've just picked out all the squares
uh now i also want a way to i guess
tell the user whose go is so i'm going
to use an h3 tag for this
and i'm just going to write
the
current
player
is
player
and then i'm gonna use a span tag to
just interrupt that h3 tag and i'm going
to hard code a one
and i'm just gonna use an id just in
case we want to use another span right
so i'm just going to put current player
and while we're here i'm also just going
to
put a place we can show the result i'm
going to leave it empty for now and just
give an idea of
results
okay so that's looking good
and in here let's also pick out uh let's
pick out the
result so const
result
equals document query selector i could
use get element by id but it's totally
up to you i'm going to use query
selector to look for an id so we use the
hash for id we're looking for the id of
result and another id we need to pick
out which is the
uh display for the current player so i'm
just gonna display current player
equals once again we get the document
oops
and we use i'm gonna use query selector
again just to make everything
consistent i'm going to look for the id
and save it for our javascript
okay we also need to let our javascript
know who the current player is and we
hardcoded once i'm just going to put
this here two i've used a let as this
will not always be one it might be
player two so that's why i use the let
there
okay
now i think the next thing i wanna do is
add um an on click to all our squares
okay so i want uh essentially something
to happen every time i click any of the
squares in our connectful grid
so i'm going to use a for loop for this
oops making sure that i'm in the curly
braces
four let i equals zero
and now
because we're dealing with the squares
uh
i could use the square's
length
that'll mean even including all the
taken
squares
and
i think that's fine let's just carry on
and see what happens
okay
so for each of the squares in my squares
in my grid sorry
i want to get the squares
and then for each one because they're
looping so i'm going into the array and
i'm looping
i just want to add it on click
and then on the click and we need a
function so i just use an arrow function
for now i'm just going to make an alert
that says
you have clicked
square
just so you can see what's happening i
want to show you so i'm just going to
use the i
and save
now let's refresh
so if i click here
oops
you have clicked square 13.
let's refresh i'm going to click the
first one
you have clicked square zero because as
you know we start erase from zero
okay so this is working we have added an
on clip to each of these squares
including these ones but for now let's
just ignore it um we'll decide what we
want to do with that later but i think
that's fine
cool
it's pretty fun isn't it we know exactly
which square we have clicked
yeah
okay so we actually don't want this
alert i've just done that so we you can
see what's going on before me coding any
further because i think that is
important
okay
to delete
well the first thing that we want to
do
is decide how we're going to solve this
so obviously in connect four when you
drop the little um
[Music]
token we need to account for gravity
right so i think let's do it that if the
square below your current square that
you want to go
is taken you can go on top of it right
simple so that's why we added the class
of taken at the very bottom because at
the moment we're going to write
something that says you can only go on
that bottom so only on
this row because all of these have the
class taken
so
if the square
below your current
square is
taken you can
go on top of it
cool
i'm just going to minimize this because
we don't need it
so
how do we write this in code if
we go into our squares array
i'm just going to use i but i'm going to
add 7
because i want to check what's directly
below the current square that we are so
we do that by adding 7 to the index
number of it
and then if that square class list
contains
k can
well
we can go right
so
i would do it like
oops this
so if that is true and the square
directly below us is taken
uh if the current
player equals player one thank you tab
nine if the current player equals
player one
i don't know why it keeps formatting
like that i don't like it
um well then to that square so once
again that square
i'm gonna add the class
list um i'm gonna add well i'm gonna add
taken for one because it's obviously
taken
but i'm also gonna add square list
class list add
player
one
okay
and then of course we want to change it
to player two so current player
equals two
um and then let's display it so display
current
player
in
html
uh
and let's just display whatever the
current player is because we've just
changed it to two so let's actually show
that visually to our user
okay
ah
click okay cool is changing okay now
it's player twos go so we can't do
anything
so now now let's write some logic for if
it's player two
um
if
current player
equals two
well then essentially we just
it's going to copy this really because
we're doing the same but just
we're gonna add player
two
and then change it back to player one
cool
um and then i'm also just gonna add an
you know like an else because we've got
these if if this
or we could just um
we might have to do an else if
i think we might have to do that
okay
yes we might have to do that else if
else alert
uh
can't
go here
okay
so now
change player two player two goes let's
play one again
player two oh can't go there where's my
alert
am i allowed
it's annoying
hmm what did i do ah right i put it in
the wrong place ha ha
else
if
alert
okay
so now one
can't go here
can't go here but play two can go there
can player one go here yes it can so
awesome
so that's why i did the else if if i
just got rid of this and just did an
alert well obviously
yes i know i can't go there i can click
here it'll just tell me i can't go there
even though i can because it's uh sort
of like executing this and then
executing that anyway so that's why i
did else if
else
cool
okay
so we've done that part of the logic the
last thing i need to do is check the
board for wins so i'm going to do that
with a function um this i do actually
want to execute every time we click so
there's no need for else if we just want
to check the board every time we click
on the square
so now let's write our function i'm
going to do up here of course because we
need to write it
we need to write the function before use
the function so
function checkboard
like so
now
this might not be like the most
uh i guess it's a lazy way to check for
wins i mean if you want to
uh
i guess make this cleverer please do and
share with me i just couldn't be
bothered it's a small board right so
i've just gone ahead and figured out all
the winning combinations on it
so please feel free to take this i'm
going to obviously put it in my um
github but i've just got a winning
uh a raise
array
again if i've got any wrong in here i'm
sorry um let me know the cons bring your
arrays
and there we go so i have literally just
pasted all the possible winning arrays
uh so by using my index number of course
on our board once again if you can think
of something clever then please do i'm
really lazy this was fine
okay so we've got our winning arrays now
let's actually use them in order to
check our board if any of the players
have a winning array
so to do this um well again i'm just
going to use a for loop so
for this time let
uh i we can use i we can use y like it's
totally up to you whatever you want
okay so as long as y
i'm gonna get the winning arrays
uh
length
it's gonna loop over
but we're going to loop over each one of
these right we're not looping over this
this this this we're just looping over
one two three each of these so however
many of those are
that's however many times we're going to
loop and increment by one
now
um
it's always i think it's always
important to use const as much as
possible we don't use a let this is
blocked scoped
so that's why i'm using a const we're
gonna say for each time we loop we're
gonna save square one square two square
square three square four so i'm
literally just gonna name it square one
square
for the square one we're gonna go into
the squares array this time
so it's const square one well let's just
say we wanna get the index thirteen we
need to go into our squares array and
then i'm gonna literally pass through so
i'm to go into the winning arrays and go
into the so i'm going to loop over the
first one
so let's just say we're doing our first
loop i'm going to grab this so i'm going
into the winning arrays going into the
array and i'm grabbing this and then i
want to get the first item from it
so i need to pass through a zero
so that is how i would do that and
whatever that is i'm saving a square
one
okay
so i hope that makes sense i'll talk you
through again we now need to get square
two
so what i would do
is um of course we're checking on our
squares grid so if i've just uh checked
yeah this square on our board with index
zero so for example
let's go back to our board
say i want to check this is what we're
checking we're taking square with index
zero one two three four so we're
checking those
so of course i would then need to go
into my squares array
i'm gonna go into it
and then i'm just gonna pass through
this value so i'm going i need to now
get this value which is a one so i need
to go into my winnings array this is an
array
so
y still because we're still in the same
one so whatever y is is going to be the
same for this
so winning arrays
and then i need to get the
item with index one so zero one so this
will return all of this essentially is
returning back
one
the number one
okay so i'm going into the squares array
i'm going into the squares with index
one
okay so hopefully you get that i'm just
gonna carry on if you don't please feel
free to reach out and i'm happy to
explain
further
and one more of course because we need
to check for four matches
and there we go
so we are looping we're grabbing all
four squares that we want to check
okay so now
we want to check um
check
those
squares
to
see if
they all have the class
of player
1 okay
so
if um
i mean this is probably the easiest way
to do it i'm gonna go if squares one i
mean we could do another loop but
there's only four so i don't think it's
worth it but please feel free to do
another loop if you wish i'm just going
to go squares class
if square if that first square that we
picked out if it has a class
that contains
oh god contains
a
player one
so if that is true
and the second square contains play one
how do i do this so it looks neat
uh there you go
and
the third square contains the class of
player one and
the fourth square contains a class of
player one and if all that is true
well then
we want to get our results that we
picked out was it result
oops
don't want that i think it was result
results
okay
you want to get a result and use inner
html to say
player one
wins
okay
and of course i mean let's just copy
this for
player two
just make sure that it's an if statement
i'm just going to copy all of this
actually so we have the pseudo coders as
well
oops
okay
i'm just going to use command d
two
player two wins
okay
i think that's all we need
uh whoops we did this outside of our for
loop
so i'm just going to get all of this
here's our
function okay
but then we need to actually put all of
this
inside
okay
i'm just gonna make sure
if
then this
oops
then otherwise this
so that is our loop great
i'm just gonna format this a little bit
better so just go command
so just tab it out
and click save
and there we
go
so now
we play the game
i just need to make sure we can only add
players if
that space is not currently taken
okay now let's play
so now
we play the game
and we get four so
there we go three
four
tada
we have now finished our game of connect
four
you will see that the game
works
okay
so that is how i would build a game of
connect four in a super simple way
please do feel free to take this game
make your own silent up
give it next extra levels if you can
think of a funky way to not have to
write out all the winning arrays
then please do let me no like i said i
was pretty lazy with this and i just
stuck them all in there because i
thought you know like it's it's a small
grid
thanks so much again for watching and i
do really want this to be a conversation
so yeah please do uh show me your games
okay
nice
later
in this next section we are going to be
building space invaders this game is a
classic another retro classic in which
you as the little guy right here have to
shoot all the space invaders coming down
before they get to you
okay so a lot of timing events here it's
a grid-based game so a lot of stuff that
you would have already covered is going
to come up a lot of modulus work and so
on so these are the uh javascript
methods and properties that you will be
covering in this section
let's do it
okay so to start off
i have actually already pre-made my
files so the html file with some
boilerplate i've named my project space
invaders i have linked the style sheet
to the style css file which currently
has nothing in it and then i've also
linked the javascript file to making
sure that the path names are of course
correct
okay so that is my boilerplate done
apart from that i have nothing else in
here so this is where we're going to be
starting off
are we ready
let's
go
okay so the first thing i'm actually
going to do is in the body i'm going to
make a div
and i'm going to call it grid we'll give
it the class name of grid so we can
style it up so that we can see what we
are working with and in the style sheet
let's just make a grid
now i'm gonna actually pre-decide that
all my squares in here are gonna be 20
pixels which means if there's 15 it's
gonna be 300 pixels
so width
300 pixels
height
300 pixels
and then i'm gonna give it a border
solid
black one pixel
okay so just save that and now if i open
this up so copy the path
paste that okay there's our grid
it's going to get the console log out
too essentially all the magic is going
to happen inside there and then we're
also going to get these squares so i'm
just going to
perhaps make sure that every div inside
the grid that's how i do it that's a
class name and then in here each square
is going to be what do we say 20 pixels
20 pixels height
20 pixels
okay so that is looking good the other
thing i need to do is make sure that
when they go in here i'm going to use
display flex i want them to wrap around
each other so flex wrap
wrap
okay
so now let's go to putting some divs
inside the grid i'm going to use
javascript to do that so to this i would
have to get the grid so i'm going to go
const
grid equals and then get our document
i can spell document
click not create element but document
uh query selector and we'll look for the
class of grid so make sure that's a
class and store that as our grid now i'm
going to use a for loop
let i equals zero to essentially put 225
because 15 five times 225 squares in
there so
that's a for loop to do so
and then for each time it loops what
we're doing i need to make a square so
const square equals document and this
time i won't create element but i want
to create a
div
and then i want to get the grid and i'm
going to use the pen child to put the
square i've just created
inside my grid
so that should work
let's just check it out
refresh
elements so now if i look in here let's
see
you will see
225 divs have been created and put
inside my grid let's carry on
okay next up let's actually get the
invaders so alien invaders
and then i'm just going to make an array
and then exactly and use the indexes to
figure out which
indexes i want to essentially put the
aliens is
and i'm going to make it
three rows of them
17 18 19 20 21 22
uh 22 23
uh 24 so i think these indexes
okay and then
uh 0 15 30 because it's 15 by 15
23 33 34 35 26 37 38 39
okay so that's looking fine those are
the indexes i want my aliens to be in so
now i actually need to get all these
squares
so i would do this i'm going to do this
up here after i've put in all the
squares cons squares
equals document
query selector but this time i'm going
to use preset all to search for all the
divs inside my grid
and save them as squares
and then i might as well just make use
array from to make an array of this
so now let's put my invaders actually in
the uh squares themselves so i'm going
to write a function for this function
draw
and then in here
uh another for loop so four let
i equals zero
as long as i is smaller than the alien
invaders
length because we want to loop over all
of the alien vedas increment i by
oops i
the increment i
okay so
over each of the aliens i need to go
into my squares array i'm going to pass
through the alien invaders
i so i'm essentially going to pass
through this this this this this each
time
and then
i'm going to use class
list
add
and i'm going to make
an invader class
so the invader class
well
invader
um let's just get a background color
of
purple
and then let's just make a circle so
border radius
10 pixels because i'm going to be taking
that and adding that to it so let's just
see if this works i'm going to add the
class of invader okay so now if i go
draw
just call that function
okay great we've got all our invaders
uh now let's get to drawing our shooter
so once again i'm going to go into the
squares array i'm going to pass through
a random number so let's just say 200
class list
add
shooter
once again i'm just going to copy that
and just write shooter
and make this red let's make a square
though
uh and then go here and refresh so 200
maybe we want to add two more
so
to make it more central so i'm just
going to put
current
current invader
shooter index
and then i'm going to save the number
202 to this
let current invade into 202
so now
this should be in in square index 202
great this is looking good so we've
drawn all of them i think the next thing
we should do is actually get some stuff
moving so let's actually uh start moving
the
shooter
so
function
function move
shooter
okay so for this i'm going to be using
keys on my keyboard so i'm going to pass
through an event the first thing i want
to do is actually remove the shooter so
we've got drawer shoes no we don't okay
i'm just going to remove the shooter
so from wherever he is we want to remove
the shooter wherever he is on the board
and then i'm going to use a switch to
essentially switch out the key
that i am pressing
so this is a switch statement and the
first case is going to be arrow left
just for our left correctly that's the
first case
if current shooter index
is modulus width
so we're just checking if
it is
uh
not equal to zero so as long as the
shooter is not on um to if this if it's
divisible by factor 15 and leaves no
remainder we know we're at the right
edge
right hand edge okay so as long as it's
not zero then we can move our current
shooter um
uh one to the left
okay because it's minus one and the
array which is going backwards one and
then we break
and then we need another one so this
times case for arrow
right
okay
so if this time let's get the current
shooter index and this time if it's
modulus width
and that is smaller than 14 or like in
the first case 14
um so essentially this time we are
checking if
it is as long as it's not in the
right hand side then our current shooter
index can move right so we're
essentially just adding one
to it so hopefully that makes sense uh
and then we break out of it
and then we need to redraw the shooter
in its new position so outside of the
switch case i'm just going to add him
again
okay so that should work i'm going to
link this up to an event listener to
listen out
for not clicks but each time you press
our key down on the keyboard and then we
want to call the function move shooter
so let's test that out
okay so pressing left
and that is not working width is not
defined right we didn't define width or
silly of us let width of the grid be 15.
okay so now it's going to move and it's
going to stop because it hits the edge
movement is going right right right and
then it stops okay so that works let's
carry on now we need to move the
invaders
so
function move invaders
so now actually
that worked for here we define the right
sorry the left edge and we defined the
right edge i'm actually going to define
and store it now so left edge
equals
and this time i'm going to go into our
alien invaders array that we made and if
the first of the alien invaders
is
modulus width and that deeply equals
zero
okay so that's how we know we're on the
left edge because we're in the left
column because all these values uh
modulus will give you a remainder of
zero so
there we go sorry of course i'm rushing
this because it's a speed thing but i
definitely do look into modulus if you
don't know much about it
i do a bit of it in my course so once
again let's check the right edge and to
do this i would get the alien invaders
length so i'm passing through
essentially whatever the alien length is
minus one because we're working from
zero we're pushing it through the
array and if the very last invader
is in a column where modulus width
minus one then we know we're on the
right edge so essentially we're just
sort of rewriting these two in a
different way so we've just defined our
left edge and our right edge
once again we're going to have to remove
the invaders so actually we've got a
draw invader here i'm gonna make a
remove invader too by copying that and
pasting
that
and i'll call it remove
uh remove
okay so i'm going to remove the invader
the function is called remove so i'm
just literally going to write remove the
invader first until
we can do our logic
so
this time well let's just get maybe
focus on
the
aliens just moving in general
so
i'm gonna do this by
okay so for let i equal
zero so i need to loop over each invader
and assign it a different position right
so alien invaders length
so we're doing it for each
alien invader in our array
i uh
okay
now we're gonna get the alien invaders
oops
pass through an eyes because we need to
have each one and just add a one
to it
okay
and then i'm gonna just draw the invader
so now let's put this on a set interval
so i would sort of do it uh like this
set
into file and then i'm going to put move
in
faders and let's do it every 500
milliseconds
so let's see if that works refresh
okay
so great they're moving but they're
obviously just moving one way
um and they're going through everything
so that's not great i'm gonna swap this
out to be direction
okay and i'm just gonna put
let direction for now it's a positive
one
but if we change it to minus one it will
go the other way so that's something
that we need some logic we need to do
and i'm gonna put this on a
id so we can clear it
invaders id
yet
invaders id so i'm not that's just null
for the moment
okay so we've got that so far
uh the next thing that i would like to
do is actually do some logic
so i'm going to do that above here
if
okay so let's do for if if it's at the
right edge first so if right edge is
true if one our last invader is in the
right edge
okay
well
then
we need to
essentially make all of them go down so
i'm gonna write a for loop again
for let's
i equals zero and just make it go down
and change direction so i
and invaders length
uh and then i plus plus
so i'm going to loop over that
and once again i'm just gonna get the
alien invaders and for each alien
invasion i need to essentially just add
a whole width to it so add 15 to
whatever indexes there are i'm gonna add
a width and but then minus one
so what's this
so i'm moving them down and i need to
change the direction so now direction is
gonna be minus one
so
okay let's see if that works
all right and we're in the right edge
and then it goes down
okay so it's going down
and it's changing direction
cool
okay
um
mean it's changing in the weirdest
direction because it's going
there so we don't want it to go there
um
plus one
cool oh no
why is that doing that
direction minus one
huh
ah because we're still on the right edge
okay
hmm
okay well let's make another let's if
it's in the right edge and it's
currently going
right
so let's put
let's going right equals true as it
always starts off going right so if it
is going right
then
add the width change the direction but
immediately put going right as
false
okay so there and then grabs false so it
goes the other way okay great so now
that we've got that let's do for if
uh is that the left edge
and
it's not going right because it's going
left
uh once again let's get a full loop for
let i equals zero
and then i is smaller than alien
invaders
length
i plus plus so just a for loop
uh so we can go over every invader so
we're going to go into each invader and
for each invader
or invader index specifically if it hits
the left i also want to add to its width
but this time well let's just see if
what that looks like and then i need to
change the direction this time v1 and
going right
to true as i need to change the
direction so let's see what that looks
like i have a feeling i know it's going
to go down in the wrong place so go down
go left come on come on come on
yeah okay so let's actually make it go
back one
it was right to do that
and i'm pretty confident that so let's
carry on so that is good
with accounting first should go all the
way down
uh i think the next thing we need to
account for
is if
it hits
the invader
so down here
squares
and the current shooter index
class
list
contains
and if it contains invader
and shooter
so if whatever square we're in contains
both of those
then
let's just
console.log for now
game over
and then we would need to clear
interval
invader
id whatever i called it
come on
invaders id
okay
so now if we go all the way to the
bottom i mean i don't have time for this
is rush so i'm just gonna put this to a
hundred
um
so there we go and i should get a
console log same game over as soon as we
hit here because both will be in the
same square
yes game over great cool and everything
stops brilliant so that is looking good
so instead of this i'm actually gonna
get a results display in html
equals
game
over
now i actually need to define what is a
results display so const result display
equals document
query selector and i'm going to search
for
something with results
or a class with results i could do an id
that is totally up to me it really
doesn't matter so i'm just going to go
class
results so you can style it up later and
i'm just going to default it to
one
zero sorry
okay
so that
is fine
we've got our game over
um the next thing that we want to do
is
uh i guess if we hit that but what if we
just go to the bottom right so this time
if
actually no we don't want to do that
let's do another for loop for this for
let
i equals zero
as long as i is smaller than the alien
invader's length
we want to get i and add
increment i
okay now if
alien
invaders i
if it's larger than the square's length
we get
well we can just use this again so let's
see if that works
um i'm just gonna get rid of the shooter
for now
let's just see if that works if it hits
the bottom
so
see if we get a game over
and game over oh okay we get a game over
there why is that
um
is larger than the square's length
plus width
so let's try again
huh
put that
like so
ah it's because
um what is happening here let's inspect
it
data invader invader
plus let's just go 100
see what happens
okay we'll come back to this maybe it's
fine that we keep it like this and we'll
just change
something's obviously happened but i'm
fine with this for now
we can do some changing
on okay so we get a game over if it gets
around there and then we do clear
into
file
invaders id
okay so we've got it getting a game over
when we hit
roughly the bottom i don't know what is
happening here let's just go console
log
squares length
just gonna
be like that
and then
see what that actually comes up with
if
okay let's move that actually up here
because we need to know what it is
two to five okay
and then
here i'm just gonna console log
alien
invaders
i
see what number it goes up to
there's a 209
i'm just gonna console the other one out
just maybe it's something to do with the
space invader and the current index
ah it is okay fine so that is actually
because it's my fault even though we got
we got rid of um
uh the styling for the shooter uh
the we still have the current shooter
index there so if it contains these do
we get a game over and that's why it was
stopping it so this actually works it's
fine let's carry on that's my fault i
didn't realize that uh this was
affecting what was happening and it
wasn't anything to do with this funk
this poorly at all so that is fine we
finished that we get a game over for if
we hit
the
um
shooter and we get a game over
um if we hit the bottom of the grid
okay so that is looking good let's go on
to our next part our next part is going
to be all about shooting the aliens so
i'm just going to move that up there
and write a function called shoot
okay
so for this i need a laser id just like
we have the ids for other ones we need a
laser id now
and then let current laser index
so wherever
look current
laser
index so wherever the current shooter is
on our board that is where our laser is
going to start from
okay now we need to move the laser from
the shooter to the alien invader okay so
once again i'm gonna write a function
function move laser
uh
now i'm gonna go in so once again i need
to remove the laser from wherever it is
i'm going to use the current laser index
to remove i know we haven't added it
anywhere yet but we always need to
remove something before we draw it in a
new location so remove laser and then
we're going to get the current laser
index and we're simply going to move it
up a whole width okay so we're going to
minus 15 from it
and then we're going to redraw our laser
so that's it
really
add laser
and then what's our laser gonna look
like well i think our laser
is just gonna be let's just make it a
orange square
so orange
okay
so that is our move laser function
however
we need to actually uh
hook some timing events onto this
so i'm actually gonna put this
[Music]
so that's gonna move our laser
now let's put this maybe on a
event listener so
document add
event listener and if i press
key up
i'm going to shoot
you can have key down whatever it
doesn't really matter as soon as you
press the key down it's going to shoot
but we only wanted to shoot so once
again i'm going to do
a switch case for this
e key
and if we press i don't know arrow
up
let's do arrow up sure
so if we press that
laser id i'm going to actually
put
this on an interval i'm going to move
the laser
so this function
100 milliseconds
so
why isn't this
move laser oh that's because it
shouldn't be in here
let's be here
outside of this function because that
wouldn't make any sense
we need to call the function but it's
still inside this function so let's
get to doing that now if i press key up
there we go
there you go there we go there we go
there we go
nice
now let's get to adding some
what is why is it not liking this cannot
really procrastinate find line 98
98
remove laser okay well it seems to be
working for now um i'm sure i will fix
that when it comes to it so now let's um
think of collisions and what happens
when we actually interact uh with
stuff right so if the laser is in the
same square as an alien
so if
squares
current laser index this time
class
list
contains an invader
so if it's in the same square as an
invader
well
then we need to remove the laser for
wherever it is
we also need to remove the invader
from that square and we also need to
um
let's add a boom add
boom okay so we're using the current
laser index whatever square we're in we
need to remove the laser we need to
remove the invader and we need to add a
boom
and what should our boom be i'm
literally just going to make a square
boom
uh i actually think this should be red
so let's make it red
and let's make this one
oh my i know now running out colors
green
okay so hopefully that
works
if i
it's sort of not really removing
anything
okay let's see why not
ah that's why
squares
let me spot
squares and shoot
okay cool i'm getting booms
nice
if we hit it we get booms
okay let's carry on
ah so this is giving us errors because
we actually have nothing to remove but
for the next time
uh there will be so i'm just gonna just
gonna keep that there even though it's
giving us errors
um okay so
next
up
we actually want so once we do get a
boom we want it to disappear after some
time so i'm going to use a set time out
for this
and essentially write a function in here
that will
uh so our function is going to be
squares
current
laser index
class list
i want to remove the boom after
let's say
300 milliseconds
okay so now the boom is going to
disappear after 300 milliseconds
and
so it's disappearing
not very well though
okay and then i'm going to clear
interval
laser
id so i'm going to stop
to see if that works
okay
okay so now the laser is disappearing
and i a much better way because i'm
stopping the laser id from running okay
hit something and it disappears rather
than carrying on so that's good
um i mean it's still not getting rid i
mean it's getting rid of the invader but
it's being redrawn so we need to
actually
take care of that
okay
so let's actually get rid of the invader
from our array so it doesn't get redrawn
const um
alien removal
because let's get the alien in vader's
array and then i'm going to use
javascript method called index of to
pass through the
laser index so the square where all the
collisions happens okay whatever square
that is the alien's gonna be
um
whatever square that is the alien's
gonna be removed from the aliens array
based on that
so cons alien removal i'm gonna get the
alien uh invaders
uh
alien
okay so we need to actually
let's make
a array
an empty array where we're going to
literally collect all the aliens that we
have
removed
i think that should work because we need
to be collecting them so um
aliens
removed
equals
so let's actually do that up here let
aliens
removed
and for now it's going to be an empty
array because we haven't removed any
and now
i'm going to actually get
so i'm going to get that array and i'm
going to push
the alien
moved i'm just going to go alien removed
because it's singular and i'm putting it
into the aliens removed array
um okay so hopefully
that should work we're going to remove
it from
the array and i want to store it
okay so let's have a think about this
i'm gonna be storing all
the aliens removed so for console
log aliens
removed
if i shoot
okay
okay cool
i'm removing all of them obviously i'm
removing 24 each time
because
i keep removing it because it hasn't
actually been removed so this time i'm
going to get this alien
aliens removed and this time let's get
our draw function
right
now
let's have a think about this
where is the nitro function
here okay so before i draw it out i
actually need to check
so if
the alien invades removed
and does not include
i so whatever moving over so if i shot
uh
24 index 24 and that's included in here
that i don't want to draw it
um
so i'm just going to talk through this
again
so
if the
if whatever number i'm passing it
through here so say it was a 24 and if
that is not included in my aliens that
have been removed i can draw i can add
the class of invader okay so that should
hopefully fix the issue so now if i
shoot
great
okay now if i shoot it they're being
removed
cool
now let's move on the next thing i need
to do
is simply
check for a win so a win will be easy
essentially if where should we do this
let's do it in here
um and then i can just simply go if
and i'm just going to use the aliens
removed array length to do this so if
alien
aliens removed
length
deeply equals the invaders alien
invaders length well then we know
that we have
one
so i'm just gonna put
you in
and then
clear interval
uh invaders
id
okay so that should do it um i guess we
sort of need to add a score too so each
time we remove an alien i'm gonna put
results plus plus
and then
let results i'm gonna start with zero
and add a score and then we're gonna
also display so we're gonna add one to
the result if we move one i'm gonna get
the result
display
in our html
want to put results
okay so let's check that out
okay so we're getting scores
and then hopefully i can kill them all
before they get to me but i doubt it
okay let's i'm gonna uh maybe slow it
down a little bit so we can
play it normally
and then let's see
okay if i do this the game is over and
we have won and we have finished the
game as long as it says you win then i
am happy
come on
i'm not very good at playing this
clearly it's going to stick around here
to do it
oh
and once more
come on okay i can do this
come on
for the win here
ah
oh
oh my god okay well i'm pretty confident
that we have one let's just slow it down
even more maybe uh i'm gonna really slow
it down because i just want to get these
done now um
i want to show you that we have
completed the game essentially
and that we can stop the timer okay so
if you're going to try competing against
me um we need to see that you win as
well otherwise how do we know that this
game is finished we don't i mean there
could be a bug that i haven't uh
identified yet so as long as i get these
all
off
if you want to add levels this is a
great way to add levels uh just yes and
we did it done i have finished the game
i finished space invaders
finished whoo
okay
hopefully you can beat my time if you
want to have a go at doing this yourself
speed coding space invaders okay super
simple there's your game go forth go
share it please do tweet your uh
finished games too only to me on twitter
i would absolutely love it to see
what you have built are you have taken
your game to that next extra level and
of course if you want to try beat me on
the speed coding then please do that too
okay
thanks so much uh again and i will see
you soon
and congratulations you did it you've
finished building your games once again
please do share them with us on twitter
i'd love to see what you've made please
tag us please tag your solutions save
them in codepen save them on github
perhaps deploy them and i can't wait to
see them