Create Tetris Game Using JavaScript and HTML5 | JavaScript Project For Beginners

Tetris is a video game created by Russian designer Alexey Pajitnov in 1985 that allows players to rotate falling blocks strategically to clear levels. Pajitnov claimed he created the name of the game by combining the Greek prefix tetra, which refers to the four squares contained in each block, with the word tennis.

And today you're going to create the TETRIS game using JavaScript and HTML (or HTML5).

We're not using any framework Just Vanilla JavaScript.

This tutorial is created for beginners especially, As I will discuss the logic behind the game first, and try to break down every code line.

So you will literally understand everything about the game, and this will make you be able to create the game on your own.

If you want to follow along with me when I type in the code, you'll need to download the starter template from GitHub.
-----------------------------------------------------------------------------------------------------
| LINKS |
-----------------------------------------------------------------------------------------------------

DOWNLOAD SOURCE CODE + STARTER TEMPLATE:

🌍 Social Media Links.

💲 Suppport the Channel

-----------------------------------------------------------------------------------------------------
| HASH TAGS |
-----------------------------------------------------------------------------------------------------
#JavaScript #beginners #jstutorials
#JavaScript #Games #JavaScriptGames

0:00 Introduction
0:13 PREVIEW of THE GAME
0:24 TUTORIAL
2:48 What we should know about the tetris game?
3:52 Draw a SQUARE
6:39 The game board
8:22 The Tetrominoes (tetris pleces)
9:53 Draw The Tetrominoes
10:53 objects in JS Thinga we need
13:38 Piece The construction function
15:26 Coordinates of a SQUARE
17:53 Move The active Tetromino
19:52 draw() AND un Draw()
21:26 CONTROL the pieces
23:26 Collision detection Function
26:36 Update Movement Functions
31:15 Rotate a Piece
38:06 Last UPDATE for rotate function
39:01 Random Piece Function
41:04 Lock a Piece
45:49 DROP a piece
47:32 Improve how we CONTROL a piece

[CodeExplained]

🚨 Big Announcement! 🚨

Hey everyone! I've made a big decision for this channel—I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better.

If you find my content valuable and want to support my work, there are several ways you can help:

Like & Share: Simply liking the video and sharing it with friends helps a lot!
Subscribe & Hit the Bell: Stay updated and never miss a new video.
YouTube Thanks: Use the "Thanks" button below to send a one-time donation.
Join the Channel Community: Get exclusive perks and behind-the-scenes content.

Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support!

Let’s keep growing and learning together! 🌟

[santiso]

Finally someone explaining how to create Tetris the proper way, thank you!

[twosongs]

Thank you so much for this enlightening video. I much appreciated you going step by step, deciphering the algorithm, to THEN put it in code. You’re a natural Teacher.

[zoomstop]

This looks awesome, shared this with some friends who want to try JS but fear a big time commitment.

[bolet_ti_vari]

This is so good, my hope of learning is back, thank you👏

[mgroff]

Thank you for the very well explained, in depth tutorial. This very much helped me gain more understanding on working on 'canvas' . No complaints, much appreciated!

[EduardoWeidmanBarijan]

Awesome tutorial. I like that you did explain all the game logic before diving into the code.

[chiragrao]

You are the best at explaining stuff. I love your videos.

[girlingame]

wow, such a useful lesson and amazing explanation, i love how you break it down into pieces .bravoo

[_slier]

The best explaination on building tetris.. Thx!

[lietuvisdarius]

Very interesting tutorial! At the moment i'm converting this game to React hooks, learned a lot about x and y coordinates. I like the way you explaining, firts what you trying to archieve and only then go to code. Genius. P.S. the way you use for loops its just incredible, you must be experience game developer.

[chansaem]

You're an amazing teacher. You made me make my mind to challenge this project and feel confident since I think I could understand what this is about thoroughly for the first time. I might be studying hard the formidable JavaScript monster thanks to you.

[evelienkulikova]

It works! Thanks for explaining the logic behind the game before writing the whole code. This is really useful. Thanks a bunch!

[jamescao]

Thanks for your very good game in js. Question: in lock(), please recheck that adding drawBoard() at last might break the game so that the first tetrimino from top will go down through the bottom wall then disappear.

[owenelwin]

Awesome video! Well animated and colorful! I will definitely go through this video and teach myself very soon as soon as I get my next chance !

[jolly]

Wasn't even using javascript, but this still helped me!

[tonguyenducmanh]

very good bro. Thank you very much for this tutorials. I watched many tutorials before but they don't explain like this. Thank u <3

[sr_aman]

Awesome! Keep up the good work. Will share with all my friends.

[lomao]

You are the best of the best. The best tuto ever. You are a killer.

[christophercampbell]

31:30 You didn't actually have to define each rotated piece because if you took the rows top to bottom, and wrote it as columns from right to left, you would get the rotated piece. For example, you can see 1 1 0 in Z[0] as the third column in Z[1], and 0 1 1 in Z[0] as the second column in Z[1]. I just know that's how programs like MS Paint do it.