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

programmingSchool

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

レッスン16じゃんけんゲームを作ろう!

チャプター01はじめに

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

じゃんけんゲームを作ろう

・ゲームに必要な機能を整理しよう

今回はじゃんけんゲームを作っていくよ。じゃんけんの勝ち手に応じて、CatとDog1が動くよ。 コンピューター対戦ゲームなので、1人でも楽しく遊べるよ!

今回つくるじゃんけんゲームは大きく分けて2つの流れがあるよ。 1つ目は、じゃんけんをして勝敗がきまる。 2つ目は、勝ち手に応じて階段を登る。 たとえば、グーで勝つと3段登り、チョキかパーで勝つと6段登るというものだよ。 ゲームで登場する様々な変数を扱えるようになることと、移り変わるシーンをうまくつなぎ合わせられるようになることが、今回の目標だよ。 では、実際に作っていこう!

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

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

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

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

背景とスプライトの設定を確認していくよ。 背景とCat、Dog1、MANとCOMの手のスプライトがあればOKだよ。 MANやCOMのスプライト3つのコスチュームが設定されていること、そして、グー、チョキ、パーの順であることを確認しておこう。

つぎに、スプライトの見た目や位置を整えていくよ。 Catの大きさとグリーンフラッグをクリックしたときの大きさと位置をきめるね。

Dog1の大きさとグリーンフラッグをクリックしたときの大きさと位置をきめるね。

Dog1についてはに向いているようにしよう。 向きの数字をクリックして、向きを-90度にしてね。 MANつまり、自分のじゃんけんの手の大きさとグリーンフラッグをクリックしたときの大きさと位置をきめるね。

COMつまり、コンピューターのじゃんけんの手の大きさとグリーンフラッグをクリックしたときの大きさと位置をきめるね。 ここまで、完成したら動作を確認してみよう! それぞれのスプライトがきれいに並んでいればOKだよ。 さあ!ここまで、みんなの画面でもやってみよう!

チャプター03出し手を決められるようにしよう

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

制御ブロックを用いて、出し手を変数と対応させよう

・ゲームに必要な機能を整理しよう

このチャプターでは、じゃんけんの手が出せるようにしていくよ。 MAN、つまり自分の手については、キーに応じてグー、チョキ、パーが出し分けられるようにしよう。 gを押したら、グーcを押したら、チョキpを押したら、パーというスクリプトを、作っていこう!

まずは、CatのMANが、どの手を出すのかきめるところまでつくっていくね。 まずは、[gのキーが押された]ときの条件と処理をつくるよ。

つぎに、制御の中に入るブロックを考えていこう! 自分の手はグーやチョキ、パーと変化するから変数を作るよ。 変数「player_hand」を作ろう。 変数「player_hand」グーなら「1」チョキなら「2」パーなら「3」という値とするよ。 つぎに変数「シーン」を作ろう。 今回のゲームでは、手を決める前の「考え中」や、出す手を「決定」する、勝敗が判定されたあとの「登る」という流れで状態が変化していくよね。 ゲームの状態を表す変数「シーン」を作るよ。

つぎに、[gが押された]ならグー、値は「1」、そして手が決まったという状態「シーン」「決定」になるようにしておこう。

gが押された]ときにMANの手もコスチュームも連動させよう。 スプライト同士を連動させるときに使うのが、メッセージだよ! イベントの中にある[~を送る]ブロックをつかってguを送ることにしよう。

チョキの場合もつくっていこう。 まずは、スクリプトの複製をしてね。

スクリプトを複製したら、変更するのをわすれないでね。

パーの場合も同じように複製してね。

変更箇所へんこうかしょが正しいかどうか、よく確かめてね。 つくった3つのブロックをつないでおこう。

これでg,c,pのキーに対応して、グー、チョキ、パーをきめることができるようになったよ。 ここまで完成したら、正しく動いているか確認しよう。 制御のなかにある[ずっと~]のブロックと組み合わせよう。

変数の中にある変数「player_hand」を表示させて確認していくよ。 グリーンフラッグを押し、g,c,pに応じて「player_hand」の値が1,2,3と変わればOKだよ。 動作の確認がおわったら、ブロックを元に戻しておこう。

チャプター04ゲームの流れを整理しよう

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

ゲームの状態を表す変数シーンを理解しよう

・ゲームの状態を表す変数を活用しよう

このチャプターでは、このあとプログラミングで大事な、状態ときっかけについて説明していくね。 まず、ゲームの状態について説明するよ。 今回のゲームでは「考え中」「決定」「登る」という状態を設けているんだ。

