Create The Tetris Game Using JavaScript | Code Explained

Create The Tetris Game Using JavaScript

Create The Tetris Game Using JavaScript

In general, to create a JavaScript game, you'll need two things, the first is the HTML5 canvas, and the second is JavaScript.

At anytime you can go below, and WATCH THE TUTORIAL.

First things first, this is what you need to know about the Tetris game.

Create The Tetris Game Using JavaScript

The game board: the game is played on a board, that has 20 rows and 10 columns. in programming languages that's a 2D array.

Tetrominoes: are the pieces we play with, there are 7 different pieces, Z, T, L, O, I, J, and S. the pieces can move to the right, to the left, to the bottom, and rotate. and when a Tetromino reaches the bottom we lock it to the board, and we ask for a new one.
Create The Tetris Game Using JavaScript

Walls: we have two walls, the right and the left wall.

Square: the board and the Tetrominoes, are both made of squares, a square by default is 20px by 20px rectangle.

Create the PIECES (or tetrominoes).

let's take  the Z piece as an example. this how it looks like.
Z tetromino - Create The Tetris Game Using JavaScript
The idea is, for a VACANT(empty) square we give 0, and for an OCCUPIED square we give 1.
Create The Tetris Game Using JavaScript
Now this is just one pattern out of four, the code for this pattern is this.
Create The Tetris Game Using JavaScript
Remember the player should be able to rotate a piece, the easiest way to do that with code, is to put all the patterns of a Tetromino inside an array.
So we need to create an array for each Tetromino, and here is the example for the Z piece.
Create The Tetris Game Using JavaScript
Now you should be able to figure out the code for all the other pieces. but it's not really necessary to type in the code all over again, since I already did that. actually you don't have to type in any code for now, all you have to do for now is to understand the logic behind the game, now that you understand how we create the pieces using code, let's move and see how to create our board.

Create the GAME BOARD.

The board is a 2D array, means an array inside another array, which means we will need two for loops, the first for loop, will create the rows, and the second will create the columns.


a 20px/20px SQUARE is our UNIT.

Since the board and the pieces are both made of squares, we will use a constant called SQ (for square) = 20, as a unit.

So using code we will say : const SQ = 20;

How to draw a SQUARE to the CANVAS? We need First to go and create the canvas element, inside our index.HTML file :

Then before the closing body tag "</body>", we add our JavaScript code.

Now we need to write our code, inside tetris.js file, the first thing that we will do, is to select our canvas, and getContext('2d') of our canvas :

getContext('2d') method, has properties and methods that allow us to draw and DO different things on the canvas.

Let's now talk about how to draw a square. a square is a rectangle for that,we will use a method, which is; ctx.fillRect(X,Y,W,H); X and Y, are the square position, and W is the width of the square, and H is the height of the square.

Before that, we need to define the color with, we want to draw our square, so we need to say; ctx.fillStyle = "red"; the square must now has a red color.

So if you say;

We will get a square at the top left corner, with a red color, and width and height both equal to 20 pixels.

To add a stroke for that square is so simple.

Now we should see our square with black stroke.

To make this code reusable, we just need to put it inside a function called drawSquare, this function will get as arguments, the X and Y position, and the color.

Now to draw the square above, all we need to say is, drawSquare(0, 0, "red"), and we will get the same result.

I think you're now ready to watch my tutorial about how to create the Tetris game using JavaScript.
First download the starter template from gitHub, so you can follow the tutorial step by step :

The Game link : Code Explained Repo





Other Tutorials for games created using JavaScript :

Create the Snake Game Using Javascript

Create the Flappy Bird Game Using Javascript

COMMENTS

BLOGGER: 2
Loading...
Name

bootstrap,2,css,2,featured,3,JavaScript,19,
ltr
item
Code Explained: Create The Tetris Game Using JavaScript
Create The Tetris Game Using JavaScript
We will create the TETRIS game using JavaScript only, means no framework is been used during the tutorial, the tutorial has two parts: 1st part : we understand everything about the game, we discuss things before we code. 2nd part : Type in the Code.
https://4.bp.blogspot.com/-Im7iallm9JY/W2tBLbVPthI/AAAAAAAAAEY/P75gxFl53S8_7volKnO5lWvieT058W2pQCPcBGAYYCw/s640/tetris%2Bthumbnail.png
https://4.bp.blogspot.com/-Im7iallm9JY/W2tBLbVPthI/AAAAAAAAAEY/P75gxFl53S8_7volKnO5lWvieT058W2pQCPcBGAYYCw/s72-c/tetris%2Bthumbnail.png
Code Explained
https://www.codeexplained.org/2018/08/create-tetris-game-using-javascript.html
https://www.codeexplained.org/
https://www.codeexplained.org/
https://www.codeexplained.org/2018/08/create-tetris-game-using-javascript.html
true
6721257432511051792
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy