Course · 12 steps

Build a Tetris
in pure Java.

ブラウザの中で Java だけを書いて、自分のテトリスを作り上げる全12ステップ。 毎ステップで画面が動き、最後には遊べるゲームが完成します。

Language
Java 17
Runtime
Browser (CheerpJ)
Level
他言語を少しかじった人
Estimated
10–15 hours

Step 1〜4 が公開中(Step 4 で初のキー入力)。ブラウザでそのまま Java が動きます。

Who this is for

他言語かじった人の
"応用編"

会社や学校の Java 研修を終えたばかりで、文法はわかるけど応用で手が止まる — そんな人のためのコースです。他の言語(Python, JavaScript, C など)を少し触ったことがあれば、 変数・if・for・関数・クラスの基本がわかっていれば十分。

作るのは、ルールが明快で、見た目が派手で、 研修で習う文法が全部ちょうど1回ずつ使われる題材 — テトリス。 ステップごとに画面で何かが動くので、自分が今どこまで作ったかが 常に目に見えます。

What you'll build

これが、あなたの Java だけで動く。

SCORE 12,400

モック画像です。ステップ12到達時、
これが実際に Java で動きます。

How it works

学習者は Java だけ書く。

HTML も CSS も JavaScript も触りません。教材側が用意する Game クラスを継承し、4つのメソッドを埋めていくだけ。 画面描画・キー入力・時間管理はすべてフレームワークが裏で処理します。

ブラウザ内で Java バイトコードを実行する CheerpJ を使うので、インストール不要・サーバ不要。URL を開いたらその場で書き始められます。

Java MyTetris.java
public class MyTetris extends Game {

    int[][] board = new int[20][10];

    @Override
    public void setup() {
        // 最初に1回だけ呼ばれる
    }

    @Override
    public void update(double dt) {
        // 毎フレーム、ゲームの状態を進める
    }

    @Override
    public void render(Screen screen) {
        screen.clear(Color.BLACK);
        screen.fillRect(x, y, 30, 30, Color.RED);
    }

    @Override
    public void onKey(Key key) {
        if (key == Key.LEFT)  movePiece(-1);
        if (key == Key.RIGHT) movePiece(1);
    }
}

Curriculum

全12ステップ。
毎回、画面が動く。

  1. Step 01

    盤面を描く

    10×20 のグリッドが画面に出る。

    2次元配列 · for の二重ループ

  2. Step 02

    ブロックを1つ置く

    中央に赤い四角が表示される。

    フィールド · メソッド分割

  3. Step 03

    自由落下

    ブロックが1秒で1マス落ちる。

    フレーム経過 · dt · 状態変数

  4. Step 04

    左右キー操作

    矢印キーで動かせる。

    switch · enum 比較

  5. Step 05

    壁と床の衝突判定

    壁や床を突き抜けなくなる。

    boolean 返すメソッド · 境界条件

  6. Step 06

    ブロックの固定

    着地したブロックが積み上がる。

    配列への書き込み · 状態遷移

  7. Step 07

    7種類のミノ

    I, O, T, S, Z, L, J が順に出る。

    enum + フィールド · 静的配列

  8. Step 08

    ランダムに出す

    次のミノがランダム抽選される。

    java.util.Random · Queue

  9. Step 09

    回転

    R キーでミノが回る。

    2次元配列の転置

  10. Step 10

    ライン消去

    1行そろったら光って消える。

    配列走査 · シフト · ループ中削除の罠

  11. Step 11

    スコアとレベル

    点数が増え、だんだん速くなる。

    状態管理 · 計算式

  12. Step 12

    ゲームオーバーとリスタート

    積み切ったら終了、R で再開。

    状態リセット · 例外 or 状態遷移

The API

用意されているクラス。

学習者が使う Java API は、驚くほど小さいです。 これ以外は全部「普通の Java」— int, String, if, for, class, new, 配列、List、例外… 研修で習う文法がそのまま武器になります。

Game
継承して使う親クラス。setup / update / render / onKey の4つを実装する。
Screen
fillRect, strokeRect, text, clear。描画の全て。
Color
RED, BLUE, ... の定数。Color.rgb(r, g, b) で自作も可能。
Key (enum)
LEFT, RIGHT, UP, DOWN, SPACE, R, ENTER ほか。
Sound
Sound.play("beep")。内蔵効果音と自作波形。
Storage
ハイスコアの保存用。Storage.putInt / Storage.getInt

Get started

始めましょうか。

環境構築は不要 — リンクを開いて「Run Java」を押すだけ。 初回は Java ランタイム(CheerpJ)のダウンロードで 10〜30 秒ほどかかります。 2回目以降はキャッシュから瞬時に立ち上がります。

Step 01 · 盤面を描く

Step 02 以降は順次公開