キミも未来のトビラをひらこう!!

公式LINEで相談♪

programmingSchool

できたを育むプログラミングスクール

レッスン14まるばつゲームを作ろう!

チャプター01はじめに

このチャプターのポイント

2人対戦ゲームである、OXゲームをつくろう

・OXゲームをつくろう

今回も新しいプロジェクトを作っていくよ。 今回は2人対戦ゲームを作っていくよ! みんなもやったことのある、まるばつゲームだよ。 それでは、早速レッスンを進めていこう。

まず、まるばつゲームについて説明するね。 別名三目並べとも呼ばれ、まるとばつを交互に描いていく2人対戦ゲームだよ。 縦、横、斜めのどれかがまるかばつで揃ったら勝ちがきまるよ。 まるとばつをかくところが9箇所、それぞれ左上から右下にむかって、マス1~マス9があるよ。

Catは、まるとばつの順番や、勝者の判定をする役をしてもらうよ。 自分と相手の順番を制御すること、勝ち、負けを判定するためにリストを操作することがポイントだよ。 実際に作っていこう!

チャプター02背景・スプライトを設定しよう

このチャプターのポイント

背景とスプライトの初期状態を設定しよう

・背景・スプライトの設定を確認しよう

このチャプターでは、背景とスプライトの設定を確認していくよ。 背景Catマス1があればOKだよ。 マスのスプライトについて説明するね。コスチュームがぜんぶで3つあるよ。 それぞれ「なし」「まる」「ばつ」という名前であることを確認してね。 つぎに、スプライトの見た目や位置を整えていくよ。

コスチュームが全部で3つあるか確認しよう。 マスの大きさは50に設定しよう!

グリーンフラッグがクリックされたときのマス1の状態を作るよ。

隠すブロックで見えないようにした上で、x座標を-88、y座標を88としているよ。 さらに幽霊の効果を99にする。 ブロックでスプライトを透明にしているよ。

つぎに、コスチュームをなしにするブロックで、まるもばつも描かれていない、白の四角にして表示するブロックで見えるようにしているよ。 幽霊の効果が99なので、見た目上はみえないけど存在はしているよ。

ここまでできたら、スプライトを複製していこう。 そのときに座標を変更することをわすれないでね。

マス1をコピーして マス2マス3マス4マス5 マス6マス7マス8マス9 を作る

マス2のスプライトを選択して、 動きの中にある[x座標を~、y座標を~にする]ブロックの数字をx座標を0、y座標を88にするにしてクリック

③あとはマス3~マス9を以下の座標にしていく。

  • マス3 →x座標を88、y座標を88にする
  • マス4 →x座標を-88、y座標を0にする
  • マス5 →x座標を0、y座標を0にする
  • マス6 →x座標を88、y座標を0にする
  • マス7 →x座標を-88、y座標を-88にする
  • マス8 →x座標を0、y座標を-88にする
  • マス9 →x座標を88、y座標を-88にする

Catの大きさと位置も調整しておこう。

ここまで、完成したら動作を確認してみよう! CatマスがきれきれいにならんでいればOKだよ。 さあ!ここまで、みんなの画面でもやってみよう!

チャプター03まるとばつを描けるようにしよう

このチャプターのポイント

変数を用いて、まるとばつを書き分ける機能をつくろう

・順番を示す変数ターンをつくろう

このチャプターでは、まるとばつが交互に描けるようにしていくよ! ターンという変数で、[まるの番]なのか、[ばつの番]なのかを判定して、それに応じてコスチュームを変更するというプログラムになっているよ。 最初がまるかばつかも選べるようにしていこう。 まずは、まるとばつ、どちらから始めるかをきめるスクリプトをつくっていこう。

まるの番やばつの番は常に変わるから変数を作ろう。 変数名は「ターン」としておこう! 値は、「まる」や「ばつ」となるよ。 変数がつくれたら、実際にブロックをつくっていくよ。

クリックされたときに、まるやばつが描けるようにしていくね。 マス1を選んで設定していこう。

クリックされたときに幽霊、つまり透明の効果を0にして、見えるようにする。 続けて、コスチュームを今のターンに変えていくという処理になっているよ。

今のターンが「まる」か「ばつ」を判断する監督のような役割が必要だね。 今回はCatに監督の役割をしてもらおう。 Catのスクリプトに変数『ターン』の最初の値をきめるブロックをつくっていくよ。 [~と聞いて待つ]のブロックをつかっていくね。

ここまで完成したら、ターンの変数を表示させて、 動作を確認しよう。 グリーンフラッグを押して、「まる」か「ばつ」を入力し、入力した通りの、 「まる」か「ばつ」を描くことができていればOKだよ。 みんなの画面でもやってみよう。

チャプター04まるとばつを描けるようにしよう2

このチャプターのポイント

ターンの値をまるとばつ交互に変化するようにしよう

・変数の値を交互に変化させよう

このチャプターでは、まるとばつが交互に描けるようにしていくよ! ターンという変数の値によって、まるかばつかを判定できるスクリプトをつくっていくよ。 つまり、ターンの変数を「まる」→「ばつ」→「まる」と交互に変わるようにしよう。 マス1のすでにつくっているスクリプトに変更を加えていくよ。

