No video

JavaScript Tetris

  Рет қаралды 58,577

Derek Banas

Derek Banas

Күн бұрын

Play the Game & Get the Code : bit.ly/tetrisde...
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_...
➡️ New C++ Programming Bootcamp Series for $9.99 : Over 23 Hrs + 53 Videos + Quizzes + Graded Assignments + New Videos Every Month bit.ly/C_Cours...
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

Пікірлер: 159
@derekbanas
@derekbanas 5 жыл бұрын
Here are more videos in which I make Real Apps in other languages 31 Part Video on Making Video Games : kzfaq.info/get/bejne/j9Fdhpt4sLSvqIE.html Android Translation App : kzfaq.info/get/bejne/f5toh850zp2Xlas.html Make JS Pong : kzfaq.info/get/bejne/qMuoZcJqvqivcXk.html C# Paint App : kzfaq.info/get/bejne/ma6elqSQxqm6nYE.html C++ Paint App : kzfaq.info/get/bejne/q-CXiJWJ387SeI0.html C++ NotePad : kzfaq.info/get/bejne/f59mqLN1zsy-Yas.html C++ Calculator : kzfaq.info/get/bejne/qt53hbhotNi4iqM.html C Arduino Projects : kzfaq.info/get/bejne/f5yafLKDrp2vYp8.html Python Paint App : kzfaq.info/get/bejne/matlnsthl6nPhI0.html Python Text Editor : kzfaq.info/get/bejne/bJNhi7WfqtKdoHk.html Python Calculator : kzfaq.info/get/bejne/jbiCnMpzndSxhWQ.html Python / Kivy Calculator : kzfaq.info/get/bejne/bN99e6t0mJzYhGQ.html
@AlexScene
@AlexScene 5 жыл бұрын
Thanks a lot! I always learn so much from this channel. Btw, love the shirt.
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :) That's funny that you recognized what it was.
@2271masoud
@2271masoud 5 жыл бұрын
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
@derekbanas
@derekbanas 5 жыл бұрын
Thank you very much :) I do my best to make new types of videos that are fun and educational
@yuunk7
@yuunk7 2 жыл бұрын
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
@plopfish
@plopfish 5 жыл бұрын
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!
@derekbanas
@derekbanas 5 жыл бұрын
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
@MrIzzo006
@MrIzzo006 5 жыл бұрын
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!
@derekbanas
@derekbanas 5 жыл бұрын
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.
@cardsatanywhere363
@cardsatanywhere363 Жыл бұрын
I never fully understood how complicated tetris really is until now. Great tutorial!!
@risat3354
@risat3354 5 жыл бұрын
The best thing about this is we can implement this in different languages on game engines or even on command line and terminal.
@derekbanas
@derekbanas 5 жыл бұрын
Yes that was the goal. By making it low level it translates easy into any language
@humanplanet8728
@humanplanet8728 4 жыл бұрын
Those 3% people are grateful that they'd encountered such a great teacher like you. Thank you very much.
@derekbanas
@derekbanas 4 жыл бұрын
Thank you for the nice compliment :)
@technofeeliak
@technofeeliak 5 жыл бұрын
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.
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :) That sounds like a fun project. I plan on making Mario with pure JS soon
@katlehokomeke
@katlehokomeke 5 жыл бұрын
Perfect timing 💜
@derekbanas
@derekbanas 5 жыл бұрын
I'm happy I could help :)
@WorstDeveloper
@WorstDeveloper 5 жыл бұрын
@@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
@derekbanas
@derekbanas 5 жыл бұрын
Everything is always more fun without a framework :)
@ahmedmahdi1849
@ahmedmahdi1849 3 жыл бұрын
nice and clean code , thank you , but I'm looking for a responsive layout using css grid instead of js canvas
@clairevanblerck2285
@clairevanblerck2285 4 жыл бұрын
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.
@derekbanas
@derekbanas 4 жыл бұрын
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.
@akagaming9431
@akagaming9431 5 жыл бұрын
Thanks for dropping an amazing content as always! Glad to see you're still active from time to time!
@derekbanas
@derekbanas 5 жыл бұрын
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.
@sanjaykarthick783
@sanjaykarthick783 Жыл бұрын
Derek the video was awesome, I loved your explanation on everything, keep it up.
@MarkinVideos
@MarkinVideos Жыл бұрын
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]
@karlee8608
@karlee8608 5 жыл бұрын
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. :)
@derekbanas
@derekbanas 5 жыл бұрын
Thank you for the nice compliment :) Many more are coming
@Vinomix
@Vinomix 5 жыл бұрын
Keep up the good work, I am loving these series. They are the best on youtube so far.
@derekbanas
@derekbanas 5 жыл бұрын
Thank you very much 😁 More are coming
@trollo__9424
@trollo__9424 5 жыл бұрын
You are the best KZfaq channel in programming evironment. You're videos are very helpful. :D
@derekbanas
@derekbanas 5 жыл бұрын
Thank you for the nice compliment :)
@BigCreamZombie
@BigCreamZombie 3 жыл бұрын
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
@solid3451
@solid3451 10 ай бұрын
Awesome tutorial! Would be better if we could see game build progress while you were writing portions of the code.
@joningram
@joningram 4 жыл бұрын
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!
@derekbanas
@derekbanas 4 жыл бұрын
I'm happy you enjoyed it :) I largely live coded this which often creates interesting results.
@patrickmcauliffe7162
@patrickmcauliffe7162 3 жыл бұрын
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!
@derekbanas
@derekbanas 3 жыл бұрын
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 kzfaq.info/get/bejne/f7ipgLSW2N3DgY0.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.
@emons2405
@emons2405 2 ай бұрын
thank you sir. this is good for my test lol
@IzzaldinSamir
@IzzaldinSamir 5 жыл бұрын
Nice video :) Can you make a video about using Anki for programming or tech stuff?
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :) I'll see what I can do
@freeairdrop9375
@freeairdrop9375 5 жыл бұрын
great eposide Derek
@derekbanas
@derekbanas 5 жыл бұрын
Thank you very much :) I worked very hard on it
@joopt7891
@joopt7891 5 жыл бұрын
Derek you are the most awesome human being to ever live I want to be you when I grow up.
@derekbanas
@derekbanas 5 жыл бұрын
Thank you for the nice compliment :) Anyone can do what I do
@ChristianPretorius
@ChristianPretorius 5 жыл бұрын
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.
@derekbanas
@derekbanas 5 жыл бұрын
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
@ChristianPretorius
@ChristianPretorius 5 жыл бұрын
@@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!
@NickMak
@NickMak 4 жыл бұрын
This video helped me get into Javascript thank you!
@derekbanas
@derekbanas 4 жыл бұрын
Thank you very much :) I'm happy you enjoyed it
@p0k7lm
@p0k7lm 5 жыл бұрын
Learning so much here , thank you .This technology information means a whole lot to me ! There is great value in your vids!📈📚🔬📕👍😃📐🔭
@derekbanas
@derekbanas 5 жыл бұрын
Thank you very much :) Happy to help
@marcelstaiger9100
@marcelstaiger9100 Жыл бұрын
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?
@derekbanas
@derekbanas Жыл бұрын
Thank you very much :) Yes I have a bunch Guitar Hero Type of Game : kzfaq.info/get/bejne/rq9ndaxkldjUgqs.html Asteroids : kzfaq.info/get/bejne/fr2liJid3pbYkXU.html Pong : kzfaq.info/get/bejne/qMuoZcJqvqivcXk.html
@marcelstaiger9100
@marcelstaiger9100 Жыл бұрын
@@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
@hazemtimoumi2717
@hazemtimoumi2717 Жыл бұрын
thank you , I enjoyed the video !!
@meginna8354
@meginna8354 5 жыл бұрын
Could you please teach Kotlin for android development or other projects, you're awesome.
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :) A new mobile app tutorial is coming very soon
@GrahamBigFish
@GrahamBigFish 2 жыл бұрын
Do you have a link to those designs?
@kikijade6112
@kikijade6112 3 жыл бұрын
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?
@NickMak
@NickMak 4 жыл бұрын
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?
@lyricsmint567
@lyricsmint567 5 жыл бұрын
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,
@derekbanas
@derekbanas 5 жыл бұрын
Thank you very much :) I'll see what I can do about your requests
@digigoliath
@digigoliath 4 жыл бұрын
Great video to help me relax. TQVM!!
@jeremyalberts3153
@jeremyalberts3153 9 ай бұрын
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
@andrewanimatesstuff
@andrewanimatesstuff 8 ай бұрын
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.
@exodus8814
@exodus8814 5 жыл бұрын
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?
@derekbanas
@derekbanas 5 жыл бұрын
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.
@yaaropmohammed5865
@yaaropmohammed5865 5 жыл бұрын
Thank u very much... I'm really learning and enjoying those videos 👍👍
@derekbanas
@derekbanas 5 жыл бұрын
Thats great! I'm doing my best to make learning rather complex topics fun
@Ricocase
@Ricocase 5 жыл бұрын
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
@derekbanas
@derekbanas 5 жыл бұрын
That's great :) I'm doing my best to save everyone a lot of money
@clashongemmer853
@clashongemmer853 Жыл бұрын
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?
@NikolatekPe
@NikolatekPe 5 жыл бұрын
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.
@derekbanas
@derekbanas 5 жыл бұрын
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.
@NikolatekPe
@NikolatekPe 5 жыл бұрын
@@derekbanas It is actualy a good thing to leave room for improvements for "students"
@baltazar9762
@baltazar9762 6 ай бұрын
Waouh 😮😮 u are Best
@BD-qz2tg
@BD-qz2tg 5 жыл бұрын
Great Tutorial. Would you consider doing a game illustrating elastic collisions like say, Curling?
@derekbanas
@derekbanas 5 жыл бұрын
Thank you 😁 I'll see what I can do
@konstantinrebrov675
@konstantinrebrov675 5 жыл бұрын
Please do Verilog in one video! It is useful for programmers working in the industry.
@derekbanas
@derekbanas 5 жыл бұрын
I'll look into it
@geordietoon6713
@geordietoon6713 5 жыл бұрын
Any plans on teaching flutter? Very interested in it and love how you teach.
@derekbanas
@derekbanas 5 жыл бұрын
Yes I'm working on it
@Pridetoons
@Pridetoons 5 жыл бұрын
Thanks for posting this! Can you show us how to program other Arcade favorites.
@derekbanas
@derekbanas 5 жыл бұрын
Sure many more are coming
@jamescao2008
@jamescao2008 2 жыл бұрын
The keyCode has been updated, would you update the function to take care of key press? Thanks!
@Ermosparis
@Ermosparis 4 жыл бұрын
Thank you !
@fortifiedconcept4260
@fortifiedconcept4260 5 жыл бұрын
Supeeeeer! I have no words...Thanks a lot!!!!😁
@derekbanas
@derekbanas 5 жыл бұрын
Thank you 😁 I'm happy you like it
@GertCuykens
@GertCuykens 5 жыл бұрын
Who wants to see Derek brain power go to 11 by modifying his tetris so it has 3d blocks :D
@derekbanas
@derekbanas 5 жыл бұрын
GERT!!! Nice to see my old board game buddy :) I can definitely do that since this series seems to be taking off
@paulomarinero6799
@paulomarinero6799 5 жыл бұрын
Very informative. Thanks! 😎
@derekbanas
@derekbanas 5 жыл бұрын
I'm glad you liked it :)
@brandontaylor3249
@brandontaylor3249 5 жыл бұрын
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?
@derekbanas
@derekbanas 5 жыл бұрын
Which part of the video are you referring to?
@brandontaylor3249
@brandontaylor3249 5 жыл бұрын
@@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
@lamhepreeti50
@lamhepreeti50 5 жыл бұрын
What's next Dude
@derekbanas
@derekbanas 5 жыл бұрын
More JavaScript games since so many people seem to like them. Then more JavaScript stuff and a new mobile app series
@GoUpv13
@GoUpv13 5 жыл бұрын
@@derekbanas Sounds amazing man, thank you!
@derekbanas
@derekbanas 5 жыл бұрын
Thank you for checking out my videos :)
@jamescao2008
@jamescao2008 2 жыл бұрын
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?
@tazzitito
@tazzitito 2 жыл бұрын
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.
@manoiumusicgames5763
@manoiumusicgames5763 5 жыл бұрын
Great tutorial! Would you consider making a Wizardry clone from scratch in C#?
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :) I'll see what I can do. I plan on making many more games like this
@noco5029
@noco5029 5 жыл бұрын
I think I might port this over to Java if I get time
@derekbanas
@derekbanas 5 жыл бұрын
Sounds like fun :) It shouldn't be to hard to change it into most any language because it is so low level.
@executiexo9920
@executiexo9920 2 жыл бұрын
So...has anyone else had issues with the arrays filling in y,x instead of x,y?
@user-ol5xb2vm2w
@user-ol5xb2vm2w 4 жыл бұрын
Thank u very much
@derekbanas
@derekbanas 4 жыл бұрын
Happy to help :)
@bearhow4876
@bearhow4876 3 жыл бұрын
how do I open this game once my code has been done?
@elkhoukhi
@elkhoukhi 5 жыл бұрын
Thank you sir!
@derekbanas
@derekbanas 5 жыл бұрын
I'm happy I could help :)
@dragoninventor
@dragoninventor 5 жыл бұрын
Thank you so much
@derekbanas
@derekbanas 5 жыл бұрын
It is my pleasure to be of service :)
@iMohi
@iMohi 5 жыл бұрын
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?
@derekbanas
@derekbanas 5 жыл бұрын
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
@ironman85000
@ironman85000 5 жыл бұрын
Shoutout to the 3% of us
@derekbanas
@derekbanas 5 жыл бұрын
The 3% are the only reason my channel exists 😁
@kevinkoltraka3121
@kevinkoltraka3121 5 жыл бұрын
does anybody know what the dots inside of the square brackets mean? array = [...Array()] those ones
@abhaysingh-lg2cr
@abhaysingh-lg2cr 5 жыл бұрын
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.
@john-victor5586
@john-victor5586 3 жыл бұрын
Fillstyle are null
@8010225325
@8010225325 5 жыл бұрын
Hey derek would you mind if i create written tutorials/articles based off your videos ?
@derekbanas
@derekbanas 5 жыл бұрын
Yes you can do that. I don't care what people do with the code I provide on my website, or anything.
@octaviusalimari2977
@octaviusalimari2977 4 жыл бұрын
Its possible to make a way to see the next piece ? if is, how can i do that ?
@mohammadalhaj6681
@mohammadalhaj6681 3 жыл бұрын
did you make it? cause i want to make it too
@GaryMcNeely
@GaryMcNeely 4 жыл бұрын
great video
@derekbanas
@derekbanas 4 жыл бұрын
Thank you very much :)
@WEBSTART-LIVE
@WEBSTART-LIVE 4 жыл бұрын
всё очень круто!
@htroundsinc5955
@htroundsinc5955 5 жыл бұрын
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?
@derekbanas
@derekbanas 5 жыл бұрын
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
@htroundsinc5955
@htroundsinc5955 5 жыл бұрын
@@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.
@lol51329
@lol51329 11 ай бұрын
banger
@imtiazahmad7826
@imtiazahmad7826 5 жыл бұрын
Can you plz make Java game. Idk JavaScript
@derekbanas
@derekbanas 5 жыл бұрын
I made one here that covers a ton of topics I haven't covered in this JS series yet kzfaq.info/get/bejne/at2Hf6iWtrm8fIU.html
@DanHowardMtl
@DanHowardMtl 5 жыл бұрын
What is this "..." operator at 8:30 ?
@derekbanas
@derekbanas 5 жыл бұрын
It's called the spread operator developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
@DanHowardMtl
@DanHowardMtl 5 жыл бұрын
@@derekbanas Very cool! Thanks.
@tonanornottonull7132
@tonanornottonull7132 5 жыл бұрын
any chance for a yars revenge clone? lol
@derekbanas
@derekbanas 5 жыл бұрын
I'm open to anything. I'll see what I can do
@arwahsapi
@arwahsapi 5 жыл бұрын
Could you teach me how to make a bot able to autolike your videos?
@derekbanas
@derekbanas 5 жыл бұрын
That's funny 😁 Thank you
@rush-ingaming3341
@rush-ingaming3341 Жыл бұрын
wtf is a tetromino ?😭
@alexj1580
@alexj1580 5 жыл бұрын
RIP tetris friends
@derekbanas
@derekbanas 5 жыл бұрын
There is a lot to learn here
@lixfn8179
@lixfn8179 5 жыл бұрын
1st
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :)
@MrEnsiferum77
@MrEnsiferum77 5 жыл бұрын
After the design patterns videos, i'm disapointed of the videos u posting.
@derekbanas
@derekbanas 5 жыл бұрын
I'm sorry to hear that. I just make the videos that are requested. What would you like me to cover?
@MrEnsiferum77
@MrEnsiferum77 5 жыл бұрын
​ Derek Banas More architectural level of development, like IOC, Message Brokers, DDD, Design patterns in real world examples etc.
@derekbanas
@derekbanas 5 жыл бұрын
Thank you for the input :) I'll see what I can do
@mohammedkhorajiya8286
@mohammedkhorajiya8286 5 жыл бұрын
First
@derekbanas
@derekbanas 5 жыл бұрын
Thank you :)
@asherwilson9746
@asherwilson9746 Жыл бұрын
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.
@derekbanas
@derekbanas Жыл бұрын
Open the file in your browser and it will work. Chrome, Firefox, etc.
JavaScript Tutorial 12 Doomsday Algorithm
31:04
Derek Banas
Рет қаралды 14 М.
Why Democracy Is Mathematically Impossible
23:34
Veritasium
Рет қаралды 2,1 МЛН
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Бискас
Рет қаралды 6 МЛН
白天使选错惹黑天使生气。#天使 #小丑女
00:31
天使夫妇
Рет қаралды 15 МЛН
ISSEI & yellow girl 💛
00:33
ISSEI / いっせい
Рет қаралды 25 МЛН
Violet Beauregarde Doll🫐
00:58
PIRANKA
Рет қаралды 36 МЛН
The Playstyle So OP, Mojang Banned It 4 Times
13:54
XayXay
Рет қаралды 195 М.
Code Tetris: JavaScript Tutorial for Beginners
1:36:08
freeCodeCamp.org
Рет қаралды 383 М.
Write a Tetris game in JavaScript
51:35
Meth Meth Method
Рет қаралды 395 М.
Make JavaScript Asteroids in One Video
58:57
Derek Banas
Рет қаралды 28 М.
The BEEFY mini PC - Minisforum AtomMan G7 PT
12:40
ShortCircuit
Рет қаралды 186 М.
xTool D1 Pro 20w Projects
11:45
Derek Banas
Рет қаралды 24 М.
I Speedran Gravity Chess
39:35
Green Lemon Games
Рет қаралды 1,1 М.
6 Inventions That Are Older Than You Think
14:24
SciShow
Рет қаралды 125 М.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Бискас
Рет қаралды 6 МЛН