Step 03 of 12

カーソル操作

矢印キーでカーソルを動かし、今どこを選んでいるかを HIGHLIGHT 色の太枠で示します。これ以降、プレイヤーは必ずこのカーソル経由で石を置きます。

MyOthello.java

import dev.yasuda.othello.*;

/**
 * Step 03 — カーソル操作。
 *
 * 目標: 矢印キーで盤面上のカーソルを動かし、その位置を HIGHLIGHT 色の
 *       枠で示す。盤面の端で止まること（はみ出さない）。
 */
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];

int cursorCol = 3;
    int cursorRow = 3;

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

@Override
    public void setup() {
        board[3][3] = WHITE;
        board[4][4] = WHITE;
        board[3][4] = BLACK;
        board[4][3] = BLACK;
    }

@Override
    public void onKey(Key key) {
        // TODO: LEFT/RIGHT/UP/DOWN に応じて cursorCol / cursorRow を更新する。
        //       ただし 0 未満や COLS/ROWS 以上にはならないようにする。
        //       参考: if (key == Key.LEFT && cursorCol > 0) cursorCol--;
        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);

int stone = board[row][col];
                if (stone != EMPTY) {
                    Color c = (stone == BLACK) ? Color.BLACK : Color.WHITE;
                    screen.fillCircle(x + CELL / 2, y + CELL / 2, CELL / 2 - 4, c);
                }
            }
        }

// TODO: カーソル位置 (cursorCol, cursorRow) のマスに HIGHLIGHT 色の
        //       枠を描く。strokeRect は 1px 線なので、少しずらしながら
        //       2〜3 本重ねて「太い枠」に見せる。
        //       左上座標は (cursorCol * CELL, cursorRow * CELL)。
        TODO;
    }
}

Java runtime を初回読み込み中…

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

preparing

About this step

onKey の書き方

onKey(Key key) は、キーが押されたときに 1 回だけ呼ばれます。中身は「どのキーか」「動ける範囲か」を && で組み合わせて if を並べるだけ。4 方向それぞれに 1 行書きます。

境界チェックの重要性

cursorCol が負の値や 8 以上になると、次の Step 以降で board[row][col] にアクセスしたときに ArrayIndexOutOfBoundsException で落ちます。端で動きを止める条件 (cursorCol > 0 / cursorCol < COLS - 1) をここで仕込むこと。

太い枠の作り方

strokeRect は線幅 1px 固定です。太く見せたいときは、位置とサイズを 1 ピクセルずつずらしながら 2〜3 本重ねるのが定番。 Canvas 系 API で普通に使うテクニックです。