具体的には

  1. じゃんけんの出す手を決める前に「考え中」という状態
  2. じゃんけんの勝敗が判定される「決定」した状態
  3. 勝敗がついた場合は勝った手に応じてスプライトが「登る」という状態

状態に名前をつけ、ゲームの流れをうまくつくっていこう。

Catのスクリプトにブロックを作っていこう。 「考え中」の間は、[g,c,pが押されると]メッセージを送るという処理をつくっていくよ。 制御の中にある[~まで繰り返す]ブロックをつかっていることがポイントだよ。

もう少し詳しく説明するね。 [~まで繰り返す]ブロックとシーン=決定ブロックを組み合わせることで、出す手をきめるまでの処理をつくることができるよ。 例えば、MANのスプライトには、コスチュームをグー、チョキ、パーと変化させる仕組み、Catのスプライトには、前のチャプターで作った出す手を決める仕組みだよ。

Catのブロックに、すでに作ってあるブロックもし[gキーが押された]のかたまりを組み合わせていこう。 つくったブロックが始まるきっかけが必要だね。

今回は、メッセージをつかっていこう。 グリーンフラッグが押されて、startというメッセージが送られると、CatとMANのスプライトのスクリプトの処理がはじまるようにするね。 startというメッセージをつくろう。 まずは、[startを受け取ったとき]Catが出す手を決められるようにしていくよ。 つくったブロックにstartを受け取ったときのブロックをつなげよう。

仕上げに、startを送るのは、 いつも通り監督役のCatだね。 イベントの中にある[~を送る]ブロックをつかうよ! ついでに、変数「シーン」を初期の状態「考え中」になるようにしておこう!

ここまで、長かったけど動作を確認してみよう! グリーンフラッグを押して、gを押すと「player_hand」が(1)に変わること、 さらに、「シーン」「登る」に変わることを確認できたらOKだよ。 みんなの画面でもやってみよう!

チャプター05見た目をランダムに変化させよう

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

出し手の変数と、コスチューム番号の仕組みを理解しよう

・コスチュームを乱数ブロックで変化させよう

このチャプターでは、guやchoki、paのメッセージとMANのスプライトのコスチュームをうまく連動させていくね。 Catから、送られるまで、つまり「考え中」のときはランダムで手が表示され、送られてきたメッセージを受けて、MANのスプライトのコスチュームを変化させるという流れになるよ。

まず、シーンが「考え中」から「決定」になるまでは、MANのコスチュームがランダムで変わるようにしていこう。

コスチュームをランダムに変化させるためには、演算の中にある[~から~までの乱数]ブロックと、見た目の中にある[コチュームを~にする]ブロックを組み合わせればいいよ。

つくったブロック同士を組み合わせよう。また、このブロックのかたまりが処理されるのは、startを受け取ったときだね。 コスチューム番号について補足で説明しておくね。 コスチュームには、番号と名前がついているよ。

今回は、[~から~までの乱数]ブロックでコスチュームの番号を指定しているんだね。 番号だと分かりにくいけど、数字として処理することができるのは便利だね!覚えておこう! さらに、受け取ったメッセージごとにコスチュームを変更するようにしよう。

ここまで完成したら、動作を確認してみよう! グリーンフラッグを押すと、MANのスプライトは高速でコスチュームが変化し、 g,c,pのキーを押すとgならグーcならチョキpならパーに変化すればOKだよ。 さあ!ここまで、みんなの画面でもやってみよう!

チャプター06コンピューターが手を出せるようにしよう

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

コンピューターの手を乱数で決められるようにしよう

・コスチュームを乱数ブロックで変化させよう

このチャプターでは、COMのスプライトの動きを設定していくよ。 まずは処理の流れを考えるね。

メッセージ「start」を受け取ったらプログラムが動き始めCatの手が決まる、つまり「シーン」が決定という値になるまでコスチュームが変わることを繰り返すというブロックをつくっていこう!

コスチュームをランダムに変化させるためには、演算の中にある[~から~までの乱数]ブロックと、見た目の中にある[コスチュームを~に変更する]ブロックを組み合わせればいいよ。 コンピューターが毎回のじゃんけんで出す手は、もちろん変わるから変数をつくろう。

データの中にある変数をつくるボタンをクリック、変数名「program_hand」としておこう。 値は1,2,3をとり、1がグー2がチョキ3がパーとなるよ。 変数をつくることができたら、ブロックをつくっていこう。 見た目の中にある[コスチュームの番号]ブロックと、データの中にある[~を~にする]ブロックを組み合わせていくよ。

