【講座?】CoRを触ってみる15~三目並べを作る3~【自分用メモ?】

投稿者:Material 185033 3 mini 光楼(114) 投稿日:2017/04/29 14:28

【講座?】CoRを触ってみる14~三目並べを作る2~【自分用メモ?】←前回

今度はマリカ8DX購入。

#このブログの情報は2017年4月29日現在のものです。今後変更になる可能性があります。

前回の続きです。
game.rbを開いてね!

前回はクリックしたマスがどこかを求める処理を実装しました。
次はクリックしたマスに〇を置けるようにしましょう!

配列で盤面を管理する

まず、どこのマスがどんな状態かを管理する必要があるため、配列を使います。
配列名はboard_dataでいきます。
[]にマス番号を入れたらそのマスの状態を知れるようにします。

0だったら空白、1だったら〇が、-1だったら×が入っているということにします。

最初は全て空白ですので、0で埋めます。
#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス
  ##### ↓追加分↓  #####
  board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
  ##### ↑追加分↑  #####
#後略#

次はクリックしたマスに1を入れましょう。
#前略#
  update do
    #クリックまたはタップしたか
    if pointer.down?
      column = ((pointer.x - board_left_position) / board_size).floor #列を求める
      paragraph = ((pointer.y - board_up_position) / board_size).floor #段を求める

      #列が0~2、段も0~2の範囲か
      if (0..2) === column && (0..2) === paragraph
        block = column + paragraph * 3 #列・段からマス番号を求める
        ##### ↓追加分↓  #####
        if board_data[block] == 0 #選択したマスが空白か
          board_data[block] = 1
          debug_log "#{block}番のマスをクリック\n #{board_data}"
        end
        ##### ↑追加分↑  #####
      end
    end
  end
#後略#

マスが空白の時のみ〇を置けるようにしています。

描画

さて、実際に〇を配置しましょう。
画像はもうクリップしていただいてると思います。
してない方は戻って戻って。

描画の処理はせっかくなのでrender内に書こうと思います。

定義

#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス

  ##### ↓追加分↓  #####
  circle_sprite = nil #〇
  ##### ↑追加分↑  #####

  board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
#後略#

#前略#
  preload do 
    #背景素材読込み
    image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11
    image 'マス画像', id: 319591

    ##### ↓追加分↓  #####
    image '〇画像', id: 202007
    ##### ↑追加分↑  #####
  end
#後略#

#前略#
#=====定義=====#
#スプライト
sprite 'メニュー背景' do
  image 'メニュー背景画像'
  origin :left_top

  animation '通常アニメ', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true
end

sprite 'マス' do
  image 'マス画像'
end

##### ↓追加分↓  #####
sprite '〇' do
  image '〇画像'
  origin :left_top
end
##### ↑追加分↑  #####

原点は左上にしました。

描画判断

どこに何を描画するかは盤面情報の変化を見て決めます。

簡単に言うと、変化したとこだけ描画する。

さて問題は変化したかをどう判断するかなんですが……。
ターン開始前の盤面情報とターン終了後を比較することにします。

そのためにはターン開始前の盤面情報を記録する配列が必要です。
作りましょう。
#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス
  circle_sprite = nil #〇
  board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×

  ##### ↓追加分↓  #####
  comparison_board_data = board_data.dup #盤面変化判定用配列
  ##### ↑追加分↑  #####
#後略#

ターン開始前の盤面を記録させます。
#前略#
  update do
    ##### ↓追加分↓  #####
    comparison_board_data = board_data.dup #配列コピー
    ##### ↑追加分↑  #####

    #クリックまたはタップしたか
    if pointer.down?
#後略#

さて、配列を複製する処理ですが、なぜ
comparison_board_data = board_data

ではなく、
comparison_board_data = board_data.dup

なのか。
実は前者のやり方だとboard_dataを変化させたとき、comparison_board_dataも一緒に変化してしまうんです。
名前は違うのに中身は同じという厄介な事になります。

後者のように.dupを付ければ複製が出来ます。
ただこの方法、ドキュメントに書いてないんだけど……大丈夫だよね?ね?

続いて変化したかの判定です。
#前略#
  render do
    ##### ↓追加分↓  #####
    if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
      
    end
    ##### ↑追加分↑  #####
  end
#後略#

