オセロゲームの作り方(第一回 盤面の状態をデータで表現しよう)

まずは、オセロゲームを作る第一歩としてオセロの盤面をデータとして表現することを考えてみましょう。ワンステップずつ、着実にやっていきます。

オセロの盤面を`データ`で表現する

オセロの盤面である 8 x 8 のマスのそれぞれのマスの「状態」は

1. 何もない
2. 白い石がある
3. 黒い石がある

の三つの状態だけです。
ということは一つのマスの状態を表すのに2bitあれば十分ですね。

// 00:　何もない, 01: 白, 10: 黒 
// 初期配置をデータで表してみると・・・？

00 00 00 00 00 00 00 00 
00 00 00 00 00 00 00 00
00 00 00 00 00 00 00 00
00 00 00 01 10 00 00 00
00 00 00 10 01 00 00 00
00 00 00 00 00 00 00 00
00 00 00 00 00 00 00 00
00 00 00 00 00 00 00 00

上記は下記の初期配置を表現しています。画像のような感じです。

盤面は、二次元配列で表せそうです。これで 8x8 の盤面を表現できます。何列の何番目か数字で指定できて便利です。

実際にコンソールで試してみましょう。

// 0:なし, 1:白, 2:黒
// 面倒だったので10進法で表現してます

var playBoard = [
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,1,2,0,0,0],
  [0,0,0,2,1,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0]
] 

盤面は二次元の配列で表現できる

これに気付けるかがオセロゲームを作る際の大きなポイントになりそうです。 昔のRPGの平面のマップもそうですね。

木、草原、山、城、塔、海の画像を下の配列にしたがって並べるだけです。
こんな風になります。

// 草原=1, 木=2, 山=3, 城=4, 勇者=5, 僧侶=6, 魔法使い=7, 戦士=8
// 本当はもっと広いけど中央だけ切り取っています
// 城は正確には「城右上」「城左上」「城右下」「城左下」の４ブロックです

1,1,1,1,1,1,1,1
1,1,1,1,1,1,1,1
1,1,8,4,4,1,1,1
1,1,7,4,4,1,1,1
1,1,6,1,1,1,1,1
1,1,5,1,1,1,1,1
1,1,1,1,1,1,1,1
1,1,1,1,2,2,2,2

いかがですか？イメージできるでしょうか。

盤面の状態を変えたい場合

// 0:なし, 1:白, 2:黒
// 配列は0から始まるので注意 -1 する

// 5列目の6番目に白い石をおく
playBoard[4][5] = 1
// 5列目の7番目に黒い石をおく
playBoard[4][6] = 2

これで盤面の好きな箇所に石を置くとこまでできました。

ただ、現状は好きな場所に石が置けてしまいますし、すでに置いた石を無理やり動かすこともできてしまうので良くありません。

次回は、指定したマスが石を置ける場所か判定する処理について考えてみたいと思います。

第二回はこちらから！