A photo of Max Glenister Max Glenister

25: Creating and Moving Pieces

Today we’re going to be looking at creating Tetromino pieces and moving them around the board.

I actually had to throw away all of yesterday’s work today because my initial plan for how pieces would exist in the scene was completely wrong.

I was planning for a piece to be it’s own object, separate from the board. This would have caused countless issues:

  • how would I determine if a piece went outside of the board area?
  • how would I determine if a piece intersected a filled area
  • how would I curve a piece with the board?
  • how would I partially remove a piece if I completed a line?

So I’ve gone back to the drawing board. Now, instead of the board being a stationary stateless bohemoth, the board is everything and the state of each block in the board determines where the player “piece” is being rendered.

Confused? To simplify it a bit: To draw a piece at a position in the board, I’m simply changing the state of the blocks where the piece is positioned.

You can view the source for today’s hack here: 25/demo.js

Anyway, I wrapped my head around that eventually (after re-writing a couple of times!) and now we’ve got a board, and (using your keyboard on a PC) you can move the pieces left/right. They don’t do much more than that right now, but this was a long evening of work.

document.addEventListener('keydown', function (e) {
  switch (e.keyCode) {
    case 37:
      updateXPos(shape, -1);
    case 39:
      updateXPos(shape, 1);

For the sake of simplifying things today, I’ve gone back to a flat game board. I’ll re-introduce the curve tomorrow!


View this Cardboctober hack 25: Creating and Moving Pieces

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

Check out my other Cardoctober posts here: /cardboctober

About the author

A photo of 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