Tetris Game Design

JavaScript Tutorial 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. Play Tetris

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. Game design principles used include working with grids, collision detection, lookup tables, drawing and deleting precisely, reacting to user input and much more.

If you value videos like this, consider donating $1. I’ll be uploading new Patreon only content this month to thank you for your support.

Code From the Video

Tetris.html

mainstyle.css

TetrisBasic.js

2 Responses to “Tetris Game Design”

  1. Marco Ris says:

    Hey Derek
    i made it to the whole video. Super project thanks for your time.
    I have included a speed logic combined with the difficulty for the levels. After 100 points the speed and level is increasing.
    The colors are now also a bit noble 😉
    I changed the Key from E to W.
    If you want to check out you can find your code (updated with my code) on github (hope it is ok for you? https://github.com/marcoris/tetrisJS)
    btw. its sadly a bit buggy. why do i have to scale the whole game by 2? because of the drawed rectangle shapes? and i can rotate the blocks out of the screen xD

    Nice to saw you in front of the camera. just insiders know how you look like 😉

    Hope to see more nice tutorials from you soon…

    Have a nice day
    Marco

    • Derek Banas says:

      Thank you very much for sharing your updates / improvements 🙂 Yes the logic wasn’t perfected. I aimed to get it 90% of the way there when I set aside 4 hours to write it. I figured you guys would have fun improving it. I think many errors could be removed by stacking the input from the user into an array and then cycle through them checking for errors and then switching back to a previous valid shape. If someone hits the keys very quickly they aren’t processed quickly enough. More videos are coming soon. I’m happy you liked this one!

Leave a Reply

Your email address will not be published.

Google+