テトリスを作ってみた

動機

ふとゲームが作りたくなった&前に一回挫折したのでテトリス作っていきます

方向性

ヘロンの数学 Heron's math - YouTubeを前から見ていてヘロンさんがテトリスの動画を出していたのでこれを参考にしていきます

ほとんど一緒になる気がする

動画同様にp5.jsを使う予定

構成

• parcel-bundler
• p5
• typescript

で行ってる
ネットにある情報が大体p5をグローバルに展開してるからコピペで動かずに最初だけちょっと苦戦した

とりあえず setup関数 でインスタンス作成後に外に保持することにした

import p5 from "p5";
let p: p5;

const BLOCK_SIZE = 25;

class Block {
  constructor(private x: number, private y: number) {}

  draw() {
    p.push();
    p.rect(this.x * BLOCK_SIZE, this.y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    p.pop();
  }
}

const sketch = (_p: p5) => {
  _p.setup = () => {
    p = _p;
    p.createCanvas(400, 400);
  };

  p.draw = () => {
    new Block(1, 1).draw();
  };
};

new p5(sketch);

完成品

ご飯食べたり海行ってたら次の日になりました

ここで遊べます
→ https://kobakazu0429.github.io/tetris-p5/
→ コード

基本的な動作ができるようになりました
Tスピンができなかったり一番上まで埋まった際にゲームオーバーにならなかったりします
Tスピンの判定は結構めんどくさそうだったり細かい部分で本家のように滑らかに動かなかったりするので、やっぱり会社で作られているゲームは体験が良くてすごいなと思いました

今回は数学的要素として回転行列ぐらいしか使わなかったけど、興味が出たのでSEGAの出しているスライドを読んでみようと思います