JavaScript Tetris
Vložit
- čas přidán 8. 06. 2019
- Play the Game & Get the Code : bit.ly/tetrisdesign
Best Book : amzn.to/2MLRENY
Subscribe to Me : bit.ly/2FWQZTx
If you want to be a game creator in this video I’ll show you how to make the video game Tetris from scratch. The Tetris game design has been copied since 1984. So if you want to get into building games Tetris is a great place to start.
I think building games is a great way to learn JavaScript. This is the 11th part of my JavaScript tutorial and I’ll make Tetris using plain JavaScript. No frameworks are used.
Game design principles used include working with grids, collision detection, lookup tables, drawing and deleting precisely, reacting to user input and much more.
Building games using pure JavaScript will make it easy for you to code games later using frameworks. When you learn JavaScript at this level you’ll be able to make video games and so much more.
MY UDEMY COURSES ARE 87.5% OFF TIL September 3rd ($9.99)
➡️ Python Data Science Series for $9.99 : Highest Rated & Largest Python Udemy Course + 56 Hrs + 200 Videos + Data Science bit.ly/Master_Python_38
➡️ New C++ Programming Bootcamp Series for $9.99 : Over 23 Hrs + 53 Videos + Quizzes + Graded Assignments + New Videos Every Month bit.ly/C_Course_38
WHAT’S MY CHANNEL ABOUT
The most popular topics on my channel include my learn in one videos on Java, JavaScript, C++, Python, Kotlin, PHP, C#, MySQL, JQuery, Haskell, Assembly, Scala, BootStrap, Visual Basic, Arduino, Lua, Perl and more.
All of my videos are heavily edited to remove Dead Air. That means you can learn everything covered in an unedited 2 hour video in just 1 hour!
MOST POPULAR VIDEOS
Java : • Java Tutorial
JavaScript : • JavaScript Tutorial
C++ : • C++ Programming
Python : • Python Programming
Kotlin : • Kotlin Tutorial
PHP : • PHP Programming
C# : • C# Tutorial
MySQL : • MySQL Tutorial
JQuery : • JQuery Tutorial
Haskell : • Haskell Tutorial
Assembly : • Assembly Language Tuto...
Scala : • Scala Tutorial
BootStrap : • Bootstrap Tutorial
Visual Basic : • Visual Basic Tutorial ...
Arduino : • Arduino Programming
Lua : • Lua Tutorial
Perl : • Perl 6 Tutorial
Like the channel? Consider becoming a Patreon! Check it out here:
►► / derekbanas
THANK YOU TO MY PATREON SUPPORTERS LIKE :
ckcoder.com
vsolutions.be
Here are more videos in which I make Real Apps in other languages
31 Part Video on Making Video Games : czcams.com/video/Yk-S8GKNKxM/video.html
Android Translation App : czcams.com/video/I58TkCi73ew/video.html
Make JS Pong : czcams.com/video/rex2_9YBKAE/video.html
C# Paint App : czcams.com/video/cHncA_aCVmM/video.html
C++ Paint App : czcams.com/video/uzgU2XzhnHY/video.html
C++ NotePad : czcams.com/video/I96uPDifZ1w/video.html
C++ Calculator : czcams.com/video/txGRU7OrTZo/video.html
C Arduino Projects : czcams.com/video/I6jIORI7K2k/video.html
Python Paint App : czcams.com/video/cE5kh02CkTY/video.html
Python Text Editor : czcams.com/video/6-1XRnEl9pE/video.html
Python Calculator : czcams.com/video/WRRigB8nMU0/video.html
Python / Kivy Calculator : czcams.com/video/6yMHHC36tT0/video.html
Thanks a lot! I always learn so much from this channel.
Btw, love the shirt.
Thank you :) That's funny that you recognized what it was.
Timestamp:
0:00 Intro
0:38 Tetris design
4:34 Pre-requirements
5:42 Creating variables
7:42 Coordinates Array
8:28 Creating the first tetromino
9:00 How will we store shapes?
9:48 Coding first things
11:10 createCoordArray()
13:53 setupCanvas()
16:52 drawTetromino()
17:32 How to Translate Shape into Game Board Draw
18:55 drawTetromino()
24:12 handleKeyPress()
17:32 How to Translate Shape into Game Board Delete
28:13 deleteTetromino()
30:27 createTetrominos()
30:46 How will we store shapes?
30:59 createTetrominos()
31:39 createTetromino()
31:56 Testing the game
33:18 hittingTheWall()
35:59 New variables and design adjustment
42:39 drawTetrisLogo()
43:18 Check for Vertical / Horizontal Collision
44:25 moveTetrominoDown()
46:52 checkForVerticalCollision()
54:40 checkForHorizontalCollision()
57:18 Check for Completed Rows & Shift down
57:53 checkForCompletedRows()
1:02:55 moveAllRowsDown()
1:06:29 How to Rotate Tetrominos
1:07:41 rotateTetromino()
1:10:59 getLastSquareX()
1:12:52 Move tetromino down automatically
1:13:25 Testing the game
I never fully understood how complicated tetris really is until now. Great tutorial!!
Thanks for dropping an amazing content as always! Glad to see you're still active from time to time!
Thank you for checking out my videos :) Yes I've decided to only make big epic videos from now on. They take a lot longer to make though, but I think they are worth it.
Used to pay to play this game back in the days, never thought I would be into how all this games are made....it's insane..... you did it again The Incredible D. Banas... thank you!
Me too. I recently got out my 1st black and white GameBoy and have been loving it! I think I like making games more then playing them now.
Keep up the good work, I am loving these series. They are the best on youtube so far.
Thank you very much 😁 More are coming
Such a magnificent work of code. I asked for it and you delivered it. Derek - you are so amazing. Please keep making more JS games. :)
Thank you for the nice compliment :) Many more are coming
a javascript game development tutorial like Tetris in 1 hour 14 minutes is a rare tutorial that cannot be found anywhere else but this channel. Thanks Derek
Thank you very much :) I do my best to make new types of videos that are fun and educational
Derek the video was awesome, I loved your explanation on everything, keep it up.
Really cool video - watched til the end (with breaks lol). Was wondering how long it took to put together so much work - 2 weeks!
Really impressive, definitely helping me figure out some of my own JS knowledge gaps.
Thank you very much :) I actually wrote in a comment right after making it that the whole video took 4 hours from start to finish.
Went to play game first and noticed a small "bug" and skimmed to video where it might be fixed. At 1:02:00 when you increment score it should check if rowsToDelete == 1 do 10 pts elseif == 2 do 20 pts and maybe do 80 pts if == 4 (which is a "Tetris"). Just a small tweak and was fun to find. Great video!
Thank you for pointing that out 😁 My goal was to cover about 90% of the game. It definitely isn't perfect because I wrote the whole game in 4 hours
You are the best CZcams channel in programming evironment. You're videos are very helpful. :D
Thank you for the nice compliment :)
Learning so much here , thank you .This technology information means a whole lot to me ! There is great value in your vids!📈📚🔬📕👍😃📐🔭
Thank you very much :) Happy to help
You're the best Derek. I'll get around to following this, but I'm focused on learning Unity's C# to remake the old Super Mario Bros. game. But good stuff.
Thank you :) That sounds like a fun project. I plan on making Mario with pure JS soon
The best thing about this is we can implement this in different languages on game engines or even on command line and terminal.
Yes that was the goal. By making it low level it translates easy into any language
This video helped me get into Javascript thank you!
Thank you very much :) I'm happy you enjoyed it
Thank you for this - it was interesting going through and coding along with you, adapting the code to my own style (changing variable names and using const, 'for of' loops, 'switch' in the key press handler, etc.). The use of a pre-computed coordinate array to convert 'board coordinates' to 'canvas coordinates' felt a little odd, but it definitely simplified the tetromino drawing. I converted all my arrays to be array[y][x] instead of array[x][y], as well -- interesting one-line definition!
I'm happy you enjoyed it :) I largely live coded this which often creates interesting results.
Great video to help me relax. TQVM!!
nice and clean code , thank you , but I'm looking for a responsive layout using css grid instead of js canvas
Thank u very much... I'm really learning and enjoying those videos 👍👍
Thats great! I'm doing my best to make learning rather complex topics fun
Those 3% people are grateful that they'd encountered such a great teacher like you. Thank you very much.
Thank you for the nice compliment :)
thank you , I enjoyed the video !!
Perfect timing 💜
I'm happy I could help :)
@@derekbanas Same here. I was about to cerate a Javascript game today, but was wondering if I should use a framework like Phaser, or do it without any framework to begin with.
I guess you made that choice for me. :D
Everything is always more fun without a framework :)
Hi Derek, thanks for these videos. You've made so many good teaching videos, would you mind making a video about your video-making process? How you decide, how you record, how you edit, etc.
Thank you very much :) I made one many years ago, but sure I'll make an updated video. I think people will be surprised by how much time I spend editing videos. This video was originally 2.5 hours long and I edited it down to just over an hour. I'll try to get it up this month
@@derekbanas Haha the only reason I ask is because I'm also making some videos and I had no idea how much effort goes into the whole process. Really looking forward to your video!
great eposide Derek
Thank you very much :) I worked very hard on it
Hey and thank you, ive gone through the whole video. Thanks for sharing. helped me a lot create my own tetris kinda game :) do you have more java/javascript games?
Thank you very much :) Yes I have a bunch
Guitar Hero Type of Game : czcams.com/video/xI7BI30rpRw/video.html
Asteroids : czcams.com/video/HWuU5ly0taA/video.html
Pong : czcams.com/video/rex2_9YBKAE/video.html
@@derekbanas thanks for sharing. This kind of way to code tetris was really cool. How long b did it take you to get to that level? :O
Awesome tutorial as always;,
Watching your learn to programming by problem solving series and that's awesome series, part 10&11 (object oriented programming)(inheritance) is a bit fast paced but the rest of series is awesome;
Looking forward toward sone numpy or pandas tutorials,
Thank you very much :) I'll see what I can do about your requests
thank you sir. this is good for my test lol
Thank you !
Very informative. Thanks! 😎
I'm glad you liked it :)
Derek you are the most awesome human being to ever live I want to be you when I grow up.
Thank you for the nice compliment :) Anyone can do what I do
Hi Derek,
10 months into diploma of software dev and needed a break from c# and react. This video was soooo much fun. The way tackle it reminded me of why I got into coding. Any thoughts around how you would start a 3D tetris??? I think about it now whenever I am not studying. The man who invented this game is an interesting character as well.
Thanks again, all the way from Sydney Australia!
That's awesome! Hi Australia :) A 3D version just involves math. I show how to project any point onto any other in this linear algebra tutorial czcams.com/video/IRyMQesw_QY/video.html It is a little complex. You can get close by just manipulating x and y a certain percentage and then draw in your slanted square and if you overlap them the right way they will look like 3D cubes. I hope that helps.
Nice video :)
Can you make a video about using Anki for programming or tech stuff?
Thank you :) I'll see what I can do
Nice tutorial, thankfully
Obs. 9:25 - this is a wrong coordinates on sixth piece
1100
0110
0000
The array on right is the same of left bottom piece
[0,0] [0,1]
[1,1] [2,1]
The correct should be:
[0,0] [1,0]
[1,1] [2,1]
Supeeeeer! I have no words...Thanks a lot!!!!😁
Thank you 😁 I'm happy you like it
Awesome tutorial! Would be better if we could see game build progress while you were writing portions of the code.
Thank you very much Derek :) Just a question, do you have any recommendations for getting good with functional programming? Not necessarily in Haskell though, any videos, lectures? Also, what do you think of Lambda Calculus these days?
Thanks for stopping by Exodus :) Yes Lambda Calculus is definitely worth understanding for computer science. The best functional programming book I have found is Functional Programming Simplified amzn.to/2I4gapi It covers the thinking involved and how to write understandable code at the same time.
Thanks for posting this! Can you show us how to program other Arcade favorites.
Sure many more are coming
Great Tutorial. Would you consider doing a game illustrating elastic collisions like say, Curling?
Thank you 😁 I'll see what I can do
Thank you sir!
I'm happy I could help :)
Hey Derek
I have a question in regards to your code
I noticed you did a lot of
If(!CheckForVerticalCollision), but these functions don’t return a Boolean value. Can you explain how this works?
Waouh 😮😮 u are Best
Thank u very much
Happy to help :)
Thank you so much
It is my pleasure to be of service :)
Hey Derek, I've been following up to 33:10 (function CreateTetromino) and I'm skimming back through my code to see if I missed anything, but my html link seems not to be populating with tetrominos and I can't figure out why?
I wish the video had timestamps
0:00 the video starts
10:00 10 minutes passed
20:00 20 minutes passed
1:14:36 video ends
would give lil lines on the videos with the descriptions at those points
Hey Derek, Is there anyway to add a quick drop function where when you click w the block will go all the way down? when i tried making one it went all the way down bull every single one afterwards also went all the way down.
Hi, I dont know why mine has a bug where the tetromino does not stop, it falls off the screen for some reason, where might I fix it?
The keyCode has been updated, would you update the function to take care of key press? Thanks!
Any plans on teaching flutter? Very interested in it and love how you teach.
Yes I'm working on it
Do you have a link to those designs?
Omg, I just visted a demo day at this $$$ bootcamp and this was one of their final projects... Derek Banas is a BOSS! You're doing 12k bootcamp work on a budget! The only difference is that they they used a video api that allowed you to view your opponent in the background while playing him. 4-6m bootcamp in an hour smh
That's great :) I'm doing my best to save everyone a lot of money
Could you please teach Kotlin for android development or other projects, you're awesome.
Thank you :) A new mobile app tutorial is coming very soon
Hi Derek,
I didn't watch whole video yet so i haven't figured out where exactly is the problem but when you go to the left side of playing area and spam left and rotate you can make additional boxes appear on screen(its only graphical, when you pass with another object over them they disappear). Similar thing happens on the right side but object disappears and i think game goes in infinite loop because no new object appears on the top after 5 + minutes.
Image:
imgur.com/a/NIe2bPI
Thanks for the tutorials and keep up the good work.
The game can be broken if you try. I made it in 4 hours and the goal was to cover 90% of the logic. The way to fix nearly every error is to put all button presses into an array and then verify them one by one. Then you can use another catch clause to reset to the previous valid position. I hope that helps.
@@derekbanas It is actualy a good thing to leave room for improvements for "students"
Great tutorial! Would you consider making a Wizardry clone from scratch in C#?
Thank you :) I'll see what I can do. I plan on making many more games like this
Why is the gameBoardArray 20x12 but the coordinateArray is 12x20? it is initialized as 20x12 but then when calling CreateCoordArray it fills it in 12x20
Thanks for very good tutorial!
My question: Without a function or addtional statement in HittingTheWall() to return a true of hitting the bottom, the first Tetromino would go through the base wall (not side wall) until it disappeared and red notes reprot. Am I right?
I have this exact issue and I'm not sure what the fix could be! the tetromino just falls through the base, i thought it was an issue in my values for my canvas or something but i have no clue.
I find that layout trick useful for Java games but not sure how to calculate that. Will you make a video detailing how you do that?
Which part of the video are you referring to?
@@derekbanas When you lay out the game before programming. I get what your doing but keeping things nice, pixel perfect and precise is what I am not grasping
Please do Verilog in one video! It is useful for programmers working in the industry.
I'll look into it
great video
Thank you very much :)
I think I might port this over to Java if I get time
Sounds like fun :) It shouldn't be to hard to change it into most any language because it is so low level.
how do I open this game once my code has been done?
всё очень круто!
So...has anyone else had issues with the arrays filling in y,x instead of x,y?
Hey derek would you mind if i create written tutorials/articles based off your videos ?
Yes you can do that. I don't care what people do with the code I provide on my website, or anything.
hi boss for web or app mobs online u need api
what about games? same api? php laravel or nodejs ? to make online multi games?
When I get into multiplayer games I'll use node but PHP will work equally well. You'll be passing small bits of data back and forth so it requires very simple scripts
does anybody know what the dots inside of the square brackets mean?
array = [...Array()] those ones
Its called the spread operator. it takes an array and return all the elements. its inside an square bracket hence here it is used to copy the array.
Its possible to make a way to see the next piece ? if is, how can i do that ?
did you make it?
cause i want to make it too
banger
Who wants to see Derek brain power go to 11 by modifying his tetris so it has 3d blocks :D
GERT!!! Nice to see my old board game buddy :) I can definitely do that since this series seems to be taking off
What's next Dude
More JavaScript games since so many people seem to like them. Then more JavaScript stuff and a new mobile app series
@@derekbanas Sounds amazing man, thank you!
Thank you for checking out my videos :)
Shoutout to the 3% of us
The 3% are the only reason my channel exists 😁
Fillstyle are null
Can you plz make Java game. Idk JavaScript
I made one here that covers a ton of topics I haven't covered in this JS series yet czcams.com/video/4wWLEeQSXLQ/video.html
I have tried this code up to line 148, and so far it does nothing. When I pasted the code into developer tools, I get the error: Uncaught SyntaxError: Identifier 'canvas' has already been declared at :1:1
(anonymous) @ VM168:1
So what's the problem, and how do I solve it?
You have to create the 3 files on this page, put them in the same directory and then open the HTML file in a browser www.newthinktank.com/2019/06/tetris-game-design/ I'm 100% positive it works. The game is here www.newthinktank.com/wordpress/tetris/Tetris.html
@@derekbanas No, putting all 3 files in the same directory is not the problem. I always do that, unless I'm using an online CSS or JS file. However, I did have problems with Google Chrome the other day. I took the same script to a library PC, and it worked just fine. It seems my problem is with my Google Chrome. Anyway, thanks for the speedy response.
What is this "..." operator at 8:30 ?
It's called the spread operator developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
@@derekbanas Very cool! Thanks.
any chance for a yars revenge clone? lol
I'm open to anything. I'll see what I can do
1st
Thank you :)
Could you teach me how to make a bot able to autolike your videos?
That's funny 😁 Thank you
First
Thank you :)
wtf is a tetromino ?😭
RIP tetris friends
There is a lot to learn here
After the design patterns videos, i'm disapointed of the videos u posting.
I'm sorry to hear that. I just make the videos that are requested. What would you like me to cover?
Derek Banas More architectural level of development, like IOC, Message Brokers, DDD, Design patterns in real world examples etc.
Thank you for the input :) I'll see what I can do
So I followed along during the entire tutorial. I learned quite a bit! But unfortunately, I don't even know how to run the program. I'm using Visual Studio Code. Every time I even try it Just says localhost 8080.
Open the file in your browser and it will work. Chrome, Firefox, etc.