hey everyone and welcome to another
video this week i'm going to show you
how to build whack-a-mole in super
simple
javascript html and css
no styling no canvas because if you are
a fan of my channel you know that i
don't really like
either i don't really like to style
these video games because i really do
want you to be able to take the game and
make it your own
and really give it your own extra flair
and pizzazz
because i do want to see your game so
please do share them with me
on youtube instagram twitter whatever i
just really love to see
what you have built but before we get
started a little word from our
sponsors who have made this video happen
harperdb is a scalable database that's
improving app performance and
development with solutions like hybrid
cloud
with sql on json you no longer have to
pick a database based
on the structure of your data harper db
runs anywhere
and adjusts any type of data at scale
you can spin up a powerful free instance
through the harper db studio where you
can easily manage both self-hosted and
hardware db cloud
managed instances the studio includes
resources like
example code sdks and drivers
make sure to check it out using the link
in the description
it is a track link so they can manage
this ads performance so give it a click
and help me out in being their favorite
okay for those of you who don't know how
to play whack-a-mole this is a really
good game as we're going to be doing a
lot of timing events
so if you're currently learning
javascript i want to practice your
timing events this is definitely the
video for you
we're going to be building a countdown
timer that counts down to
60 seconds from 60 seconds and in that
60 seconds you have to hit as many moles
as possible okay which you're gonna add
to your score
so that is it in a nutshell this is what
we're going to build by the end of this
tutorial
i hope you're excited i know i am so
let's
do it okay so
first things first here is my file setup
in which i have some standard
html boilerplate making sure that
my stylesheet has the correct path
to my actual stylesheet 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 wacom ogre 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 h2 tag for the score
so i actually want my score to show up
here i'm going to 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 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 get 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 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
width 200 pixels
and then i'm actually gonna give each
one
let's give each one a border
um i'm just gonna go border 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
ah 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 it 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 to 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
and 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 six oh six
and height six of six and there we go
the squares now fit perfectly into
my garage so this is looking good
if i want to see grid i'm 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 gonna 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
mole 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 mod 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
mold 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
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 mold 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 an
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 school
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 gonna write a function
called random
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
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 that's the first step that we want to
do in our function
before we start adding ammo randomly
so i'm going to write let random
position
and then i'm gonna use so once again i'm
gonna 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 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 load it 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 h
let's check that math rand
my trusty mdn
okay math random enters a function from
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 by the first console
log so for whatever random square we
have
i'm going to use class list add
mole class so once again we should now
get a blue square
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 you'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
ammo 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 mode 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 and 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 hit 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 gonna put this
um once again because i'm not attaching
it
to anything i could just put set a vowel
i'm just going to put this down here
and call this let's
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 1 1000 milliseconds it
would 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 i 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
countdown 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 you
can 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
to clear
interval timer i do
let's try that now once again
let's click click click click click
click click
click i've got score of five got a score
off
okay game of your function score is 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 drag it on for him 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 gonna put uh url
and then the path to my mole so it's the
root so i just put
raw mole jpeg because it's a jpeg
and then i'm going to 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 five squares three
let's fix that space
okay score is for the 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
No comments:
Post a Comment