23: Planning Tetrominoes in VR

================================================================================

I outlined the plan for the week yesterday: To make a tetromino game. So here’s
how we’re going to do that.

I’ve decided to call this “teVRis”, because who doesn’t like a word/acronym
mashup?

First things first we need to think about how we can transition a game mechanic
from two dimensions to three.

[IMAGE: https://blog.omgmog.net/images/2016-10/23/tetris-vs-tevris.png]

My first thought is to project the game board around the player in a circle.
Positioning things on a circle is quite straight-forward with a bit of maths and
two axis (x and z):

  // Position a bunch of blocks around the camera
  var block = core.build(
    'BoxGeometry', [5,5,5],
    'MeshBasicMaterial', [{color:0xff0000}]
  );
  var numBlocks = 20;
  var circle = {
    width: 10,
    depth: 10,
    radius: 25
  };
  var step = (2 * Math.PI) / numBlocks;
  var angle = 0;
  for (var i = 0; i < numBlocks; i++) {
    var _block = new T.Mesh(
      block.geometry.clone(),
      block.material.clone()
    );

    _block.position.x =
      (circle.width / numBlocks) +
      (circle.radius * Math.cos(angle));
    _block.position.z =
      (circle.depth / numBlocks) +
      (circle.radius * Math.sin(angle));

    scene.add(_block);

    angle += step;
  }

You can see the output of this in Cardboctober 04: Skyboxes and generating
meshes (https://blog.omgmog.net/post/cardboctober-04/) - I even did some
preleminary Tetromino generation. So we’ve got the starting point for our game
then, we just need to add all of the game logic.

Tomorrow we’ll look at generating the Tetromino shapes and putting them in to
this game board.

================================================================================
Published October 23, 2016

Generated from the original post:
https://blog.omgmog.net/cardboctober/cardboctober-23/


Max Glenister is an interface designer and senior full-stack developer from
Oxfordshire. He writes mostly about front-end development and technology.

- Mastodon: https://indieweb.social/@omgmog
- Github: https://github.com/omgmog
- Reddit: https://reddit.com/u/omgmog
- Discord: https://discordapp.com/users/omgmog#6206