[コスチュームの番号]ブロックについて説明するね。 今のコスチュームの番号を、値としてとることができるブロックだよ。 つくったブロックを組み合わせよう! これで、自分の出す手が決まるとコンピューターの出す手も決まり、変数「program_hand」の値が決まるようになったよ。

ここまでできたら動作を確認してみよう。 変数「program_hand」を表示させて確認しよう。 グリーンフラッグを押してじゃんけんが始まり、g,c,pのキーを押したら、コンピューターの手が決まればOKだよ。 「program_hand」の値が、グーなら1チョキなら2パーなら3となっていることを確認してね。 さあ!ここまで、みんなの画面でもやってみよう!

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

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

制御ブロックを使って、じゃんけんの勝敗判定機能を理解しよう

・あいこ、勝ちでなければ負けの処理をつくろう

このチャプターでは、じゃんけんの勝敗を判定できるようにしていくよ。 じゃんけんの勝敗は毎回変わるよね。 だから変数「勝敗」をつくろう。

データの中にある、変数をつくるボタンをクリック、変数名は「勝敗」にしよう。 値は、win、draw、loseとなり、それぞれ自分の勝ち、引き分け、自分の負けという状態を合わす変数だよ。 MANのスクリプトにつくっていくよ。

じゃんけんの結果は、勝ち、負け、あいこの3つだね。 3つの場合、引き分けを制御の中にある[もし~でなければ~]ブロック2つを使って作っていくよ。

上から順に、あいこの処理、勝ちの処理、負けの処理が実行されるよ。 あいこの条件を考えよう。 自分の手コンピューターの手が同じという条件だね。

勝ちの条件を考えよう。 自分の手がグーの場合を考えていくよ。 つまり値では1の場合、勝ちになるのはコンピューターの手がチョキ、値では2のときだね。

つくったブロックを合わせよう。 これで、手が同じならあいこの処理、手が同じでなくて、コンピューターがチョキなら勝ちの処理、そうでなければ負けの処理というブロックが組めたね!

最後に、このブロックの処理が始まるきっかけを考えよう! 今回はguを受け取ったときだよ。 すでにつくってあるので繋げよう。

あとは、「あいこ」「勝ち」「負けの処理」を作ればいいだけだね。 「あいこ」「勝ち」「負けの処理」を作る前に、このブロックの動作を確認しよう! 見た目の中にある[~と~秒言う]ブロックを使って確認をしてみることにするね。

scratchで動作を確認するのに一番早い方法だから、覚えておこう! ここまで作ることができたら、動作を確認してみよう。 グリーンフラッグを押してじゃんけんが始まったら、gキーを押してグーを出し、勝敗に応じて「あいこの処理」「勝ちの処理」「負けの処理」と2秒表示されたらOKだよ。 3パターンとも合っているか確認してね。 確認後は、[~と~秒言う]のブロックは全て、動作確認のために入れたから、削除しておこう。 さあ!ここまで、みんなの画面でもやってみよう!

チャプター08勝ち負け、あいこの処理をつくろう

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

勝ち負けが決まったあとに用いる変数を理解しよう

・階段を登るために必要な変数を設定しよう

このチャプターでは、前のチャプターでつくった勝敗が決定したあとの処理をつくっていくよ。 じゃんけんの勝敗がきまったら、その手に応じて、 CatかDog1が階段を登るという状態にゲームが進行していくよ。

ゲームの進行の状態を表す変数「シーン」を、「登る」という値に変更するね。 あいこの場合は、もう一度じゃんけんをするためにメッセージ「start」を送ることにするよ。 階段を登る段数は、じゃんけんをする度に変わるね。 変数2つつくろう! データの中にある変数をつくるボタンをクリック、変数名は、「player_steps」と「program_steps」をつくってね。 値は0や3、6とするよ。

まずは、あいことなったあとの処理を、MANのスクリプトにつくっていこう。 あいこの場合は、「勝敗」「draw」にしておこう! そして、自分もコンピューターも登る段数を0と変化させて、もう一度じゃんけんがスタートするようにしよう。

[1秒待つ]ブロックを入れておくのは、パソコンの処理が早すぎて、あいこのときに一瞬でじゃんけんが始まってしまうからなんだ! 実際に誰かとじゃんけんするときも、あいこの場合、1秒くらいは考えてから次のじゃんけんを始めるよね。 勝ちの場合は、「勝敗」「win」にしておこう! スクリプトの複製をつかってみるね。 そして、自分の登る段数は3、コンピューターも登る段数を0としよう。

仕上げに、メッセージ「win」をおくって次のブロックへのきっかけをつくっておこう。

