hi and welcome to my JavaScript tutorial in which I will teach you how to code in JavaScript by building your very own
basic game of Tetris I always find that learning is easy by doing so if you're the same this tutorial is definitely for
you and here you'll have a pretty neat JavaScript game by the end of it this tutorial is for super beginners and we
will be going through the fundamentals of JavaScript as well as some inbuilt functions that are gonna help us build
our tetris game if you have never touch code before this is a pretty good place to start we will be going through some
CSS and HTML as well but just the basics as you know this is a JavaScript tutorial if you do have some prior
knowledge of HTML and CSS please do not skip the first few lessons we need them in order to set up our game feel free to
watch them on double-speed if you prefer tetris is a simple grid based game in which you as a user have to navigate 5
shapes or tetriminos down to the bottom of your grid the aim of the game is to get the highest score by filling up rows
when your grid in order for them to disappear and for you to gain points you as the user can rotate your shapes and
you also have insider knowledge by knowing which shape is coming up next thanks to a grid to the side of your
grid in this game we are not gonna have levels we are simply going to do a basic version of the game basic functionality
and basic styling this is so you can take it and make it fully your own I would love to see all your finished
projects how you have made them your own in terms of styling or leveling up so
please do share them with me please do get in touch if you get stuck at any point in this tutorial I am always more
than happy to help again please do use my social links hello so yeah let's get going
in this walkthrough I'm gonna show you my preferred code editor as well as the
bonus of how to set it up so that it works for you like a sort of spell checker if you will it will check your
code for mistakes and prompt you to change things in order for it to work I am also going to show you what a command
tour is and how to use it to access files and folders on your computer as well as speak to them and download
things from it okay so let's get going first off start by downloading a code
editor I'm going to use Atem if you go to item to i/o and download the program that will be the
tool you use to write code in your project now copy it into your Applications
folder and add it to your dog once there has been downloaded you will
use the command line system to create a folder to store your project if you have
a Mac simply search for terminal and your Launchpad if you're on a PC you
need to search for your command prompt tool now open up your terminal and using LS you can list all the directories now
using CD to enter a directory we navigate to the desktop it is on the
desktop that we're going to create our project called basic Tetris so using a command called mukhtar we're going to
make a directory called basic Tetris okay great we now have a folder to store
all our code files in it to go into this folder again we use CD let's use the
command CD to go into this project if you ever want to get out of this project
we use CD with two dots like this but we don't so let's go back into it once in
this folder we need to create files go in it we do so using a command called touch touch we'll create files we need
to create an HTML file CSS file for styling and a javascript file to hold
our JavaScript I'm going to choose to call them index.html style.css and op j
s okay perfect now using atom dot as we are using the
atom code editor we will prompt the project to open in our atom code editor
and there we go we are now set up to start writing some code now when I show
you some useful settings on atom that will make your life a whole lot simpler atom allows us to add packages there are
literary loads and loads of packages out there that you can pick and choose so I'm simply gonna go through ones that I
find useful for my projects open atom and click on the atom menu then install
shell commands click on the drop-down and preferences
in preferences in the editor panel make the following changes show in that guide
check shirt Invisibles check and tab type soft now let's go over to our
terminal and type the following code what we are essentially doing here is
downloading packages for Atem to use via the command line tool
you
once these are all downloaded let's quit awesome now let's reopen it to see the packages
that we installed and go through the more a little bit more one by one in the
navigation find packages and click on the drop down you will see here all the
packages we installed use the command line and APM command
we have Auto indent Auto a dent will Auto and Daniel code correctly in your files this is good for code readability
and considered best practice
you
awesome Tanja ass is a package that adds support for es five-year six-year 7 es 8
nodejs and more this means that it will let us use features of all of them in your code
editor for example an arrow function which you will definitely come across is something that is a feature of
JavaScript ES 6 and above we are also going to have something that will spell check our code and check our JavaScript
code in a way that will notify us if something isn't working correctly for this we will use Linda J as standard
you
okay great you are now all set up to start writing JavaScript projects let's
carry on hi and welcome back in this project
we're gonna be using an HTML file and a JavaScript file in order to make our project hTML is a hypertext markup
language used as the basis of a web page HTML consists of tags surrounded in
angular brackets like this the HTML tag can be used to define headings titles
images links buttons there's a whole load of tags available to your disposal
in this lesson we're gonna be focusing on the HTML file and how to link it to
our other files such as our JavaScript file and CSS stylesheet the first thing
we're going to do is make sure to check our files are named accordingly the most
important thing is the ending or file extension we need to make sure that we
use jeaious to let our code editor know that we are going to be writing JavaScript code in this file and to
treat it like a JavaScript file we also need to do this for the stylesheet or CSS file CSS stands for cascading style
sheet we will cover that in the next lesson now we need to link the
javascript file to the HTML file we will do so by putting a script tag in between
the head tag then using a Dom event listener in our JavaScript to make sure this tag is read after all the code in
this HTML file has been that an alternative way to do this is by putting the script tag at the end of the
document in the footer but this is the way we're doing it for the sake of the tutorial it is important to note that in
this script tag the source or SRC as you can see here the text in between the
quotation marks needs to be the relative path of where the JavaScript file is as
the file is in the root of our folder we simply write up J s if your app JS file
happens to be in a folder you will need to change this relative path in the script tag so to recap if the file is in the same
location as your HTML file we write this and if it's in a subfolder to your
index.html file we write this replacing the green folder with whatever you
you have named your folder please do remember to keep your index.html file at the root of your folder if you do not
our browser will not be able to read this project well not without loads of configuration anyway I am actually going
to flip over to our javascript file and add the Dom event listener now too you must make sure all our JavaScript in the
future is written in between these two parentheses we need to make sure this is done so that it's picked up by the
script tag you wrote earlier in our HTML file okay so let's go ahead and add that
event listener to our javascript file like so again the Dom content loaded
event fires when the initial HTML document has been completely loaded and
passed this is without waiting for the stylesheet images and subframes to finish loading the target of our event
is the document referring to the HTML document okay now back to our HTML file
so now we're gonna link our stylesheet in a very similar way but using a link tag instead add the following tag in
between your head tag again make sure
the relative path of the file is correct we do not need to add anything into our
CSS file for this to be picked up now that we have linked or to other files in
our HTML file let's start by adding some code to our body now we first need to
plan exactly what we want our Tetris game to look like in terms of shape as we're gonna be making a grid based game
I would suggest drawing this out fast or using something like Google sheets like me to get an idea of what we have to get
on with and tackle I'm gonna flip over to Google sheets now I have actually pre drawn this to give you an idea of what
to be aiming for you can make your own grid as big or as little as you want it's up to you so you can see here I
want to make my grid 20 squares tall and 10 squares and height so how would we
make these 200 squares we need to make them in our HTML file and then add styling to them with our style sheet or
CSS file so let's do it let's code up to 200 divs in our HTML
file there are other ways of doing this from the JavaScript filed that involve
creating an element 200 times using a for loop but as we are just starting out
I think it's important to focus on a more visual way of learning so we can see what's happening now let's put these
200 divs and a div of its own that we are gonna give a class name of grid to we are doing this so we can't contain
the 200 is in a div of its own that we're gonna start an our CSS later
now we are gonna want to display the score let's do that an h3 tag like this
with a span inside of it like this h1 h2 h3 tags are all header tags h1 being
your main one and going down in size all the way do you hit h8 okay moving on
let's give this span an ID of score so we know exactly which span tag to
display the future score in just in case we used another span tag in our project as opposed to class names IDs are unique
and can only be used once I am also going to hard-code as 0 here for now
finally I'm gonna add a button using the button tag as I want this button to
start the game I'm gonna give it a very clear ID of start button ok let's save
these files we are going to right click just here so we can open this file in
our browser amazing then you won't see
the 200 divs as they have no styling applied yet you can see them if you inspect the page if you do not know how
to inspect the page you can simply do so by pressing down the ctrl button on your keyboard and left clicking the browser
like this check out the sniffs animation I did here it's also where you view the
console.log we will be using the console log later it's a tool that allows it to see what's going on under the hood when
writing JavaScript and is super useful ok great thanks in this lesson let's move on after just a few questions
in this lesson we're going to be covering CSS or cascading style sheets CSS is a simple mechanism that allows
you to add styles so fonts add colors to your web documents becoming a pro at
this takes a lot of practice we are simply going to be doing the basics in order for us to carry on learning
JavaScript as this is a JavaScript tutorial this will include styling to make our
grid look like a grid add colors to our tetriminos and touching a little bit on
flexbox once you have finished this tutorial please do go back and add as much styling as you want feel free to
share it with me I would love to see your finished games okay let's start off by giving some styling to our grid the
first thing we do is navigate to our style.css file now let's pick up the div
with a class name of grid we tell our stylesheet we are looking for a class by
using this dot before the class name so as a recap we are picking out the div
with a class name of grid that has 200 ribs inside of it let's say we want our
squares to be 20 by 20 pixels at a 10 by 20 grid that would mean we need to make
the width of our grid 200 pixels and the height 400 pixels I'm gonna make it
yellow so we can see it in our browser now we are also gonna style the divs in
the grid we do serve like this we put the div element after the element with a
class name of grid by doing this we are saying that we want to solve only the
divs in that element like this so essentially all other divs we use in the
future in our project will be unaffected by this styling okay so inside the
parenthesis we're gonna assign the height and the width let's also make them red just so we can see them in our
browser ok let's save that file and refresh our browser you will see the red
squares show up as a stuck over each other this is the case by default divs
do this they stack of each other unlike h3 which appear in line this is where
flexbox comes in we need to use flexbox to make sure the red squares appear
stacks and a line and then stuck over each other as soon as they don't fit in the grid div with parameter let's add
the slow flux and save and refresh the
browser and now we have it we now have a grid we can work with and start adding
some JavaScript code and game functionality to let's move on just after a few questions
in this video I want to take a break just explain what variables are and how
we use them in JavaScript so in JavaScript you can store values in something called variables they are
legal identifiers quite simply is this so the variable X
here equals one it is important to note that when you declare a variable its
name must be unique you can assign numeric value to a variable like the number one or a string value such as one
in quick marks an array such as one and two in an array a boolean such as true
or false or you can just leave it undefined for later use like this now by
definition variables mean anything that can vary so let's see this in action let's get X and assign it to the value
23 note we do not use var again as we have defined X above let's go ahead and
console.log that and you will see X has now changed value now let's talk about
scope when defining variables it is important to know that they have scope variables have two types of scope global
scope will function scope meaning they can only be accessed inside our function let's have a look at this in action
here is a function I have written to alert me with their name
you
let's put the var name here outside the function
okay that works this is because it's a globally scoped variable now I'm going
to move it here inside the function
this also worked as the variable is declared inside the function however
what happens if I now want to show Villa outside of this function
it will not work as the variable is not being picked up as it's inside this
functioned scope essentially it's out of our reach now okay got it now let's talk
a little bit more about constant depth and how they differ from bar so when es6
came in it introduced two new ways to create variables let and constants let's
look a little bit about the difference between left and var first let allows you to declare variables that are
limited to a scope of a block statement unlike a bar what does this mean well
let's have a look at an example okay so I'm going to declare variable X here as
one now I'm gonna write a function here called find X inside I'm gonna declare variable
X again as two now if I want an alert
telling me what to is inside this function I will get two however what
will I get if I want to move the allow outside of this function
I will get to as variable is global and we declared it after the first declaration now let's do the same but
using let so all I'm doing is writing the same thing but replacing bar with
let
you will now see that we are getting one as the other let inside the find X
function is out of our scope now finally Const Const works in the
same way let does in that you cannot access it if it is inside a function however it is also constant as consolute
allude to once you have defined it you cannot change it later on this is pretty useful when working with big projects
and declaring what you do not want to be changed let's have a look at this in our code editor
you okay so that we have it let Rica bar a
function scoped or globally scoped variable let a block scoped variable and
Const a block scoped variable that cannot be reassigned okay now we have a
grasp on variables let's go back to our game of Tetris
in this lesson we're gonna start adding functionality to our project by adding
some JavaScript code we will especially be focusing on JavaScript arrays and how we will be using them in order to make
our game an array is a special variable which can hold more than one value at
one time if you have a list of items so a list of Tomino names for example
storing the tetriminos a single constants we'll do it like this however what if you want to loop through these
tetriminos and find a specific one and what if you had not 5 but 200 of them
the solution is an array an array can hold many values under a single name and
you can access the value by referring to an index number we will be using the index number a lot in this course
JavaScript arrays are zero indexed meaning that the first element of the array is at index 0 and the last element
is at the index equal to the value of the arrays length property minus 1 this
is important for our game but also for JavaScript array knowledge in general the first thing we are going to do is
tell our JavaScript the width of a grid in squares using Const so let's flip
over to our JavaScript file now as the value will not change we are going to
use a Const so as a reminder the Const keyword denotes a non mutable view of mutable
data next you're going to use something called a query selector to look through
our HTML document and find the element with a class name of grid document query
selector is an inbuilt JavaScript method you will see here we are using dot again
as we are looking for a class name once we find it sign it to the constant we
have decided to call grid now our JavaScript knows that every time we type grid and do something to grid we
want it to affect the element with a class name of grid in our HTML file now
we also want our JavaScript to talk to all the squares in our grid using the
query selector again but this time using document query selector all as we want
to collect all the divs inside the element the class name of grid we do this now
what we're going to do involves an inbuilt JavaScript method called array from you're going to use it to in layman
terms collect all the divs on our grid or 200 of them and turn them into an
array we can work with now each div will have a specific index number let's pass these collector divs
through array from to make them an array and assign it to let squares let's get
our console up here so we can see what our console log tells us now hit refresh
on your browser okay great you will now see that these squares is an array of
200 divs with index numbers from 0 to 199 the reason it says 0 to 1 9 9
instead of 1 to 200 is that the index count always starts at 0 what does this
mean for us in our game well we just need to learn how to count a little differently let's have a look at our
grid and these squares inside numbered by their indexes this is something I made in Google sheets earlier to make it
easier for us understand you will see that if we want to be in the fifth square so this would be the fifth square
here we would need to tell our JavaScript we want to be in the index 4 of our squares array why is this an
array again because we collected all the divs and pass them through array from ok
let's move on the last thing I'm going to do for this section is get a few more things from our HTML document
you we are using a hash here to indicate we
are looking for an ID so if you look on HTML page as a reminder we gave this
span tag an idea of school and this button an ID of start button let's go
ahead and pick them out again with our query selector there is also a get element by ID feel free to use that as
well I'm gonna use this query selector okay great that's it for this lesson let's recap
with just a few questions
in this video we're gonna take a quick break go over exactly what a function is
and why we use them functions are one of the main building blocks of JavaScript and in fact most languages in JavaScript
a function allows you to write a block of code define it with a name and execute it as many times as you like
it's all about recycling code with functions in this video I will be showing you how to write a super basic
function that we will later be adapting to use in our own game of Tetris okay so let's flip over to our code editor so
that I can show you a super basic example of a function first so the simplest example I'm gonna show you is a
function that sets off an alert the person we're gonna do is write function
like this followed by a word I've chosen to call my function this word should
really convey what is happening in my function we do this make our code more readable for colleagues simply if we're
forgetful I'm gonna choose to call my function show a lot I am using camel
case for this camel case is the practice of writing more than one word joined as one but visually separated by making
each word after the first start with a capital letter it has no spaces or punctuation I consider this the best
practice for writing functions okay so after naming our function we write these two buckets these two brackets are
passing down parameters into our function as we don't have any just yet I will leave this lunk now we have to
put our block of code that defines a function in parenthesis I'm gonna make my function shown alert like this you
will see I'm writing the inbuilt method of alert and passing through is string a string is defined as a word in these
clip marks okay great now let's test out what we have written we can invoke a function like this amazing so that's the
basics now let's pass parameter or two into a function so the thing about parameters is that if you choose first
one it needs to be one and this needs to be reflected in the COBE right if you try passed any more than one the rest of
these parameters will be ignored let's have a look at it now so say want to pass down a first name into my
function
you
and somewhere else in my code I have recycle dysfunction and written this
okay let's uncomment that
but as soon as I passed on my last name that part will be ignored
it is the same for if I ask for the last name and the function but I do not pass it through I will get undefined
we can also use argument objects and functions if we declare them outside of
the function we do not need to pass them through to use them for example I'm
going to write an array called name
now using my function I'm going to access the first item in my array so
index is zero like this
okay great we are now ready to carry on with our Tetris walkthrough
in this video we're gonna talk a little bit about arrow functions and how we're going to use them in order to draw our
tetriminos onto our grid in this lesson we're going to be doing more array work and be introducing something called an
arrow function as well as an inbuilt javascript method called for each arrow functions were introduced in es6 and
allow us to write shorter function syntax here is the original way we would write what was and the evolution to what
we now know at the arrow function if you have parameters you can pass them through the brackets like this this is
what we're going to be doing and evolving before each method the for each method calls a provided callback
function once for each element in an array in ascending order the callback is invoked with three
arguments the value of the element the index of the element and the array
object being traversed or in layman terms we're going to get an array with a bunch of values and apply logic to each
one here we can see an example of for each working on an array i have called item array using this code i'm also
going to pick out each item of that array so we can apply logic to it you can see here i've chosen to call it item
i can call it anything i want really javascript will know what i mean it will know it's an item in my array now using
an error function i do this and add two to each item in my array so that's the
syntax i don't see an action the simplest example I can show you of this happening is when we choose to add
something to each item in our array let's make an array of names so an array
with strings as indicated by these two quick marks here and separated by Cobbers and put them in square brackets
now it's super important to remember what is inbuilt and what isn't here names name is our array that we made
above for each is the inbuilt method that comes with some magic that will
make our javascript do things that was writing any logic for it name here is something that we have chosen to call
the items in our array I could call this whatever I want chair dog my JavaScript will know
an item in my names array this error is the error function we referred to in our
last video so what we are saying here is that for each item or name in our names
array we want to print out individually that name and add this string is the
best to it
okay let's check that out okay and that has worked great now this
is a super simple example of how to use for each with an array there are literally so many different
ways to use this input method I always think it's better to learn with a working example so let's get going and
use the for each method and our function to draw a five tetromino shapes on to the grid
let's do this in the next lesson
okay and welcome back this is a continuation from the last lesson where we learn about for each and how we're
going to use it in order to draw the tetriminos on to our grid game the first
thing we're going to do is get out our Google sheets again and rule out every single rotation of each shape note the
Oh Tamina will stay the same during each rotation and the Zed touch arena and l thme know we'll only have two versions
of itself once we are happy with each of the shapes for rotations it's time to
draw them using our width constant remember we set that as ten in our JavaScript file let's get going and
start with our l tetra me know we will set as const as the shape and it's for rotations will not change you will make
the l tetra mina an array with four arrays inside it each of the four arrays
is one of its rotations if you see here what I'm doing is using my drawing to
draw the shape onto the grid as if I was only allowed to use the grid indexes so
drawing in the index with number one on our grid shape and index with the number ten plus one on our grid shape ten being
the width and index number twenty-one and the index number two it will give us
this shape right here okay now let's draw the other three rotations we can do
the ball starting from index 0 no need to draw them in their locations on my drawing let's do that now
you
once we have done that we need to do the other four shapes in the same way now
because I have done this before I'm simply gonna copy this into my project from my github account you are
welcome to go and grab the tetromino arrays as well but I would stress that I do advise against it and only suggest it
if you are stuck and getting some strange shapes or error messages by trying to make all the shapes yourself
you will get a better understanding of what we are doing here and what we are trying to achieve it would also defeat the purpose of the
tutorial if you're trying to understand JavaScript a little bit better I mean this is the perfect arrays exercise okay
once we have our four shapes let's put them in an array of their own
let's put this as a Const and call it the tetriminos
you okay great we now have our tetriminos
but we can't see them that's because we need to add some styling to them to see them first let's decide that we're going
to make them all one color for now just to make it easier we can change this later so let's flip over to our style
sheet and add the following
you okay now let's decide where we want to
start a drug our tetriminos on these squares grid let's say the first square
of our chairs in touch from you knows first rotation array is going to start at the square with index four so let
current position equal four now let's pick a touch amino and its first rotation so let's go to our the
tetriminos array of arrays by putting a zero in square brackets like this we are
saying we want to access the first item on our array let's look at this slowly
okay so first let's console.log the tetriminos our array of arrays you can
see that here we have an array of five things or as in dosed zero to four these
are our five tetromino shapes if you click on the first one so index zero you
will see inside as its own four things in it these are the first set ramune of
shape rotations we wrote earlier let's click on the first one so again index 0 this should look
familiar it is the first rotation in our alpha tamina let's go ahead and now
console.log the tetrominos 0 and again in brackets 0
and amazing it's the same we now assign this variable to current just so we are
all clear I have picked the L tetrominos first rotation this is now my current
shape okay now let's draw this using for each to
see if that's true now to write a function called draw and in that function let's get our current array or
what we have assigned is current above
now for each item in that array we want to add a classic tetromino which would color that item which is technically a
div inside the element with a class name of grid
you so this is how footage works it applies logic to each item of an array we use
the arrow function here as we saw above to add the code inside the parenthesis to each index of the current array just
like we passed a 0 into the array above to access the first item we are passing on a number to the squares array to
correct blue we access the CSS style sheet by using clauses add to other
style of tetriminos to the squares in the tetriminos it is in in this occasion
and we are passing through a four this is because we set the current position as four plus each index and the
currently chosen tetromino array okay so now let's invoke this draw a function
like this now save your file and quickly go back
to a CSS file to get rid of the red background we gave all our divs at the beginning we no longer need this hit
save again and let's refresh our browser
and great there we go you can now see a blue tetromino shape it is the elta
Jimena in its first rotation okay now let's go back to our javascript and
select one of the tetriminos randomly
today's we're gonna be using three more embellishment methods math.random which will give us a random number from our
array length length which is an inbuilt method that will tell us exactly how
long our array is and math.floor which will round down to the nearest integer
so let's add a variable that we're going to call random to randomly select a
tetromino from our tetriminos array we use an inbuilt javascript method called
math.random and multiply it by the length of our tetriminos array length
being in Beart as well we then pass this through another input method called math.floor this will round down the
number to its nearest full integer okay so let's see if that has worked we
should get a new number each time you refresh the page
refresh again and great now we have that
let's go back to our current variable and replace the first zero with vandamm now what's happening here is that
instead of passing through zero and accessing the first item of our H time we are passing through a number from
zero to four randomly this will give back the first second third fourth or fifth tetromino in order to trim e
nosiree once we have one of these five shapes we want to access again but always picking is first rotation let's
set this as let current rotation equals zero
now if he passes through we will always start at the first rotation of any
random tetromino chosen I'm just gonna change this here to more accurately
reflect what is happening now just to be as transparent as possible let's unhook
the draw function here to by getting rid of this code okay now the last thing we want to do is write a function to undraw
the randomly chosen tetromino and its current rotation you do the same as we
did to draw it so once again we name the function on draw we use a for each so
for each item or index in our current shaped array we look at each of their
current positions add the index of the shape and pass it through our squares array now the only difference here is
apart from adding the class we are removing the class tetromino from its current location in the grid so it will
visibly disappear from our grid
okay great we now officially have all our tetriminos and can draw each one on
our grid please do if you're not quite sure pause here and just have a go at
messing around when the numbers replace the current position so on just to see exactly what's happening refresh the
browser lows to see if you'll get in a random tetromino if not go of this lesson again I will provide the code
below as well so don't worry if you feel stuck in the next lesson we're going to be focusing on moving the tetriminos
around our grid hey and welcome back in this lesson
we're gonna learn a little bit about timer IDs and an inbuilt method called set interval set interval allows us to
invoke a function that we pass through it after X amount of time in this example the time is 1000 milliseconds or
in other words one second we are going to be using set interval for this project because we want our
tetromino shape to oughta move down the grid every second just like in the real game as mentioned in the example we do
this by pass it through a function that we will call move down into the set interval as well as the milliseconds we
want to invoke this function out
we are going to assign this two-timer ID this is so we can stop the set interval
in the future you
now let's write the moves on function using the functions of an draw and draw we wrote in our previous lessons so we
want to under the shape from its current position and add a whole width to the current position and draw again in its
new position let's check if that has worked
okay great we can see that the shape is now also moving down our screen sadly
it's not stopping and going through the bottom of our grid this is something that we need to solve we are going to do
this simply by clicking back to our HTML and adding ten more divs to the bottom of our two hundred divs this time with a
class name of taken as these do not have a style in our style sheet they will not
show up visibly we just know that they have that class if I inspect the page you will see them there
you you
next we need to write a freeze function in this function we want to write an if
statement an if statement looks like this we passed through a condition and
brackets before an if whatever the condition between these brackets is has to give us a boolean response so a true
or a false if the condition is true we carry out
the next steps of whatever is in between these two parentheses so here we have an
example if the temperature is about 20 degrees so this statement is true you
return it is hot now we can also write an if-else statement an if-else statement is the same as an
if statement however if the condition is our false we can also return a response
so in this example here if the temperature is not over 20 degrees we
return it is cold now we can also keep adding and adding with this else if and
go on forever just like in this example here so here if the temperature is not
above 20 degrees so false we bypass this if statement and check the else F if the
temperature is deeply equal to indicated by these three equal signs that is deeply equal deeply equal to 18 then we
return it is warm and of course if it is not then this statement is also false and we return a it is called so let's go
back to what we want to happen in our if statement if some some another inbuilt
JavaScript method similar to how for each works however instead of applying logic to each item in our array like for
each with some we are checking that the logic we write in the brackets is true for some of the items in our array so
basically if we ever get one true back we are good to go so if some of the squares that make up
the current tetromino if their index plus a whole width so essentially we are
checking the next space down from each square contains a square with a class
name of taken so if this statement is true where at least one item in our current
item you know array we turn each of the tetromino squares into a square that contains the class of taken
you you
got it we then also in we do select a new tetriminos of your current tetromino
this will be familiar let's get a random tetromino number
you you
we then passes through a detector aminos array and it's fast rotation we then set
this as our current tetromino then we put it at the current position so for
and finally we draw this new randomly selected a shamino okay that is it that
is our freeze function let's add this freeze function into our move down function so that it gets invoked to
check every second oops I missed the capital M of math here that is really
important please don't forget to add this here okay great now let's flip over to our browser and see if that has
worked
you amazing let's move on to the next lesson
you you
okay so we now have an array of squares great and we have wrap these squares over each other to appear like a grid
amazing however in reality how does our computer know when we are at the very
left hand side of our grid what stops a touch from you know from going from this position to this position when we were
being right technically we are in an array so this would be the next logical step we need to write a set of rules to
let our JavaScript know when any of our squares that make up our tetromino are in a certain indexed square we are going
to do this using good old-fashioned maths as we can see here our grid has a
width of 10 made up of an array of squares with indexes 0 to 199 I want to
make sure that if the tetromino is in the square with index 10 I don't want it to move left anymore I want to stop it
as otherwise it will appear in the square with index number 11 so I need to
write a rule that will stop our squares if they are in the square with index 10 20 30 and so on let's get started by
defining what is a move left function what we're going to be doing is visually moving the tetrameter left by drawing it
and undrawn it in the squares we start off by removing any trace of the shape in its current location before we start
so that we have a clean slate next we define what is the left edge and if the
shape is in it this is where our math comes in for this we use the inbuilt method called sum again as a recap sum
is a method that looks at each item in the array and checks if a statement is true for at least one of the items if it is
the whole statement is therefore true so once again let's use current as a
reminder current is our current randomly selected tetromino and it's current rotation we are checking that some are
the current tetriminos item indexes if divided by the width leave exactly no
remainder so again if one of the tetromino squares is in a square
say that has an init Saturn we also know that ten divided by the width so 10 it gives us exactly 0 as a remainder this
means our statement is true and the shape is at the left hand side of our grid this is also true for index 20 30
40 and so on let's use this information and only allow our shape to move left or
minus one from its current position in the array if the shape is not at the left edge indicated by this exclamation
or ban here we also want our tetra muna to stop if there is another tetromino
already there that has been frozen for this we are gonna have to have a taken
class we are not gonna star this class we just want to assign it to the spaces that have been taken and you can't go
into we will use an if statement for this what we want to write is if some of
the squares in on such communicate suddenly go into space like contains a class path taken while traveling left
you want to push it back one space so it appears not to have moved
we want to do this for every index in our tetromino shape so use an hour
function to do that like this and past you the card position and add every index as it gets passed through
then we add one to the current position so that moves back to its original space
in the Euro and finally we draw the tetromino
okay so that was a lot to take in so before we start writing the move right to move down and move up function let's
why this all up to see if it works fast before we move on
Keiko's are pretty cool every single key on your keyboard has an assigned code to
it that we can access through our JavaScript we are gonna use this to make our tetromino move left
if you press key code 37 right if you press key code 39 and make some
JavaScript magic happen if you press the button down and so on you can technically make your such a muna move
left if you press just about any key on your keyboard that you choose there is actually a pretty cool site called
info that will give you the key code as soon as you press it when you're on the site we will also be looking at passing
through events into functions so that we can use them so let's get started by assigning key codes to functions let's
write a function called control and add a document event listener to listen for
anytime we press a key on our keyboard anytime you press a key on our keyboard we are going to listen out for which one
was clicked and invert the control function we are also going to pass through an e here for event now with if
statements we're going to decide what happens when you press a key if we press the key that deeply equals key code 37
we want our tetromino to invoke this function new left let's see if this
works as we wrote the function in the previous lesson now I'll give you the coolest part about JavaScript is making
stuff happen in your browser well you'll be glad to know this is exactly what the event listener does the event target
method add event listener sets up a function that we called whenever the specified event is delivered to the
target common targets are elements document and window in laymen terms if
you attach an event listener to something like a div and click it in your browser cool stuff will happen you
just have to attach it to the element you have chosen like this you can see here that we are passing through two
things the type of event so in this case key up and a function in this case is
the function control we are just written you can also do remove event listener to deactivate any listening happening there
are literally so many events you can use here are just a few of the my head so once again the eventlistener
here listens out any time you press a key on our keyboard using the key up event if a key is pressed we invoke the
control function we have just written we attach this event listener to our whole
HTML document okay let's refresh our browser
and great it works the tetromino is even stopping when we hit the left-hand side
which is great now let's figure out what we're going to do for the rest of the key codes I have commented out the other
functions for now as we have not written them yet but just so you know what we need to do so if I press up
I want the shape to rotate if I press key code 39 and want the shape to go
right and if I press down I want the shape to go down put pasta
this is something you already have so we can pass it through here again
you let's do the move right function based
on the same logic as the move left and leave the rotate function for the next lesson
you you
you so once again we under the squares that
make up our tetromino from their current indexes we define what it means when
some of the squares that make up our current at romina are in certain indexes and call this a constant of is that
right edge what you can see is happening here is that if an index is divisible by
the web and its remainder deeply equals the width minus one so in this case 9 or
18 or 27 and so on this statement is true and we are at the right edge so if
we are not at the right edge indicated by the bank here we can freely move each
square and the tetromino plus one down the array
then if some of the squares that make up our tetromino are suddenly in a square
that contains a clause taken we have to push them back a space in our array
visually making them appear like they have moved at all
you
and finally we redraw the tetromino in
its new position
let's try this out okay great we can now
move left to right without going up the grid and to the bottom without our tetrominos going past the squares with
the closet taken let's move on to our next lesson
in this lesson we're going to be doing more array work and also looking a little bit into the increment operator
the increment operator it's going to help us access the next item in our tetriminos array we are going to be
doing this as we need to access all four of each of our tetromino rotations on the click of a key code we're going to
be doing this using the double plus so plus plus which works in a way that
simply means we are adding plus one to the defined value before it it is called an increment operator in this example
you can see how it works if Y is five and we use the increment operator on it
the Y will now have a value of six and you guessed it there's also a decrement
operator using the double - will make the value of our Y change from five to
four now let's use this in our code we're going to write a function to
rotate the tetromino this is actually us just skipping to the next rotation in
the current rotation array as always let's start by on drawing the shape
next we use the increment operator to move down to the next item in our array
so the layout of our next rotation we drew up for the concert Romina
you
using an if statement we say that if the current rotation index is equal to the
amount of rotations in our current tetromino shape so for we want to go
back to the first item in our array so in other words the first rotation they are again
you
if the statement is false we simply want to pass through that new current rotation number into our counter Tomino
like this
you
and then we draw it
okay now let's not forget to uncomment this out here we need to do this so that
when we press the up key the shape will rotate now let's refresh our page and
see how that works
you okay great we are now ready to move on
in this lesson we're going to be covering everything we have learnt before to essentially build a mini-grid
to the right of our grid right now we will be doing this so that we can display the upcoming shapes for our user
this is a great lesson as it can also be considered a mini recap of all the work
we have done so far we will be going over how to create a grid pick out
elements to style in our style sheet pick out elements add functionality to and how to work with arrays in order to
pick our next shape okay so let's get started the first I'm going to do is go over to
our HTML and do the following we are going to add a four by four grid word game so how do we do this
the same way as we did it before we add 16 of divs here and put them in a div
you will choose to call our mini grids
you
now let's flip over to our stylesheet and similarly to the other grid make our mini grid 80 by 80 pixels I'm gonna use
flexbox again and then wrap them over themselves like this
you
you
okay great and there we have our mini grid now I want it to display to the right of my main grid however to do this
I'm simply gonna put two grids and the two grids only into a div of its own
that I'm going to choose the core container
you
now back in our stylesheet I'm going to use flexbox again to make these two items display:inline
you I am also going to do one thing to make
a look a little better and that is at a margin left of 50 pixels
okay great now we can see that there are two separate grids next to one another
now let's move on to our JavaScript code
so the first thing I want to do is pick up each tip and our mini-grid and call it display squares instead of squares
once again we do this using query selector all as we want all the divs inside the div with a class name
mini-grid
you
note we are not using away from this time just to show you a slightly different approach the next thing we
need to do is tell our JavaScript how big the width of our mini grid is let's
use display width instead of width for naming this constant we are also gonna
need to set our index at zero let's call this our display index so our JavaScript
knows we want to talk to the mini grid only now we need another array we need
an array of our five tetriminos as they're fast rotations for our mini grid
to show we do not need all the rotations as we just need to display our tetromino here
as you can see I am simply rewriting the Alta Trevino's fast rotation here
same for the Zed T touch me know and so on
okay now let's get to writing a function that will display our shape
using the display squares I have collected so all the DES in our mini
grid I am using for each to get each item or as I'm gonna call it square and
remove any trace of a tetromino class from it so that's for the whole mini grid I'm removing across - shereena from
the whole mini grid
you
next I'm going into the next latet Romina's array and using next random so
let's define next random as a value I'm going to start with the value of zero so
next round and be zero let's actually move this up to the very top of our file
we are doing this as we also need to use it in the freeze function
you
so right before we choose a random tetromino for our main grid we are adding one more step what is happening
here the value next random is being passed on to the random value so we
choose a next randomly selected tetromino assign this value to notes random this means we now have a value
okay let's get back to writing or display shape function
you
for each square that makes up are now randomly selected up next satrom you know we want to add a class of tetromino
to it we then when a pass it through our display squares hopefully this approach
is now familiar to you
you let's see if that has now worked save
your file flip over to the browser hit refresh
you and great that has now worked now what
would be really great is if we can get this shape to display as soon as our game starts for this we're gonna start
to hook up the start and pause button this was quite a tough section and so I
would recommend going slowly on this section and to anicon so log each step as you code just to make sure you
understand what is happening under the hood he'll freeze over this section once more if you need to
this lesson is going to be all about setting intervals and clearing intervals
this is an extension of what we touched on previously when we taught our JavaScript that we want the move done
function to invoke every thousand milliseconds we are now essentially going to move that function into an
event listener that has attached to our button that we have an idea of start button for this means that every time we
press the start button we are going to invoke the function move down with its set interval we are also going to go a
step further to see how timer ids work by adding a pause functionality the
first thing we're going to do is grab our button we give an ID or Start button to that we called start button above and
attach it to an event listener
you ah it's saying not to find let's see why
not okay use the capital here I'm gonna change this I'm also going to change
this for the school display okay let's carry on as you can see everything's really case sensitive and
spelling is really important when coding I'm also gonna let our timer ID be null
by leaving it blank like this okay so if the button is clicked and we have a
Tommy devalue so the value is not null we want to pause the game we do this by
passing time ID through clear interval like this and setting the value of our timer ID to null else when the start
button is pressed we draw the tetromino in what is the default current position
so for put the timer ID on a set interval of invoking the move down
function every 1000 milliseconds select the next random share if you wanna display in our mini grid and evoke the
display shape function we wrote that will display the randomly selects term you know we just determined
you you
okay great we now need to uninvite them you don't function that was on a timer that we wrote previously from our code
so get rid of it unless it's in the start button eventlistener
you
so what is happening here is that because we have this line of code the set interval that starts at such um you
know moving down and vocht on the load of the browser we want it to be invoked only if we press the start button
so let's comment this out here and let's refresh our browser and
perfect let's carry on
in this video we're gonna take a break to look into what exactly splice is and
does using a splice on an array controller changes content we can remove
items from the array or remove them and replace them with totally new ones it is
important to note that it will change the original array once this particular JavaScript method is used in other words
we are mutating the array so to recap splice can remove an item or items from
any position in an array splice can also remove an item or items from any
position in an array and replace them with new ones let's have a look at how this works by flipping over to our coach
ok let's get an array we can work with I'm going to call it planets so we now
have an array of four planets now what if I want to remove Pluto from my array as I'm not sure of its plant in our
winni days I would use a splice to do this typing my planets array I would
attach splice to it like this next I will pass through the index of the item
in my array I want to remove as I only want to remove that one item I'm gonna pass in a 1 so 2 1 ok great let's
console.log planet slice 2 1 in brackets you will see that we should get Pluto
if you consul Rodde planets you will see that our original planet array now only
contains 3 planets without Pluto ok now
what if I have changed my mind I want to Riyadh Pluto but also add Uranus we can
use splice to do this let's say I want to put in the first index on my Ray but
not remove anything just put Pluto back as well as add Uranus I would do so like
this we pass through a 1 for the first index and a 0 as we don't want to remove
anything and then the two strains we want to add at index 1 let's have a look
at what this gives us and perfect as you can probably tell by now the first two
parameters are the start index and the delete count respect leaving the dilly count zero will not
remove anything from the array you might also notice that we get a return of removed items or item every time we use
splice I have just one more example to show you before we move on to implementing this in our Tetris project
so say I want to remove every single item from my array of Tomas
that's right and I believe that Mars is the only planet we can do this by simply passing through the index number into
slice passing this through returns all of our planets and if we console.log
planets we will now see it only consists of Mars okay great now that we have
covered splice let's move on into implementing it into Tetris
in this section we're gonna be focusing on what happens when the user managed to fill a whole row with tetromino squares
we need to do a few things here we need to remove the read from our grid or array add an increased score to our
score tally display the score on our browser and add a new fresh row to our
grid array so the grid doesn't appear to shrink in size for this we're gonna be focusing on splice concat and
appendchild as we now know the splice method adds and removes items to and
from arrays and returns removed items let's move on to concat concat allows us
to merge two arrays together let's use the same tetriminos array now let's say
we want to add another array to it we do so using concat here is my second array
and i'm gonna call it shapes by using this syntax and passing through the shapes Rea like this we get the two
arrays join together and finally append
child append child is a nimble javascript method that allows us to append elements to an existing element
for example our grid let's have a look at how this works in an example first
let's recreate a grid so make a div with a class of grids now we're going to be
appending divs into this div with a class of grid so let's add some styling so we can actually see them
now let's get the div with a class of grid using our query selector and call
it grid to the fraud JavaScript now using Create element so that's another
inbuilt method let's create a div and our JavaScript now let's put this
created div into our grid using a pen child like this and tada we have now put
a little red square into our div for the class of grid now let's use these three
input methods in our project let's get the lesson started by creating our add
score function where we want all the steps outline to happen the first thing we're gonna do is write a for loop this
loop will loop over entire grid omlette squares every ten squares so with my
whip the for loop syntax in JavaScript looks a little bit like this in this
example what we are doing here is three things setting a variable before the loop starts so far equals zero defining
the condition for the loop to run so I must be less than five and incrementing
the value by one using the increment operator we move on to the next item in
our array to loop over so what would this look like let's have a look with an
example an array that I have called shapes now if we use the for loop to
loop over the length of the array and loop over each item one by one what will
we get every console.log shapes you'll get a list of the shapes printed out in
our console.log okay now let's use this in a project
we nexif i and what we want our road to be this will be the i+ every square that
makes up a row now we use an inbuilt
method called every to check if every square and are defined row contains a
div with a class of taken if it does and the statement is true we do a few things
we add 10 to the score we display the to our user using the score display and an
inbuilt method called inner HTML and for each item the row we remove the class of
taken
and we take out this row using splice like this I have a sinus taken out row
to a Const called squares removed let's console.log this to see what is happening
okay great you can see here what our role is and what is made up of now let's riad these
squares to our squares array so that the grid doesn't appear smaller so what
we're going to do is we're going to append these new squares to our grid
let's go back to our browser hit refresh and great you will see here that our row
has cut itself out and appended itself to the beginning of our array
okay let's remove the cluster Tomino so the blue so that it looks like it should
amazing we are now down to the final stage of our game which is defining what a game over is
we are now nearly at the end of our tetris course by now you would have covered all the following inbuilt
JavaScript methods and use them in our project this is pretty impressive you only have one more thing left to do and
that is define what is our game over now as you know tetris finishes when you
stack up or your tetriminos so that they don't fit in the grid anymore this makes our writing of the game over
definition super simple all we have to do is tell our JavaScript that if there is a taken shape present in the original
default position or index for we call it a game over okay let's write our game
over function you're going to write a game of a function in it we are gonna
have an if statement that says if some of our current tetromino shape that is
in play if some of its items or index is at the current tetriminos composition
contain the class of taken we call our game over
we then display this in our score display we then also clear the game's
timer IDs so that the auto move down function stops
you
and there we have it a fully functioning game of tetris now I would love you to
take this game make your own share with me on YouTube my channel is Anna Kubo or on Twitter and your underscore Kubo I
would love to see what you're made and how you've taken this and made you around and taking it to the next level the options for you to do this are
adding levels adding a line count may be having some music to the game or just
styling your game to the max I do have one final lesson for you that I think might be quite interesting that is to do
with styling of the tetromino colors if you want to learn how to do this and also wanna learn how to tidy up your
code for best practice please do watch my final video for this series
hi and welcome to the last video in my JavaScript games tutorial if you want to
learn how to assign colors each satrom you know and also wanna learn how to tidy up your code for best practice
definitely watch this last video in the series once again I hope you have
enjoyed this series and if you do have any questions please do not hesitate to contact me on my socials below ok so the
last thing we want to do is assign colors to each of our tetriminos you will do this in our JavaScript file
first we want to make a Const called colors in it I'm gonna put the colors I
want my touch Caminos to be in in the same order as they appear in my tetriminos array this means my El techo
mean I wanna be Orange my Zed touch me know will not be red and so on
you now that we have that we need to find
each time we add and remove the class list of tetromino in our code so we can
add this color on top of it so after that line of code has been written the
first instance I can see this in is in the draw function let's use style and
background color to add styling in our JavaScript file we also pass through whatever value is currently random into
our colors array this means that if the random tetromino is currently the l
tetromino the color we will get back will be orange each time as we are
passing through a zero to remove the color as we need to do for undraw we
just leave an empty string like this
you we also need to do this for the
mini-grid where it displays the next shape let's do the same passing through next random instead of random
you
finally the only place remove the color is here in the ad score function
you
let's see if that has worked and right
you now just a quick cleanup you can see
here getting rid of any additional lines commented out codes and changing this as
it should be a consulate
and there we have it thank you so much
No comments:
Post a Comment