Musings of a .NET Developer, CTO, Tech Enthusiasts

Building Tetris In JavaScript Part 2

Welcome to part 2 in this building Tetris tutorial. If you missed part 1, feel free to check it out here. In this second part, we'll be finishing up the project by adding collision detection to each Tetris shape, generating new blocks, rotations and detecting when rows have been filled and collapsed.

Part 2 we will get to the heart of the matter and implement the majority of the game elements. There's much code and much to discuss up ahead. So to start off, head over to part 1 and get that code set up.

Recap of Part 1

In part we were able to render a 10 x 15 game board in JavaScript which ended up looking like the following.

. . .
Read more
Building Tetris In JavaScript Part 1

Tetris is one of the first games that many of us played as youth. It's fun and challenging and a level can take you from anywhere to a minute to forever if you so play your cards right. So in honor of the game, in this blog post we'll go over how to build a Tetris clone in JavaScript without using any 3rd party libraries. Just plain old vanilla JavaScript and CSS.

To keep the example as simple as possible, this will be a single level of Tetris that will reset after a game over state has been achieved. Let's get started.

Building Tetris In JavaScript Part 1

Step 0. Define a few variables

You can never have too many variables. A motto to code by. This isn't 1950, so memory is more than plentiful. Sometimes a single variable declaration can change the shape of your entire codebase. Here are all the variables that were defined in the making of this game.

var shapes = new Array();
var currentShape;
var height = 15;
var width = 10;
var state = 1;      // 1 running - 0 paused - 2 game over
var colors = ['black', 'orange', 'red', 'blue'];
var move = 0;
var occupiedblocks = new Array();
var direction = "";
var points = 0;

Step 1. Make the Tetris game board

First off, let's make a game board for our game. Based on old specs and images, the number of horizontal running boxes is 10 and I'll be making the height negligible on this one. The board itself will be comprised of div elements created dynamically in JavaScript.

. . .
Read more
"sometimes you have to delete, to find your answer"
Copyright © 2017