Step 03 of 12

自由落下

ブロックを 1秒で 1マス 自動的に落下させます。ここで初めて「時間」の概念が登場 — update(double dt) が毎フレーム呼ばれるので、経過時間を累積していって、1秒溜まったら行を1つ下げる、という仕組み。

MyTetris.java Read-only · editor is coming

import dev.yasuda.tetris.*;

/**
 * Step 3 — Free fall.
 *
 * Goal: the block drops one cell every second on its own.
 * You'll learn: update(dt), time accumulators, separating
 * logic (update) from drawing (render).
 */
public class MyTetris extends Game {

    static final int COLS = 10;
    static final int ROWS = 20;
    static final int CELL = 24;

    static final double DROP_SECONDS = 1.0;

    int blockCol = 4;
    int blockRow = 0;
    double accumulator = 0.0;

    public static void main(String[] args) {
        new MyTetris().run();
    }

    @Override
    public void update(double dt) {
        accumulator += dt;
        while (accumulator >= DROP_SECONDS) {
            accumulator -= DROP_SECONDS;
            blockRow++;
            if (blockRow >= ROWS) blockRow = 0;
        }
    }

    @Override
    public void render(Screen screen) {
        screen.clear(Color.BLACK);

        for (int row = 0; row < ROWS; row++) {
            for (int col = 0; col < COLS; col++) {
                int x = col * CELL;
                int y = row * CELL;
                screen.fillRect(x + 1, y + 1, CELL - 2, CELL - 2, Color.DARK_GRAY);
            }
        }

        int bx = blockCol * CELL;
        int by = blockRow * CELL;
        screen.fillRect(bx + 1, by + 1, CELL - 2, CELL - 2, Color.RED);
    }
}

Java runtime を初回読み込み中…

CheerpJ の JRE (数十 MB) をダウンロードしています。2回目以降はキャッシュから瞬時に立ち上がります。

preparing

About this step

何が新しくなった？

update(double dt) メソッドが登場します。 dt は「前フレームから今フレームまでの経過秒数」。 16ms に一度くらい呼ばれるので、dt は大抵 0.016 前後です。

accumulator という変数に dt をどんどん足していき、合計が 1 秒を超えたタイミングで blockRow++。このパターンは「時間で何かを起こしたい」時の定石です。

update と render の分業

update(dt) — 状態（位置、時間、スコアなど）を更新
render(screen) — 現在の状態をそのまま絵にする
render は状態を変えてはいけない — 見た目の責務だけを持つ

動かしてみる

Run Java を押すと、ブロックが1秒ごとに1マスずつ下に動いていきます。下に着いたら上に戻る（ループ）のは今だけの挙動 — Step 5 で「床に着いたら止まる」判定を入れます。

試しにコードの DROP_SECONDS = 1.0 を 0.25 に変えれば、4倍速の落下になります（エディタ実装後に試せるようになります）。