なんとなくテトリスがやりたくなってきたので、自作することにしました。
テトリスのスマホアプリを検索するとたくさんヒットしますが、どれも広告が表示されてうざかったので。。
対戦もなく、難易度が上がることもなく、まったりとプレイできるテトリスがやりたかったので、自作します。

開発環境は、JavaScript + p5.jsです。
ゲームを作るときはPhaser.jsを使うことが多いですが、今回はp5.jsを使います。p5.jsはゲームエンジンではないので機能不足ではありますが、その分、オレオレフレームワークを作る楽しみもあるので、いろいろ試してみようと思います。

前置きが長くなりましたが、今回はテトリス用のブロックをプログラミングで描きます。
「プログラミングで絵を描くってどうゆうこと？」と思われる方もいるかもしれませんが、今回は絵が描かれる雰囲気を味わってもらえればと思います。

完成形はこんな感じ

少し立体的なブロックです。
これをペイントソフトを使わずにプログラムで描きます。
描画のステップは全部で7工程です。工程ごとに四角や三角に塗りつぶしながら描いていきます。各工程はこんな感じ。

これをプログラムにするとこんな感じ。

function setup() {
  createCanvas(400, 480);
}

function draw() {
  const blockSize = 48;
  color = {r: 0, g: 255, b: 255}
  drawBlock(window, 10, 0, blockSize, color);
}

/**
 * @param {Graphics} grahics
 * @param {number} x
 * @param {number} y
 * @param {number} size
 * @param { {r:number, g:number, b:number} } rgb
 */ 
function drawBlock(graphics, x, y, size, rgb) {
  graphics.noStroke()

  // 1. 左右のための背景
  graphics.fill(rgb.r, rgb.g, rgb.b);
  graphics.rect(x + 1, y + 1, size - 1, size - 1);

  // 2. 左側
  graphics.fill('rgba(255, 255, 255, 0.6)');
  graphics.rect(x + 1, y + 1, size / 2, size - 1);

  // 3. 右側
  graphics.fill('rgba(0, 0, 0, 0.3)');
  graphics.rect(x + size / 2, y + 1, size / 2, size - 1);

  // 4. 上側
  const range = (v, min, max) => Math.min(255, Math.max(128, v))
  graphics.fill(
    range(rgb.r * 2, 128, 255),
    range(rgb.g * 2, 128, 255),
    range(rgb.b * 2, 128, 255)
  );
  graphics.triangle(
    x + 1, y + 1,
    x + size / 2, y + size / 2,
    x + size, y + 1
  )

  // 5.下側
  graphics.fill(rgb.r / 2, rgb.g / 2, rgb.b / 2);
  graphics.triangle(
    x + 1, y + size,
    x + size / 2, y + size / 2,
    x + size, y + size
  )

  // 6. フロント
  graphics.fill(rgb.r, rgb.g, rgb.b);
  const margin = size / 8
  graphics.rect(x + margin + 1, y + margin + 1, size - margin * 2 - 1, size - margin * 2 - 1);

  // 7. ハイライト
  graphics.fill('rgba(255, 255, 255, 0.7)');
  graphics.rect(x + 1 + margin + 2, y + 1 + margin + 2, size - (margin + 3) * 2, size / 5, margin / 2, margin / 2);
}

各工程でやってることは、fill()で色を指定して、四角形を描画するrect()や三角形を描画するtriangle()を使って絵を描いています。それを重ねることでブロックが完成します。

本プログラムではsizeやrgb(色情報)を与えることにより、ブロックの大きさや色も変えられます。こういった変更ができる点がプログラムで絵を描くメリットかなと思います。

以上、p5.jsでテトリスのブロックを描いてみました。
四角形や三角形を重ねることで1枚の絵が描けました。
関数の使い方次第でもっと複雑な絵も描けると思います。
今後はこのブロックを使ってテトリスを作っていきます。