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!

Cardboctober day 25

View this Cardboctober hack 25: Creating and Moving Pieces

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

Check out all of my other Cardoctober posts here: /cardboctober.


Want to comment? You can do so via Github.
Comments via Github are currently closed.


Want to reply? I've hooked up Webmentions so you can do so by sending a Webmention, or a Tweet mentioning this post.

Sent a Webmention but it's not showing up below? It could take a little while for brid.gy to pick it up. Webmentions are cached locally for 30 mins before attempting to fetch new Webmentions.