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

A step-by-step tutorial on building a Tetris game from scratch using vanilla JavaScript and the HTML5 Canvas API.

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: codeexplained.org/2018/08/create-tetris-game-using-javascrip… 🌍 Social Media Links. ◾ Facebook : facebook.com/Code.Explained.Official ◾ Twitter : twitter.com/code_explained ◾ Instagram : instagram.com/Code.Explained.Official/ ◾ GitHub : github.com/CodeExplainedRepo 💲 Suppport the Channel Paypal : paypal.me/CodeExplained Buy Me a Coffee: buymeacoffee.com/CodeExplained ----------------------------------------------------------------------------------------------------- | 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