どこが変化したか調べます。
#前略#
  render do
    if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら

      ##### ↓追加分↓  #####
      #違うところを探す
      9.times do |i| #9回ループ
        if board_data[i] != comparison_board_data[i]
          debug_log "#{i}番のマスが違う"
        end
      end
      ##### ↑追加分↑  #####

    end
  end
#後略#

9.times do |i| ~ endは9回ループさせる処理です。数字を変えるとループ回数も変わります。
iには0~8の数が順に入ります。

〇配置

さぁ、実際に配置させましょう!
ポジションはマス番号をもとに計算します。
X座標:board_left_position + マス番号 % 3 * board_size
Y座標:board_up_position + (マス番号 / 3).floor * board_size
  render do
    if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
      #違うところを探す
      9.times do |i| #9回ループ
        if board_data[i] != comparison_board_data[i]

          ##### ↓追加分↓  #####
          circle_sprite = put_sprite '〇' do
            position board_left_position + i % 3 * board_size, board_up_position + (i / 3).floor * board_size
            scale board_size / 150, board_size / 150
            frame_index 0
          end
          ##### ↑追加分↑  #####

        end
      end
    end
  end

〇を何個も配置するのに変数circle_spriteは配列じゃなくていいのだろうかと思ったけど、表示するだけなら大丈夫そうです。
個別にモーションやらアニメーションを設定したいなら配列にした方が良いと思います。

scaleでは、マスのサイズが125*125なのに〇画像が150*150なので、拡大率を計算させています。
画像を変えたい方は150という数値を変数にすることをお勧めします。

さて今回はここまでです。
次回は敵が×を置く処理を実装したいので、色々書き換えると思います。
それでは。

全体像
#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス
  circle_sprite = nil #〇
  board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
  comparison_board_data = board_data.dup #盤面変化判定用配列

  #定数定義
  screen_width = 800 #ゲーム画面幅
  screen_high = 450 #ゲーム画面高
  board_size = 125 #盤面1マス当たりのサイズ

  #定数計算
  board_left_position = (screen_width / 2 - (board_size / 2 + board_size)).floor #盤面一番左の位置
  board_up_position = (screen_high / 2 - (board_size / 2 + board_size)).floor #盤面一番上の位置

  #デバッグ
  debug_log "ソースファイル読込み完了!"

  preload do 
    #背景素材読込み
    image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11
    image 'マス画像', id: 319591
    image '〇画像', id: 202007
  end

  create do
    #背景画像配置
    bg_sprite = put_sprite 'メニュー背景' do
      position 0, 450
      scale 2.0, 2.0
      angle -90
      frame_index 0
    end

    #マス画像配置
    mesh_sprite = put_sprite 'マス' do
      position 800 / 2, 450 / 2
      frame_index 0
    end

    #背景アニメ開始
    bg_sprite.start_animation('通常アニメ')
  end

  update do
    comparison_board_data = board_data.dup #配列コピー

    #クリックまたはタップしたか
    if pointer.down?
      column = ((pointer.x - board_left_position) / board_size).floor #列を求める
      paragraph = ((pointer.y - board_up_position) / board_size).floor #段を求める

      #列が0~2、段も0~2の範囲か
      if (0..2) === column && (0..2) === paragraph
        block = column + paragraph * 3 #列・段からマス番号を求める
        if board_data[block] == 0 #選択したマスが空白か
          board_data[block] = 1
          debug_log "#{block}番のマスをクリック\n #{board_data}\n #{comparison_board_data}"
        end
      end
    end
  end

  render do
    if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
      #違うところを探す
      9.times do |i| #9回ループ
        if board_data[i] != comparison_board_data[i]
          #〇配置
          circle_sprite = put_sprite '〇' do
            position board_left_position + i % 3 * board_size, board_up_position + (i / 3).floor * board_size
            scale board_size / 150, board_size / 150
            frame_index 0
          end
        end
      end
    end
  end
end

#シーンスタート
start_scene 'game'


#=====定義=====#
#スプライト
sprite 'メニュー背景' do
  image 'メニュー背景画像'
  origin :left_top

  animation '通常アニメ', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true
end

sprite 'マス' do
  image 'マス画像'
end

sprite '〇' do
  image '〇画像'
  origin :left_top
end


次回→【講座?】CoRを触ってみる16~三目並べを作る4~【自分用メモ?】

コメントする

コメントするには、ログインする必要があります。

コメント一覧

コメントはありません。