Step 01 of 12
盤面を描く
画面に 8 × 8 の緑の盤面を並べます。オセロの土台。 Tetris と違って、このコースでは TODO 1 つあたりで書く行数が少し多くなります。 まずは 2 重ループ全体を自分で書いてみましょう。
About this step
何が起きている？
render(Screen screen) は画面を描き直すたびに呼ばれるメソッドです。
Step 1 ではまず screen.clear で画面全体を塗り、2 重ループで
8 × 8 個のマスを 緑色 + 枠線で描きます。
各マスの左上座標は col * CELL、row * CELL。
fillRect でマス本体を塗り、strokeRect で枠線を上から重ねると
格子模様ができあがります。
Tetris からの変更点
Tetris では int x = TODO; のように「式」1 つを埋める形でしたが、
Othello では TODO が 1 つのブロック（= いくつかの文のまとまり）になります。
手を動かす量は少し増え、代わりに 細かい誘導が減ります。
詰まったら「ヒント」ボタンを押すと、段階的にヒントが開きます。 どうしても進まなければ「解答例」で答えを見られます。
使っているもの
Game— 継承用の親クラス。renderを実装する。Screen— 描画用。fillRect,strokeRect,clear。Color— 色の定数。BOARD,BOARD_LINE,DARK_GRAYなど。static final int— 定数の書き方。COLS,ROWS,CELL。
動かしてみる
右上の Run Java を押すと、ブラウザ内で Java が動き出します。 初回は CheerpJ のダウンロードに 10〜30 秒かかります。 緑の 8 × 8 の盤面が出れば成功。