負けの場合は、「勝敗」「lose」にしておこう! そして、自分の登る段数は0、コンピューターの登る段数を6としよう。 仕上げに、メッセージ「lose」をおくって次のブロックへのきっかけをつくっておこう。

ここまで完成したら、すでにつくってあるブロックに組み込んでいこう。

変数をつくったから、初期化も必要だね。 監督の役割をしている、キャットのスクリプトに、変数「player_steps」、「prgram_steps」0にするブロックを追加しておこう。 動作を確認しておこう。 つくった変数「player_steps」、「program_steps」を表示させよう。 グリーンフラッグを押して、グーを出してあいこなら、もう一度じゃんけんが始まり、勝ちなら「player_steps」3「program_steps」0、負けなら「player_steps」0「program_steps」6になって入ればOKだよ。 さあ!ここまで、みんなの画面でもやってみよう!

チャプター09勝敗に応じてスプライトを移動させよう

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

勝ちの場合の処理を理解しよう

・変数を変えながら繰り返す処理をつくろう

このチャプターでは、前のチャプターでつくった変数の値分だけスプライトが登る仕組みをつくっていくよ! 流れを説明するね。 動くスプライトは、winが送られたら、Catloseが送られたら、Dog1となるよ。 それぞれ変数分だけ動くようにしよう。

スプライトが階段を登り、その場所は変化するから変数をつくろう。 データの中にある変数を作るボタンをクリック、変数名は「player_position」「program_position」としておこう。 値は0から始まり、動く度に1増えるよ。

まずは、Catのスクリプトをつくっていくよ。 処理が始まるきっかけは「win」を受け取ったときだね。

「player_steps」の値に応じて、登ることを繰り返すという処理になるね。

次に、繰り返す処理を考えていこう! 「player_position」を繰り返すたびに1ずつ変更するよ。

繰り返しの処理が終わったら、変数「シーン」「考え中」に戻して、メッセージ「start」を送るようにしよう。 つくったブロック全てを組み合わせよう。

「win」を受け取ったときと繋げて完成だね。 [~秒待つ]ブロックを3つ追加しておこう。 これは、処理と処理の間にすこし時間を持たせてゲームの進行を少し調節しているだけだよ。

変数をつかったので、初期化をしなければいけないね。 「player_position」の値を初期化「0」にするタイミングは、グリーンフラッグがクリックされたときだね。 監督役のCatのスクリプトに追加していこう。

ここまでできたら、動作を確認してみよう! 変数「plyer_position」を表示させてから確認するよ。 グリーンフラッグを押して、グーを出して勝てれば、スプライトが3回動いていればOKだね。

・負けた場合の処理をつくろう

このチャプターではDog1の動きをつくっていくよ。 Catの動きと大体同じだよね。

スクリプトを複製して、変更していこう。 Catのスクリプトを、Dog1のスクリプトに複製しよう。 スクリプトを複製した際は、変更箇所を忘れないようにしてね。 便利だけど、まちがえやすいから気をつけよう!

スプライトへ複製の方法 次の画像を参考にドラッグすることで複製できるよ。

注意 複製がうまくできていれば、Cat「lose」を受け取ったときのかたまりは不要なので削除しておこう。

「program_position」も初期化しなければいけないね。監督役のCatのスクリプトを変更しよう。 ここまでできたら、動作を確認してみよう! 変数「program_position」を表示させてから確認するよ。 グリーンフラッグを押して、グーを出して、負けたときにDog16回動いていればOKだね。

チャプター10全ての手で動作するようにしよう

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

グー以外の処理もつくり、ゲームを完成に近づけよう

・他の手でも正しく動作するようにしよう

このチャプターでは、これまでの動作確認でグーを出したときは、正しく動作することが確認できたので、他の手でも動作するようにしていくよ。

グーを出した場合の処理と大体同じなので、スクリプトの複製をして、変更していくことにしよう! MANのスクリプトで、guを受け取ったときのブロックを複製して、変更していこう。 [もし~なら]より下をコピーして、「choki」を受け取ったときにつなげて変更していこう。 これで、チョキを出した場合も正しく動くようになるよ。

同じように、パーを出したときも正しく動くようにして行こう。 guを受け取ったときのブロックを複製して、変更していくよ。 [もし~なら]より下をコピーして、paを受け取ったときにつなげて変更していこう。 パーを出したときも正しく動くようになったね!

ここまで完成したら、グー以外の手でも動作を確認しよう! グーいがいの手も出して、動作が正しいか確認してみよう。 たとえば、チョキで負けたときに、Cat3段登って入ればOKだよ! さあ!ここまで、みんなの画面でもやってみよう!

