A photo of Max Glenister Max Glenister

26: Rotating Pieces

For today’s Cardboctober we’re still working with Tetris. The task today is to make the pieces rotate.

There are a couple of ways you can handle the rotation of Tetrominoes, for example you can calculate the rotation using nested for loops:

var arr = [
  [0,0,1],
  [1,1,1],
];

for(var i = 0; i < arr[0].length; i++){
  for(var j = 0; j < arr.length; j++){
    newArray[i][j] = arr[j][i];
  }
}

// newArray:
//  [1,0]
//  [1,0]
//  [1,1]

The other approach would just be to pre-calculate the rotations and store them as an array:

var shapes = [
    {
      name: 'L',
      color: 0xf0a000,
      layout: [
        [
          [1, 0],
          [1, 0],
          [1, 1],
        ],
        [
          [1, 1, 1],
          [1, 0, 0],
        ],
        [
          [1, 1],
          [0, 1],
          [0, 1],
        ],
        [
          [0, 0, 1],
          [1, 1, 1],
        ]
      ]
    },
    //... and so on
];

So that’s out of the way, we define all of the shape rotations for all of our shapes, and then we have a couple of choices for addressing them…

We could directly refer to shape[shapeIndex].layout[layoutIndex], but we would need to maintain/update a value for layoutIndex, or we could do something like the following to ensure that the layout in the first slot (0) of the layout array is the one we’re using:

var rotatePiece = function (shape) {
    shape.layout.push(shape.layout.shift());
  };

This takes the first array item from shape.layout, cuts it off of the front of the array and finally sticks it at the end of the array.

The last thing is binding this to a key, so we just update our key event listener that we used for moving left/right and add another case to call rotatePiece:

  //...
  case 38: // up key
    rotatePiece(shape);
  break;
  //...

So that’s it for piece rotation. I feel like I might be painting myself in to a corner more and more with each day of this, so we’ll see what happens tomorrow!

Cardboctober

View this Cardboctober hack 26: Rotating Pieces

View the other submissions for day 26 on the Cardboctober website.

To see the latest Cardboctober hacks, follow @cardboctober on Twitter

Check out my other Cardoctober posts here: /cardboctober

About the author

A photo of Max Glenister

Max Glenister

Max Glenister is a Front-end Developer based in Oxfordshire. For work he spends his time designing, validating and implementing user interfaces. For fun he tinkers with Virtual Reality, 3D printing, embedded systems, game development and many other things.

You can keep up with Max on Github, Twitter and Reddit