マス1を選んで、イベントの中の[メッセージ1を送る]を新しいメッセージ「次のターン」を作成しよう。 下のように「次のターン」を送ることにしよう。

Catが、マス1から「次のターン」というメッセージをうけとったら、ターンが「まる」ならターンを「ばつ」にターンが「ばつ」ならターンを「まる」に変えるようにしよう! 制御の中にある[もし~ならでなければ]のブロックをつかえばいいね。

場合分けの条件はどうなるか分かるかな? ターンを「まる」に変更するのは、ターンが「ばつ」のときだね。

これで、つぎのターンをうけとった時に、「ばつ」なら「まる」へ、そうでなければ「ばつ」へと、ターンが順にかわっていく仕組みができたよ。

ここまで完成したら、マス1のこのスプライトがクリックされたときのかたまりを、マス2~9にドラック&ドロップしてね!

ここまで完成できたら動作を確認してみよう。 マス目にまるとばつを交互におくことができていれば完成だよ! みんなの画面でもやってみよう。

チャプター05勝敗判定ができるようにしよう

このチャプターのポイント

マスのコスチュームの状態を把握はあくするリストをつくろう

・勝敗判定の機能をつくろう

このチャプターでは、勝敗を判定できるようにしていくよ。 勝敗を判定するために、Catのスプライトに監督の役割をしてもらうよ。 リストに各マスのコスチュームの状態を記録しておき、マスに何かが描かれる度に、タテヨコナナメ全てを調べるよ。

勝敗は、マスにまるやばつが描かれる度にきまったりきまらなかったりするよね。 状態を表す変数『勝者』をつくろう。 値は全部で3種類、勝者が「あり」か「なし」で、さらに勝者が「あり」は、勝者が「まる」か「ばつ」の値になるね。

マス1~9がどんな状態であるか?も常に変わるね。 変数にしてもいいけど、今回はリストをつかっていくよ。 9つの変数をまとめてグループのように扱えるリスト「盤面ばんめんをつくろう。

データの中にあるリストを作るボタンからつくっていこう。 盤面ばんめんには、マス1~9のコスチュームが何であるかを記録させることにするよ。 グリーンフラッグがクリックされたとき、変数『勝者』は「なし」にリスト「盤面」はすべて「なし」になるようにしておこう。

リストとは変数のいれものだったね。 変数が部屋だとすると、リストはマンションに例えることができたね。 まずは、マンションの部屋を用意していくよ。 今回はリスト「盤面」マス1~9の9つのコスチュームの部屋が必要なんだ。 なしを追加しながら9回繰り返すといいね

これで、グリーンフラッグがクリックされたときに、変数やリストがいつも同じ状態になるね。 変数は最初の値が何になるかに注意するクセをつけておこう。 ここまで完成したら、動作を確認しよう。

もし、変数「勝者」とリスト「盤面」が表示されていなかったら、データの中にある勝者と盤面をチェックして、表示させよう。 グリーンフラッグをおして、変数「勝者」の値が「なし」盤面は全部で9個のリストになり、すべて「なし」の値が入っているようになっていればOKだよ。

チャプター06勝敗判定ができるようにしよう2

このチャプターのポイント

全ての勝敗パターンを常にチェックする処理をつくろう

・勝敗判定の条件を完成させよう

リストができて、準備が整ったので、勝敗判定の機能を作っていくよ。 まずは流れを確認しよう。 タテ、ヨコ、ナナメが、すべて「まる」または「ばつ」になったかどうかを判定する機能をCatのスプライトに作っていくよ。

もし勝敗がきまる状態なら、勝者がターンになれるというブロックを作ろう。

つぎに、勝敗がきまる条件を考えていくよ。 条件は[~かつ~]ブロックを2つ組み合わせて、3つの条件全てを満たすという判定にするよ。

組み合わせると、マス1,2,3が揃っているかどうかの条件は出来上がりだね。

今作ったブロックをコピーして繋げていこう。 1,2,3の部分を 4,5,6、7,8,9に変えてね。 つぎにタテも判定しなければいけないから、1,4,7、2,5,8、3,6,9 仕上げにナナメも判定するために1,5,9、3,5,7に変更しながら縦につなげていこう。

ブロックのかたまりを「勝敗判定」という定義ブロックにしておこう。

勝敗判定が行われる処理の流れをつくっていこう。 マスに何かが描かれる度に、勝敗が判定されればいいね。 処理のタイミングをきめたいので、イベントのブロックをつかっていくよ。 マスに何かが描かれるときに「セットした」というメッセージを送りそれを合図にCatのスプライトが勝敗を判定するようにしよう。

まずはメッセージ「セットした」を作ろう。

これで、勝敗判定の機能は完成だよ。 つぎのチャプターでは、マスからメッセージを送り、機能が動作するように調整していこう! さあ!ここまで、みんなの画面でもやってみよう。

チャプター07勝敗判定ができるようにしよう3

このチャプターのポイント

つくった勝敗判定の機能が動作するようにメッセージを使おう

・勝敗判定の条件を完成させよう

