In this video I show you how to code Rock paper Scissors in JavaScript in not just one approach, but 3 different approaches. I am doing this to show you just some of the ways you can solve one problem using JavaScript. I will be using a more beginner approach to start off with, and move onto more intermediate and advanced approaches. This is a JavaScript tutorial so there will be no styling in this tutorial. That part is totally up to you :) Please do share your finished games with me, I would absolutely love to see what you have made and how you have chosen to style your games!
what's up everyone today is a really cool video as i'm not going to just show you one way to make rock
paper scissors in javascript i'm going to show you three i really wanted to create this video as
i really wanted to show you the different ways that we can solve this challenge one being maybe a more
beginner approach and then some more intermediate approaches later
too okay so one game three solutions let's do it
we're going to start off with an example that perhaps relies on the html a little bit more
and by the end we're going to be doing everything in javascript so one that is made fully in javascript
apart from one div that we're going to inject our game into now as always i will not be focusing on
the styling in fact no styling will be done i've done this so that you can take the game
make it your own style it up go to the max go crazy put in some animations like i really want you to go wild and
please do share it with me on youtube instagram twitter whatever so what are
we waiting for let's do it please do like and subscribe to my channel as you know it really does mean a lot as
it is the way that i can carry on to keep creating more content for you guys
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 um
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 gonna all the html code that we write is gonna have to be above
uh 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 gonna do like i said i am gonna be working with html and css
in this video is i'm just gonna put some h2 tags so this is my first h2 tag and i'm just
gonna put compute computer computer joyous about our computer choice and in it i'm gonna
have a span to sort of break up that h2 tag in which i'm just gonna 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 gonna 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 gonna
have a button um let's put rock in it and i'll just give it the id
of rock like so again so we can pick it up 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 gonna have to go to my javascript file
so in here the first thing i'm gonna 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 um so i'm gonna 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 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 um 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 choices that can't have that display so now i'm going to get the user choice display
and using the property of innerhtml.html i'm 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 choice um okay what's that function going to 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 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 my floor to round down that
random number because that'll give me a random number okay 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 0 to 2 as we counted indexes
so i could just get this and add 1 just for readability if i wanted to so now let's check this
1 3 2 2. 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 two
say schizos and random number equals three
let's say paper okay so and then let's actually
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 random 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 going to write another function function uh get result
now if computer choice deeply equals or equals up to you
um user choice
well then uh return
or we'll get the results so let results
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
[Music] uh actually no you win you win here
computer is rock but you have paper you win you 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
it's because this 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 result's not showing ah we didn't do any in our um let's get the result
display in the html result cool so paper oh you lose
scissors i chose there's a computer choose rock so i lost i chose royal computer too 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 improvement as you wish
um i did do it so it's quite verbose and it's quite easy to read 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 gonna move on so once again no
styling of course uh let's do it
okay so example number two this time we're going to be relying less on the html and i'm also going to
be using functional expressions as well as simplifying some of the logic we did earlier to make it a little bit
uh i guess more neater so let's go right so the first thing
you'll see is i have my index html set up exactly the same so once again my app.js file is linked
with my script tag i've just named it the same as you know it's on the root of my project so i don't need to do
much just put the file name in there and of course make sure that it is at the bottom of my
body and all the code even though like i said there's not going to be much i'm literally just going to put a div
with the id of game and basically our javascript is
going to populate this with elements okay so let's
do it let's go to our app.js file now the first thing i want to do is actually what should we do first i'm
going to create elements so this is how you would create elements const user choice display
and i'm going to use document i'm going to create element so that's a javascript method in
which i can create a h1 tag okay so there we go i've
created it user choice display i've created an h1
tag i'm also going to create another h1 tag for the computer choice display
and then of course i'm going to create a result display to result display and i'm going to
create another h1 tag now i'm going to actually grab
this element with the id of game so what i'm going to do is call
this game grid and use document get element by id
to grab the game id which is attached obviously to this
div and now that i have grabbed that i want to put all of these three things
into my game grid so i would do so by getting game grid and using append
so another javascript method to put in the user choice display
the computer choice display and the result display okay
so that's how you would do that if i now oops let's go here let's also
copy the path just paste it in here now if i actually inspect the body
go into my div with idea game you'll see the three uh h1 tags that i've just put in using
javascript cool let's carry on
and once again i'm just going to make this smaller so now that we've done that um let's define our choices so i'm just
going to make an array of rock
paper
scissors cool the next thing i want to do is um what
do i want to do i want to
okay i want to add the buttons now so i could
do this with a four each but i'm going to use do a um i'm going to do it with a for
loop just to show you something different so as long as fuller eye as long as
uh i is smaller than the choices length so technically number three i want to increment i by one okay so i'm
going to loop and i'm looping because i want to create three buttons so similarly to how we use document create element
i'm actually going to use against a constant button i'm using cons because it's block scoped
i can use a const document create element and i want to create a button
now for each time so i've created a button once this is my first loop i've created the button i'm going to
grab the button and i want to give an id and i want to give the id of choices and
whatever in our first loop is so it's going to give on our first loop i'm going to give the button id of a rock
okay on the second loop i'm going to create a button and give an idea of paper on the third loop i'm going to create another button and give an idea of
scissors and then of course oh i can also do
add give it some inner html so once again i'm going to do choices like so
so we've got an idea we've given an id we've given it some inner html the last thing i'm
gonna do to my button is yeah that's right add event listener to it to listen out anytime we click
and each time we click i want to call the function handle click so we haven't done that yet
so i'm going to write this function up here i'm going to use a function expression so a const handle click
like so so before we wrote function this is a function expression i'm just going to pass through an event
well actually for now i'm just going to put console log console log
clicked okay so we've done all that and the last thing we need to do
is append it so you guessed it we need to get the game grid and we're going to use append we
can use the pen child to put in the newly created button so now
if i go here there we go we've put in we've made the three
buttons in javascript we've given an id and then we've also given them um some
inner html so as you can see it has an id of rock and also has an inner html of
rock and also if we click it it will say clicked clicked clicked click click click click
click click click click cool amazing so now let's think about what
else we want to happen when we actually click it right so similarly like to before
um we of course need to pass e so whatever we click whichever the buttons we click
that's going to be our user choice right so i'm just going to store this uh
up here as let user choice um and whatever we click so
that's gonna be the e events target i could so i could use the id and that's
probably a better practice but i could just use the inner html it doesn't make a difference
if i just want to use it in html i can technically get rid of that so i'm just going to make a note of that
you can delete this if you want to use
e target html in the handle click
okay but i'm just going to use the id for now i think it's better practice anyway
cool so we've now stored whatever we click is now stored as our user choice what else we need to have when we click
something or then we just display it right so user choice display in our html and then let's
show the well i'll show you the user choice to the um i guess player
so now that we've done that well let's see if it works for now so scissors paper
rock says that's piper rocks this is paperwork cool
now we also want to generate computer choice generate computer
choice and that's going to be a function that we are yet to write so i'm actually
going to do it here we're also going to have to get the result check the results remember so const
generate computer choice and once again so this is going to be like
an alternative to how we did it before
i think it's a much neater way but you'd be you be the judge on that so once again we need a random choice
right it can be a const because this is block scoped it does not need to be a let
cons random choice um for this well once again i am going to use
math run and i am going to multiply it by the
choices array length so this will return a three because there's one
two three items in here i grab this array and use the length property on it to figure out how many items in my array
so i'm going to do that and once again i am going to use math floor to round it down so now if you remember i will be
getting an index number from zero to two zero one two so that's three
uh choices that will come out of this and what i'm gonna do instead is just put it put this because this
will generate either a zero a one a two or a three what i'm gonna do is put it
into my choices array so i'm gonna get my choices array and open it up with square brackets
because if i was to get this array and pass through a zero i would get a rock if i was to pass
through a one it would return paper and if i was to pass through a two it would return these string scissors okay so i think
that's much neater than what we did before but just let me know what you think
so we've got our random choice it will retain you the rock paper scissors and i'm going to get the computer choice
display and do inner html and then just show
my random choice
cool so now we're getting two nice obviously we can't really tell
whose is who is um
so we can do that here user choice
like so and then you add and then i can also do computer choice
like so ta-da oui
okay now let's get the results um
now we actually need to store a computer choice up here so we can compare the two so i'm going to do computer choice like
so and um maybe let's do
computer choice and whatever the random choice is is now
the computer choice so we're getting a random choice we're assigned it's a computer choice and now i could keep random choice there
but i think it's neater if i just do computer choice like so okay now let's do some
results so i'm gonna do this down here uh i'm gonna write const
check or get results what did we write before get results
um just it's consistent i think we did get result before as a function name so to get the results i'm actually going
to use a switch statement for this and whatever user choice is
the string user choice plus the computer choice now
if so i'm gonna write case if it returns scissor
paper because obviously i'm getting one string and just adding it to another string so if that's what it returns if the user
choices scissors and the computer choice is paper
or
oops we've got scissors paper then we also want rock scissors scissors
rock scissors i haven't spelling all this right rock scissors and then we also have
paper rock then we want um results
display in a html to equal you wear right because scissor beads
paper rock pizza scissors paper boots rock that's right yeah and then we want
to break go so now again let's just write another one of these
that's horrible why did that happen
so this time let's write a losing case for us as the user and that's if
paper scared so i'm just going to do the reversible these scissors rock
and then rock paper and then finally
we'll just have paper paper scissors scissors
rock rock it's a draw
okay so there we go and then let's obviously call get results here too
so now oops get results is not defined that's my fault get result
oh it's a draw you win i win again that's a draw amazing so we have now
finished our second example of how you would build rock paper scissors in javascript and html
but very little html let's be honest it's just this one div we've done most of it in javascript
so amazing i hope you found this useful i have one more example to show you
now this example i want to show you because it actually uses the least amount of code which can be problematic because with
this everything's quite split out which gives us the opportunity to you know like make animations
maybe have like a little timer until the computer choice shows up and then you show the result because at the moment everything's happening very
quickly but i'm going to show you the um the third way that i would solve this as a software developer so let's do it
okay so once again let's start with that html once again there is no styling involved
here because i want you to be in charge of doing that all by yourself and show me how you did it okay so once again
script tag the script tag is um the source is the app.js
file it's just simply the apps app.js file name because it's in the root of our project so we don't have to go into
folders and i'm making sure that is at the bottom of our body uh our body tags okay
now with this one i'm once again just going to have a div um this time i'm going to say
choices because i'm just going to have two divs here like i said i'm trying to do this with the least amount of
code this time and then let's put an h2 tag here that has id
result like so now let's go into our app.js files where the magic
happens so once again you guessed it let's pick it out so this time i'm going to use query
selector because i haven't used that before so i'm going to use query selector this time to pick out the id
so i need to put a hash because i'm looking for the id of result and let's save that as const result
display okay so i've literally just picked out this i've picked out the h2
tags by the id and then let's also get the choices display
document query selected choices thanks tab nine because i'm looking for the id of choices that's what you need to do
with query selector okay so now that we have that let's
define our choices i'm using const as they will not change and once again that is
rock paper
scissors okay now this time
i'm gonna grab the choices array and for each choice in my array
so i'm literally for each of these i am going to well i'm again going to create a button
so i'm going to use document create
element and i'm going to create a button let's store this as a button it
can be a const because it's block script so making our button i'm going to grab
the button and use inner html to uh nrhtml to assign it the
choice so we don't have to do eye anything
we're not looping we're doing a for each this time so i'm simply going to assign it rock paper or scissors as the inner html
we're not going to do id in this one as we did before and i'm going to grab the button and use
add event listener to listen out for a click and each time we click we want to call the handle click function like so
and once again i need to grab the choices display
so we're grabbing this here right and i'm going to use append
child button
cool so once again oops let's copy the path
uh handle click is not defined right yeah oops i need to define that so const handle click
uh and again i'm using function expression um i'm just going to console log clicked
for now so we can see that this is working so far and we've done it so this time we've
used we've used the four each instead of the for loop to um create our buttons
if i now have a look in the choices the div with the ideal choices i see a
button with inner hdmi rock button with an html paper and a button within html scissors
we did not bother adding the id this time okay so the next thing we want to do is
handle the click now this is going to be interesting um
instead of generating a computer choice user choice i'm just going to do
everything at once so i'm simply on the click going to go to the function get results
okay and into the function and get results i'm going to pass through two things i'm
going to pass through whatever we click so remember we need to get e target
in a html that's how we did it last time i'm going to pass through whatever we
clicked the inner html of the button that we clicked so i'm going to either pass through rock if i click the button with uh nih and i
rock or i'm going to pass through paper or i'm going to pass through scissors okay so i'm going to pass through that
and i'm also going to pass through a randomly generated choice by the
computer so once again i'm going to use math random
let's make this smaller i'm going to multiply it by choices
length i'm going to wrap it in math floor to round it down
like so and then of course i'm going to get the array i'm going to pass that through into my
array okay so let's just make sure we've got enough
great okay so i could what i could have done if you're finding this difficult to
read is i could have just done const uh user choice
equals the target or const computer choice and the computer choice is a
random um choice from array thanks to this code and just done gonna pass through
user choice and computer choice so essentially that is what i'm doing
okay that is exactly the same as what i am just wrote okay so i'm just going to put
it back there for now because i just want to show you like different ways that people can work so you're
aware of it so that is the same thing um maybe the other one's more readable but this one's
i guess less couch i personally wouldn't really do it this way i'd make sure that it's more readable
but like i said i'm just showing you different ways that people could so i'm passing in through what we clicked
and i'm passing through a random choice from our array great
so i'm passing those two things in now let's write our get const to get results um
and now whatever the first parameter is i'm going to say that is the user
choice and whatever the second parameter is i'm going to say that's our computer
choice right it doesn't matter what we call it i could call this
blur um for all javascript cats so now okay well i'm gonna use the
switch again so switch uh and i'm just gonna do user choice
plus computer choice and i'm actually just gonna use the same logic for this as i did in the previous one
so once again case
paper okay
rock scissors excuse scissors
rock scissors
and then we have case
paper that's going to i'm going to get the result display
and we're going to put you chose
user choice
and the computer chairs computer
choice result display result display why is
that all right oops you chose
your choice and computer chose computer choice so that means
you win right because that's a winning combination for the
user great and then we break okay so now we just have to do this
again so i'm just gonna move that up here
um format it a little nicer so this time let's do the reverse paper
schizoids scares excuses
rock rock paper so this time we lose
and then just do it one more time for all the drawers
so that's scissors scissors rock rock
paper paper and then it's a draw
okay so that's it this is definitely the shortest one let's check it out so now if i click
scissors it immediately tells me youtube says this computer choose paper i win and once again youtube's paper
computer choose scissors i lose amazing so as i said this is the least amount of
code and it does sort of do everything essentially in the get results function but if i want to you
know make an animation so make it like i don't know turning things saying you know the computer's thinking about their choice
and then display the result later this is going to make that very difficult so while the javascript is
great that is something you have to take into consideration and that is why you might want to choose to use
uh option two over this okay well that's really it i hope you've
learned a lot today i've really enjoyed showing you all the different ways that you can solve um rock paper scissors in javascript if
you have any more please do share them with me like as always javascript is great because there's so many solutions and so many ways
you can do this game thanks so much again and i'll see you soon
No comments:
Post a Comment