Search⌘ K
AI Features
Home
Courses
Game Development with JavaScript: Creating Tetris

Randomizers

Explore how to use JavaScript's Math methods to build randomizers for tetromino selection in Tetris. Understand basic randomization, history checks, the TGM randomizer, and the 7-bag method to reduce piece repetition and improve gameplay fairness. This lesson helps you implement various randomizer strategies to enhance your game's logic and unpredictability.

We'll cover the following...

To have more colors than only a blue tetromino in our game, we need to add more pieces to our code.

Following the Super Rotation System, we can take the first position of the pieces and add them to the constants and their colors:

Javascript (babel-node)
const COLORS = [    
  'cyan',  
  'blue',  
  'orange',  
  'yellow',  
  'green',  
  'purple',  
  'red'  
];
const SHAPES = [    
  [  
    [0, 0, 0, 0],   
    [1, 1, 1, 1],  
    [0, 0, 0, 0],   
    [0, 0, 0, 0]  
  ],   
  [  
    [2, 0, 0],  
    [2, 2, 2],  
    [0, 0, 0]  
  ],  
  // And so on  
];

Basic randomizer

To randomly pick one of the tetrominoes, we can use Math, a built-in object in JavaScript that includes a couple of static methods to help us with our calculations:

  • Math.random() returns a floating-point number in the range 0 to less than 1
  • Math.floor() returns the largest integer less than or equal to a given number.

To get a random piece, we use these methods to create an algorithm that gives us an integer between 0 and the maximum number we send in:

randomizeTetrominoType(noOfTypes) {  
  return Math.floor(Math.random() * noOfTypes);  
}

With this method, we can get a random tetromino type when we spawn, and then set the color and shape from it. Now, instead of hardcoding the blue tetromino, we can add this to the constructor:

Javascript (babel-node)
  class Piece {
    constructor(ctx) {  
      this.ctx = ctx;    
      const typeId = this.randomizeTetrominoType(COLORS.length);  
      this.shape = SHAPES[typeId];  
      this.color = COLORS[typeId];
      
      // Starting position.  
      this.x = 3;  
      this.y = 0;  
    }
  }

Try pressing play multiple times, and you get the different shapes in their color.

Just like the original version of Tetris, we have implemented an unbiased randomizer. It doesn’t matter which piece comes next, just pick one and give it to the player.

The problem with this sort of randomizer becomes apparent when you have played a lot of Tetris. The player could receive a sequence of the same pieces (called floods) or a sequence omitting a certain piece (called a drought). We’ll see how the designers of Tetris games tried to solve these problems.

Randomizers evolving

To cut down on repeating pieces, a history check was added to the randomizer. This simple check would:

  1. Choose a piece
  2. Check if the piece was the same as the last
  3. If it was the same, it would choose a new piece, but only once.
  4. Whatever the result was, the piece was dealt.

While the chance of getting the same piece twice in a row decreased, nothing was stopping the game from dealing out alternating pieces.

TGM randomizer

The games in The Grand Master series (TGM) randomize the order of tetrominoes using an algorithm that makes successive identical tetrominoes less common. The system involves keeping a history of the four most recent tetrominoes and trying to choose a random tetromino that is not in the history.

Each time a piece is generated, the game will try a certain number of times to generate a tetromino that doesn’t match any in history. If all tries fail and it generates a recent piece, the game will settle with that recent piece.

The overall effect is to minimize the same tetrominoes showing up in succession while maintaining a certain amount of unpredictability. Games in the series use both four and six tries while using the TGM randomizer.

The 7-bag

Another method used by Tetris games is generating a sequence of all seven tetrominoes randomly as if they were drawn from a bag. Then, it deals all seven tetrominoes to the piece sequence before generating another bag.

This makes it much less likely that the player will get an obscenely long run without a desired tetromino. he 7-bag method can produce a maximum of twelve tetrominoes between one I and the next I, and a run of S and Z tetrominoes is limited to a maximum of four.

This random generator is so predictable, it’s actually possible to play forever.

As an exercise, try implementing one or more of these randomizers!