Step 01 of 12

盤面を描く

画面に 10列 × 20行のグリッドを並べます。テトリスの土台になる盤面です。ここで 2次元ループと Screen.fillRect の使い方に慣れます。

MyTetris.java Read-only · editor is coming

import dev.yasuda.tetris.*;

/**
 * Step 1 — Draw the board.
 *
 * Goal: a 10 x 20 grid of empty dark cells.
 * You'll learn: 2D loops, using Screen.fillRect, and constants.
 */
public class MyTetris extends Game {

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

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

    @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);
            }
        }
    }
}

Java runtime を初回読み込み中…

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

preparing

About this step

何が起きている？

render(Screen screen) は、画面を描き直すたびに呼ばれるメソッドです。この Step 1 では、まず screen.clear(Color.BLACK) で画面全体を黒で塗り、その上に 2 重ループで 10 × 20 個のセルを暗いグレーで並べています。

CELL = 24 は 1 セルの大きさ。col * CELL と row * CELL で左上の座標を計算し、+1 / -2 の余白で隣のセルとの隙間を作っています。

使っているもの

Game — この Step で継承している親クラス。render を実装する。
Screen — 描画用。clear と fillRect を使う。
Color — 色の定数。BLACK, DARK_GRAY など。
static final int — 変わらない値の定数。COLS, ROWS, CELL。

動かしてみる

右上の Run Java を押すと、ブラウザ内で Java が動き出します。初回はランタイム（CheerpJ）のダウンロードに 10〜30 秒かかります。 2回目以降はブラウザキャッシュから即起動します。

グリッドが表示されれば成功です。次のステップでは、このグリッドの中に ブロックを1つ置きます。

エディタはまだ読み取り専用です

現在のページは「実行が動くか」の動作確認版です。次のアップデートで、コードを書き換えて即座に実行できるエディタに差し替えます。それまでは、このページで Java が本当にブラウザで動くことを確かめてください。