このチャプターでは、勝敗判定が動作するように調整していくよ! マスに何かが描かれるたびに、「セット」というメッセージを送るようにしたから、すでにあるブロックを少し変更していく必要があるよ。

マスに、まるかばつが描かれるたびに「セットした」というメッセージがおくられ、「セットした」というメッセージをうけとった Catが勝敗を判定し、「次のターン」というメッセージを送るようにしていくね。 まずは、マス1のスクリプトを調整していくよ。 「次のターン」を「セットした」に変更してね。

コスチュームをターンにしたあとに、盤面のリストを更新するよ。 変数の中にある[~番目を~で置き換える]というブロックをつかっていくよ。

~で置き換えるの部分の値として変数「ターン」を入れることがポイントだよ。 実は、今のままだと不具合がおこってしまうよ。 たとえば、マス1にまるかばつが描いていて、まるかばつの白い部分をクリックすると、描き変わってしまうよね。 スプライトを操作するときは、どんなときだけなのかをきめて上げなければいけない場合が多いよ。 少し調節していくね。 まるやばつが描けるのは、勝者がきまっていない「なし」のときかつマスのコスチュームが「なし」のときだよね。

制御の中にある[もし~なら]のブロックをつかって制御していくよ。

作ったブロックどうしを組み合わせよう。 これで、マスにまるやばつを描ける条件を作ることができたね。

すでにあるブロックのかたまりに、合体させるよ。

これで完成だね。 完成したら、マス2~9にスクリプトを複製していこうドラッグすればいいだけだよ。

複製したあとに[~番目]の部分を、マスの番号に合わせることと、もともとあったものを削除することを忘れないようにしてね。

マス1~9まで全てまちがいなくできているか、なんども確認しよう! ここまで完成したら、動作を確認しよう。 変数「勝者」を表示させて確認してね。 まるとばつを交互におき、タテヨコナナメのどこか1列が揃い勝者の変数が正しく表示されていればOKだよ。 さあ!ここまで、みんなの画面でもやってみよう。

チャプター08進行状況を表示させよう

このチャプターのポイント

制御のブロックを組み合わせ、ゲームの進行状況を表示させよう

・Catにゲームの状態を言わせる処理をつくろう

このチャプターでは、Catに今どのターンなのか?と勝者がどちらなのか?を言わせる仕組みをつくっていくよ。 ゲームの進行状況は常に表示させたいので、[ずっと~]ブロックをつかっていくことにするよ。

進行状況は、勝者がきまっていないときか、そうでないかで場合をわけたいので、[もし~ならでなければ]のブロックをつかうよ。

勝者がなしの場合の処理は、今のターンの番だねと言わせよう。

演算の中にある[~と~]ブロックは変数や文字をつなげる役割をもつブロックだよ。 勝者がありの場合の処理は、変数「勝者」の勝ちだねと言わせよう。

つくったブロックを組み合わせよう。 これで、ゲームの進行状況は表示させる処理ができたね。

処理が実行されるタイミングは、グリーンフラッグがクリックされたときでいいね。 すでにあるブロックにつなげよう。 動作を確認しよう。 Catが、ターンごとに「~の番だね」と言って、勝敗がきまった時に、正しく勝者を表示することができていればOKだよ。 みんなの画面でもやってみよう。

チャプター09効果音を設定しよう

このチャプターのポイント

効果音を設定することで、よりゲームらしくしよう

・効果音をダウンロードして設定しよう

このチャプターでは、効果音を設定していくよ。 音はゲームの大切な要素になるよ。設定していこう!

マスにまるやばつが描かれたときに音がなるようにしていきたいから[セットしたをうけとったとき]で始まるブロックを変更していくよ。

まずは素材をダウンロードしよう。 音のタブを開いて、[pop]と[clapping]をダウンロードしてね。

マスにまるやばつを描いた、つまりセットしたときに音を鳴らし分けたいよね。 具体的には、勝敗がきまるまでは描いた合図の音[pop]を鳴らして勝敗がきまったときは、[pop]ではなく[clapping]を鳴らすとしていこう。

つぎに、場合分けの条件を考えていこう。 勝者がなしかありかで分ければいいよね!

場合分けができるブロックが組み立てられたら、セットしたをうけとったときブロックのかたまりに組み込んでいこう。

ここまで完成したら、動作を確認しよう。 マスにまるやばつを描くたびに[pop]の音がなり、勝者がきまったときには[clapping]の音が鳴ればOKだよ! さあ!ここまで、みんなの画面でもやってみよう。

チャプター10最後に

・まとめ

最後に、このレッスンで学習したことをおさらいしてみよう。 まるばつのマスのコスチュームをリストでまとめることによって、勝敗の判定をさせやすくなったね。 また、各マスと監督役のキャットの間で、メッセージをおくり合うことで処理がすすんでいったね。 毎回変わるターンという変数を用いたことで、順番がまるからはじまっても、 ばつからはじまっても同じ処理でゲームを進行させることができたことも大きなポイントだよ。 単純だけど、とても大切なことが分かるゲームだったね。 しっかり復習をして、今後作っていくゲームでも活用していこう!