Step 02 of 12

初期配置

オセロは中央 4 マスに黒白 2 石ずつ置いて始まります。盤面を int[][] board で持ち、setup() で初期値を入れ、 render() 内で円として石を描きます。

MyOthello.java

import dev.yasuda.othello.*;

/**
 * Step 02 — 中央 4 マスに初期配置を置く。
 *
 * 目標: 盤面配列 board に初期配置を記録し、render で石を描く。
 *       オセロの初期配置は中央 4 マス:
 *         (col=3, row=3) = 白
 *         (col=4, row=4) = 白
 *         (col=4, row=3) = 黒
 *         (col=3, row=4) = 黒
 *
 * ヒント: 石の代入は board[row][col] = 値 の順（行が先）。
 */
public class MyOthello extends Game {

static final int COLS = 8;
    static final int ROWS = 8;
    static final int CELL = 50;

static final int EMPTY = 0;
    static final int BLACK = 1;
    static final int WHITE = 2;

int[][] board = new int[ROWS][COLS];

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

@Override
    public void setup() {
        // TODO: 中央 4 マスに初期配置を入れる。
        //       (3,3) と (4,4) は WHITE、(4,3) と (3,4) は BLACK。
        TODO;
    }

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

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, y, CELL, CELL, Color.BOARD);
                screen.strokeRect(x, y, CELL, CELL, Color.BOARD_LINE);

// TODO: board[row][col] が EMPTY でなければ石を描く。
                //       中心は (x + CELL/2, y + CELL/2)、半径は CELL/2 - 4。
                //       BLACK なら Color.BLACK、WHITE なら Color.WHITE。
                //       使うメソッドは screen.fillCircle(cx, cy, radius, color)。
                TODO;
            }
        }
    }
}

Java runtime を初回読み込み中…

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

preparing

About this step

setup() って何？

setup() は「ゲーム開始時に 1 回だけ呼ばれる」メソッド。 render() が毎フレーム呼ばれるのに対し、こちらは初期化用です。ここで盤面の 初期状態を作ります。

盤面は int[][] board という 2 次元配列で持ちます。各マスは EMPTY (0) / BLACK (1) / WHITE (2) のいずれか。「数字で状態を表す」のはゲームプログラミングでよく使う型です。

なぜ board[row][col]？

「行（row）が先、列（col）が後」と覚えます。行列でも画像でも同じ流儀。逆にしても動くコードは書けますが、後で合法手判定や flip を書くとき混乱します。ここで揃えておくと後が楽。

fillCircle の使い方

このコースで初登場の API。 screen.fillCircle(cx, cy, radius, color)。左上の座標ではなく中心の座標を渡します。半径を CELL/2 - 4 にすると、マスの中にぴったり収まる石になります。

動かしてみる

Run Java を押して、中央 4 マスに 黒 2 つ、白 2 つが置かれていれば成功。右上が白、左下が白、左上と右下が黒 … ではなく、斜めに同じ色が並ぶのがオセロの正しい初期配置です。