チャプター11ゲーム終了を判定できるようにしよう

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

ゲームが終わる条件を考え、処理をつくっていこう

・定義ブロック「ゲーム終了判定」をつくろう

このチャプターでは、ゲームの終了が判定できるようにしていくよ。 今回のゲームでは、階段を先に登りおわったほうが勝ちとなり、ゲームが終了するようにしていくね。

ゲーム終了の判定をするために、制御のなかにある[もし〜なら]ブロックを2つ使って、それぞれCatが勝ちか負けなのかを判定するブロックをつくっていくよ。 監督役のCatにスクリプトをつくっていくね。 制御のなかにある、[もし~なら]のブロックを2つ繋げておこう。

ここに、勝ちの処理と、負けの処理を追加していくよ。 勝ちの場合と、負けの場合の条件はどうなるかな? 勝ちの場合はCatの位置、つまり「player_position」19より大きくなるという条件を作ればいいよね。

値が20より大きくなるは、19より大きくなると することがポイントだよ。 負けの場合は、「player_position」「program_position」変更するだけだね。 勝ちの場合の処理と、負けの場合の処理をつくっていくよ。 勝ちの場合は「勝った!」、負けの場合は「負けた!」と言うようにしていこう。

ゲームの状態が終了になるので、変数「シーン」「ゲーム終了」となるようにしておこう。 つくったブロック同士を組み合わせよう。

ここまでできたら、定義ブロックにしておこう。 ブロック定義の中にある「ブロックをつくる」ボタンで定義ブロックを作ろう。 定義ブロックの名前は「ゲーム終了判定」としておこう。

最後にどこで、「ゲーム終了判定」ブロックを使えばいいかわかるかな? 登っている途中で毎回終了の判定をするようにしていこう。 終了判定の結果、ゲームの状態がゲーム終了になっていれば、そこですべてのスクリプトを止めればいいね!

Dog1が動いている場合にもゲーム終了判定を入れなければいけないね。 Dog1ゲーム終了判定のスクリプトを複製して、変更しよう。

勝ったと負けたは立場が変わるから変更しようね。 ゲーム終了判定のタイミングはいつかな? Catと同じタイミングでいいよね。 このままだと、動いているスプライトの処理のときしかゲーム終了判定が入らないため、「勝った!」の表示しか出ないよ。

Cat、Dog1のどちらにも「ゲーム終了判定」がずっとおこなわれるように処理を入れておこう。 ここまでできたら動作を確認してみよう! 「player_position」また「program_position」どちらかが20になったときに、それぞれ、正しく「勝った!」「負けた!」と表示されていればOKだよ。 ここまで、みんなの画面でもやってみよう!

チャプター12じゃんけんの進行を表示させよう

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

シーンや勝敗を組み合わせて、ゲームの進行をおさらいしよう。

・キャットが進行状況を言う処理をつくろう

このチャプターでは、「じゃんけんぽん」と「あいこでしょ」Catに言うようにしていくよ。

まずは、[もし〜なら、でなければ]を使って、あいこなら「あいこでしょ」、そうでなければ「じゃんけんぽん」と言わせられるようにしていくよ。

あいこの場合の処理は、手が決められるまで、つまり[「シーン」決定になるまで待つ]というブロックをつかえばいいね。

あいこでない場合の処理も、手が決められるまで、つまり[「シーン」決定になるまで待つ]というブロックをつかえばいいね。

これまでつくったブロックを組み合わせ、このスクリプトが動くきっかけ「start」というメッセージをうけとったときだね。 ここまできたら、動作を確認してみよう。 じゃんけんの勝敗に応じて、あいこでしょ、じゃんけんぽんと言っていればOKだよ。

チャプター13最後に

・まとめ

このレッスンでも、これまでつかってきた様々なブロックをつかって複雑なゲームを作ることができたね! おさらいしておこう。 まず、コスチュームには番号がついているため、乱数のブロックを利用して、ランダムに見た目を変更することができたね。 また、「シーン」という状態を表す変数を用いて、[~まで待つ]ブロックと組み合わせ、「ゲームの進行状況」を調節することができたね。 たとえば、Cat「じゃんけん」と言い、手が決定するまでは、「ぽん」と言わないようにすることだよ。

最後に、CatやDog1が階段を登る処理で、繰り返すたびに変数「position」1ずつ変えることで、スプライトの現在のポジションの値を更新できたことも少し難しいけど、おさらいしておきたい処理だよ。 スクリプトが長くなりがちではあったけど、複数のスプライトどうしを制御する練習ができたね。 今後のゲームづくりにも生かしていこう!