1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Scratch
  6. »
  7. 小学生から始めるScratch入門。じゃんけんゲームを作ろう!

小学生から始めるScratch入門。じゃんけんゲームを作ろう!

小学生から始めるScratch入門です。

前回、スクラッチでシューティングゲームを作りました。
今回はじゃんけんゲームを作ってみましょう。

目次
  1. プロローグ
  2. じゃんけんゲームに使用する素材
  3. プロジェクト名を変更する
  4. 画像をスクラッチに読み込もう
  5. スプライトを縮小して綺麗に配置しよう
  6. スプライトを複製してみよう
  7. スプライトの向きを変えよう
  8. 変数を作ろう!
  9. ボタンが押された時に、自分の手を表示するようにしよう
  10. 相手の手のプログラムを作ろう
  11. 乱数を使ってみよう
  12. ゲームの初期化をする
  13. 「じゃんけんぽん」としゃべらせてみよう
  14. じゃんけんの勝ち負けを判定しよう
  15. 変数を非表示にする
  16. エピローグ

プロローグ

アル

アル

ちぇっ……、体育係やりたかったのにじゃんけんで負けて、音楽係になっちゃったよ


りこ

りこ

あらら。でもいいじゃない、音楽係


アル

アル

やだよ、女の子ばっかりだもん!


りこ

りこ

そんなの気にしなくていいのに


アル

アル

じゃんけんさえ強ければなー。トレーニングしようかな


山田

山田

それならScratchでじゃんけんゲームを作るといいべよ


りこ

りこ

山田先生だ!


アル

アル

山田先生! うん、ぼくじゃんけんゲーム作って、トレーニングするよ!


りこ

りこ

……じゃんけんってトレーニングで強くなるの?


今回作成するゲームはこちらです。
アルくんは、これを作ってじゃんけんのトレーニングをしていきます。

アル

アル

頑張るぞー!

じゃんけんゲームに使用する素材

まず、今回使用する素材についてです。

山田

山田

まず、今回のじゃんけんゲームで使う素材だべよ
これらの画像を右クリックして、「名前を付けて画像を保存」をクリックして、自分のパソコンに保存してほしいんだべ


チョキボタン

グーボタン

パーボタン

チョキ

グー

パー

山田

山田

ちなみにこの素材は、「自分が作りました」と言わない限り、どう使ってもいいべよ。
ただ、素材を公開(こうかい)しているサイトによっては、その条件が決まっていることが多いから、ちゃんと確認して使うといいべ

※素材を使って生じたいかなる損害も、山田先生も管理人も一切責任を負いません。
※報告も不要です。しかし「使ったよ」といっていただければ、山田先生と管理人は喜びます。

プロジェクト名を変更する

Scratchのプロジェクト名を変更します。
今回は「じゃんけんゲーム」としておきましょう。

アル

アル

じゃんけんゲーム……わくわく

画像をスクラッチに読み込もう

ではScratchに先ほど保存した画像を読み込んでいきましょう。
まず、あらかじめ作られている猫ちゃんのスプライトは、画面右下のスプライトリストから削除しておきます。

スプライト右上の「×」をクリックして削除しましょう。

山田

山田

この猫はわだずの永遠のライバルだべからな


りこ

りこ

それ、前も言ってたね

スプライトリスト右下の猫(犬?)のマークにマウスカーソルを合わせて、そこに出てきた「スプライトをアップロード」のボタンをクリックします。

先ほど保存した画像をドラッグで全て選択し、「開く」をクリックします。

スプライトリストに、画像が読み込まれ、ステージにもその画像が表示されました。

アル

アル

でもステージに対して画像が大きくない?


りこ

りこ

画像がおさまりきらないよね


山田

山田

ふっふっふ。実はScratch上で画像を大きくしたり小さくしたりすることができるんだべよ

スプライトを縮小して綺麗に配置しよう

ではスプライトを綺麗に配置してみましょう。Scratch上でスプライトの拡大縮小をすることもできます。

スプライトを小さくしてみよう

ではまず、スプライトを小さくしてみましょう。
スプライトリストから小さくしたいスプライトを選択し、その上の「大きさ」の値(あたい)を小さくします。今回は30に設定しました。
スプライトを選択して大きさを変更する

同じように、顔のスプライトや、グーのスプライト、そしてパーのスプライトの大きさも30にします。
ボタンのスプライトの大きさはそのままで大丈夫です。

するとこのようにステージ上のスプライトが小さくなります。

スプライトを綺麗に配置しよう

続いてスプライトを綺麗に配置してみましょう。

山田

山田

ステージ上のスプライトはドラッグで移動できるべ。ドラッグで綺麗に配置してみるべよ


りこ

りこ

うん!


山田

山田

配置はこういうふうにしてほしいんだべ


アル

アル

グー、チョキ、パーのスプライトは同じ位置に置くんだね!

スプライトを複製してみよう

これでじゃんけんの手を配置することができましたが、このままでは自分の手しか表示されません。
そこで手を複製して、相手の手も作ってみましょう。

グー、チョキ、パーのスプライトをそれぞれ複製します。

まずはチョキのスプライトを右クリックして、「複製」を選んでください。
右クリックで複製を選択

同じように、グーのスプライト、パーのスプライトも、右クリックして「複製」を選びます。
するとこのように、グー、チョキ、パーのスプライトがもうひとつずつ表示されます。
3つのスプライトが複製された

ステージにも複製されたスプライトが表示されます。

りこ

りこ

この複製された手が、相手がわの手になるのね!

スプライトの向きを変えよう

つづいて、スプライトの向きを変更します。

アル

アル

うーん、なんかこのままだと、相手の手か自分の手か分からないよね


りこ

りこ

そっか。向きが違うんだ!


山田

山田

ふっふっふ。ちゃんと向きも変更できるんだべよ

ではまず複製したチョキのスプライトを選択し、向きの値を-90に変更してみましょう。
複製したスプライトを選択して向きを変更する

同じように、先ほど複製した方のグーとパーのスプライトの向きの値も-90に変更します。
するとステージ上のスプライトの向きが、反対向きになりました。

そして先ほどと同じように、ステージの相手の手の位置をドラッグで画像のように配置します。
相手の手は全て同じ位置に重ねて配置します。

りこ

りこ

見た目はじゃんけんゲームっぽくなったね


アル

アル

でもまだ動かないよ


山田

山田

これからゲームを動くようにしていくべからな

変数を作ろう!

では今度は変数を作っていきます。

りこ

りこ

変数はいろんな値を入れておけるんだよね


山田

山田

そうだべ。じゃあ、変数を作るべよ

まずは、自分の手が何を出しているのかを覚えさせておく変数を作ります。
画面左から「変数」を選び、「変数を作る」をクリックします。

変数名は「自分の手」とします。

自分の手という変数が作成されました。
今度は「相手の手」という変数を作ります。これは相手の手が何を出しているのかを覚えさせておく変数です。
同じように「変数を作る」をクリックします。

変数名は「相手の手」と入力し、OKをクリックします。

これで「相手の手」という変数が作成されました。
そしてもう一つ「ランダム数字」という変数を作ります。これは相手の手をランダムに表示させるために、ランダムの数字を入力しておく変数です。
ランダムというのは、その時によって違うという意味です。

では「変数を作る」をクリックします。

変数名は「ランダム数字」と入力し、OKをクリックします。

これで3つの変数が作成されました。

山田

山田

自分の手は自分が選んだ手を、相手の手は相手が出す手を、ランダム数字は相手が何を出すか考えるときに使う変数だべよ

ボタンが押された時に、自分の手を表示するようにしよう

つづいて、ボタンが押された時に自分の手を表示するようにしてみます。

グー、チョキ、パーの、ボタンのブロック

まず、①チョキボタンのスプライトを選択し、②イベントを選びます。そして③「このスプライトが押された時」をスクリプトエリアにドラッグします。

続いて「変数」を選択し、「ランダム数字を0にする」をドラッグして、「このスプライトが押されたとき」に繋げます。

今ドラッグしてきたブロックは、「”自分の手”を”チョキ”にする」に変更します。

続いて「イベント」をクリックし、「メッセージ1を送る」をドラッグして、、「自分の手をチョキにする」に繋げます。

「メッセージ1」の部分をクリックし、「新しいメッセージ」を選びます。

メッセージ名は「手のボタンが押された」とし、OKをクリックします。

つづいて、グーボタンのスプライトを選択し、「このスプライトが押されたとき」をスクリプトエリアにドラッグします。

先ほどと同じように「変数」を選択し、「ランダム数字を0にする」をドラッグして、「このスプライトが押されたとき」に繋げます。

そして今ドラッグしてきたブロックは、「”自分の手”を”グー”にする」に変更します。

「イベント」を選んで、「手のボタンが押されたを送る」をスクリプトエリアにドラッグし、「自分の手をグーにする」に繋げます。

アル

アル

ねぇ、これさっきと似たようなことやってるけど、もっと楽な方法はないの? 次はパーボタンにも同じのを作るんでしょ?


山田

山田

ふっふっふ、実はあるんだべ

次はパーボタンのスプライトが押された時のものを作っていきたいのですが、これも今作ったものととても似ています。
そんな時は別のスプライトにブロックをコピーすることができます。
コピーしたいところの一番上のブロックを、コピー先のスプライトまでドラッグします。

今回はパーボタンのスプライトにコピーしてみましょう。
一番上のブロックを コピーしたいスプライトまでドラッグ

これでパーボタンのスプライトにコピーされました。
パーボタンのスプライトに コピーされている!

もちろん、パーボタンのスプライトの「自分の手をグーにする」ブロックは、「パー」に変更しておきましょう。

アル

アル

こんなふうにコピーできるんだったら楽チンだね!

グー、チョキ、パーの、スプライトのブロック

続いて、ボタンが押された時に、そのボタンに対応したグー、チョキ、パーの、スプライトが表示され、それ以外は隠すようにしてみましょう。

まず、チョキのスプライト(自分の手の方)を選択し、「旗が押されたとき」をスクリプトエリアにドラッグします。

今回の判定は常に行なっておきたいので、「制御」から「ずっと」ブロックをドラッグし、「旗マークが押されたとき」ブロックに繋げます。

そして「もし◇なら でなければ」をドラッグして、「ずっと」の中に配置します。

「演算」をクリックし、「◯=50」ブロックを「もし◇なら でなければ」ブロックの◇に入れます。

「変数」をクリックし、「自分の手」を「◯=50」ブロックの◯に入れます。

50の部分は「チョキ」に変更しておきましょう。

「見た目」をクリックし、下の方にある「表示する」と「隠す」ブロックを下の画像のようにドラッグします。
これで、「もし”自分の手”=”チョキ”なら”表示する” でなければ”隠す”」というふうになります。

作成したブロックの一番上を、グーのスプライト(自分の手の方)までドラッグして、コピーします。

コピーしてきたグーのスプライト(自分の手の方)のブロックは、「グー」に変更しておきます。

同じようにパーのスプライト(自分の手の方)にもドラッグしてコピーします。

コピーしてきたパーのスプライト(自分の手の方)のブロックは、「パー」に変更しておきます。

これでステージの旗マークをクリックすると、ボタンに応じて自分の手が表示されるようになります。

アル

アル

ボタンを押すと手が切り変わるね。でもまだ相手の手はそのままだ


山田

山田

じゃあ、次からは相手がわの手も変わるようにプログラミングしていくべよ

相手の手のプログラムを作ろう

つづいて、相手の手のプログラムを作っていきます。
相手の手は、ランダムに表示されるようにしたいのですが、ランダムの数を作る方法は後ほど紹介するとして、まずは条件分岐によって相手の手が表示されるプログラムを作っていきましょう。

相手の手の、チョキのスプライトを選択し、「イベント」から「手のボタンが押されたを受け取ったとき」をスクリプトエリアへドラッグします。

今ドラッグしてきたブロックの「手のボタンが押された」をクリックし、さらに「新しいメッセージ」をクリックします。

メッセージ名は「相手が何を出すか考えた」とし、OKをクリックします。

アル

アル

これで「相手が何を出すか考えた」ってメッセージが送られてきたときに、その下のブロックが実行されるんだね!

「制御」から「もし◇なら でなければ」をドラッグし、「相手が何を出すか考えたを受け取ったとき」に繋げます。

「演算」から「◯=50」をドラッグし、「もし◇なら でなければ」の◇に入れます。

「変数」から「相手の手」をドラッグし、「◯=50」の◯に入れます。

50の部分は「チョキ」に変更します。

「見た目」から、下の方にある「表示する」と「隠す」ブロックを下の画像のようにドラッグします。
これで、「もし”相手の手”=”チョキ”なら”表示する” でなければ”隠す”」というふうになります。

りこ

りこ

そっか。チョキのスプライトに作ったブロックだから、「相手の手」がチョキのときだけ表示するのね

作ったものを、相手のグーのスプライトにコピーします。
ブロックの一番上を、相手のグーのスプライトへドラッグしましょう。

相手のグーのスプライトを選択し、先ほどコピーしてきたブロックを確認します。
そして「もし相手の手=”グー”なら」に変更します。

さらにブロックの一番上を相手のパーのスプライトへドラッグしてコピーします。

相手のパーのスプライトを選択し、「もし相手の手=”パー”なら」に変更します。

アル

アル

コピーしてそのスプライトに合わせて変更するだけだから楽チンだよ!

乱数を使ってみよう

続いて乱数を使ってみたいと思います。
乱数というのは、ここからここまでの数字の中から、どれかが選ばれるということです。
変数を作る時に書いた、ランダムってやつです。

山田

山田

乱数を使うと、どれが選ばれるか分からないプログラムを作ることができるんだべ


アル

アル

そっか! じゃんけんは相手が何を出すか分からないから、この乱数を使うんだね!

まず、顔のスプライトを選択し、「イベント」から「手のボタンが押されたを受け取ったとき」をスクリプトエリアにドラッグします。

「変数」から「ランダム数字を(0)にする」をドラッグし、「手のボタンが押されたを受け取ったとき」に繋げます。

「演算」から「1から10までの乱数」をドラッグし、「ランダム数字を(0)にする」の(0)に入れます。

「ランダム数字を1から”3”までの乱数にする」に変更します。

りこ

りこ

1〜3のランダムの数字……そっか、グー、チョキ、パーの3つに対応させたいから、1〜3なのね!

「制御」から「もし◇なら」をドラッグして、「ランダム数字を1から3までの乱数にする」に繋げます。

「演算」から「◯=(50)」をドラッグして、「もし◇なら」の◇に入れます。

「変数」から「ランダム数字」をドラッグし、「◯=(50)」の◯に入れます。

「もしランダム数字=”1”なら」に変更します。

「ランダム数字を0にする」を「もしランダム数字=1なら」の中に入れます。

「ランダム数字」を「相手の手」に変更します。

「相手の手を”チョキ”にする」に変更します。

「もしランダム数字=1なら」を右クリックし、「複製」を選択します。

この方法でもう一度複製して、下に繋げます。

画像のように、四角で囲った部分を変更します。

これで相手が出す手が決まった、ということになります。
「イベント」から「手のボタンが押されたを送る」をドラッグし、一番下に繋げます。

「手のボタンが押された」を「相手が何を出すか考えた」に変更します。

これで、ステージの赤いボタンを押した後に旗マークを押し、どれか手のボタンをクリックすると、相手の手がランダムに表示されるようになりました。

アル

アル

わー! じゃんけんしてるみたい。でも勝ち負けが表示されないよ


山田

山田

慌てなさんなだべ。勝ち負けの表示方法はもう少し後に教えるべから、その前にゲームの初期化をしておきたいんだべ


りこ

りこ

しょきか?


山田

山田

ゲームを始めたとき、最初から変数に値が代入されていては困るんだべよ。それに最初は手も非表示にしておきたいんだべ

ゲームの初期化をする

しかしこのままだと、旗マークを押したときも手が表示されてしまっており、ゲームとしてはかっこ悪いです。
そこで、ゲームが始まった時に、変数の初期化や、画像を非表示にするようにしましょう。

顔のスプライトを選択し、「イベント」から「旗が押されたとき」をスクリプトエリアにドラッグします。

「変数」から「ランダム数字を0にする」を2つドラッグし、一番下に繋げます。

それぞれの変数を「自分の手」、「相手の手」として、値をどちらも空白にします。

これで自分の手は、最初だけ表示されなくなりましたので、今度は相手の手も最初だけ表示されないようにします。
相手のチョキのスプライトを選択し、「イベント」から「旗が押されたとき」をスクリプトエリアにドラッグします。

「見た目」から「隠す」をドラッグして、「旗が表示されたとき」に繋げます。

今作った一番上のブロックを、相手のグーのスプライトと、相手のパーのスプライトへドラッグしてコピーします。

これでスタート時に、手が表示されなくなりました。

アル

アル

スタート時に手が表示されなくなったら、緊張(きんちょう)感が増(ま)すね!

「じゃんけんぽん」としゃべらせてみよう

つづいて、相手に「じゃんけんぽん」としゃべらせてみます。

山田

山田

勝ち負けの表示の前にもう一つ。「じゃんけんぽん」としゃべらせてみるべ


アル

アル

たしかに、「じゃんけんぽん」と言わなくちゃタイミングが分からないよね

顔のスプライトを選択し、「見た目」から「こんにちは!という」をドラッグして、「相手の手を◯にする」の下に繋げます。

「”じゃんけん”と言う」に変更します。

今度は「こんにちは!と2秒言う」を「相手が何を出すか考えたを送る」の下に繋げます。

「”ぽん”と2秒言う」に変更します。

旗マークで「じゃんけん」と言い、手のボタンを押すと「ぽん」と言うようになりました。

りこ

りこ

ふふふっ、しゃべってる!

じゃんけんの勝ち負けを判定しよう

つづいて、じゃんけんの勝ち負けの判定を行います。

アル

アル

やった、やっと勝ち負けが表示されるぞ!

顔のスプライトを選択したままの状態で、「制御」から「もし◇なら」をドラッグして、「ぽんと2秒言う」の下に繋げます。

「演算」から「◯=50」をドラッグして、「もし◇なら」の◇に入れます。

さらに「変数」から「自分の手」をドラッグし、「◯=50」の◯に入れます。

「自分の手=50」の50を「チョキ」に変更します。

「制御」から「もし◇なら」をドラッグし、「もし自分の手がチョキなら」の中に配置します。

「演算」から「◯=50」をドラッグし、「もし◇なら」の◇に入れます。

「変数」から「相手の手」をドラッグし、「◯=50」の◯に入れます。

「相手の手=50」の50を「パー」に変更します。

「こんにちは!と言う」を「もし相手の手=パーなら」の中に入れます。

「こんにちは!と言う」を「”あなたの勝ち”と言う」に変更します。

「もし相手の手がパーなら」を右クリックして「複製」をクリックします。

複製したものは、「もし相手の手がパーなら」の下に配置します。

今複製したブロックは、画像のように2箇所変更します。

「もし自分の手がチョキなら」を右クリックして「複製」を選択します。

複製したものを一番下に配置し、もう一度複製を繰り返して、さらに一番下に繋げます。

画像のように6箇所を変更します。

「もし◇なら」をドラッグし、一番下に繋げます。

「演算」から「◯=50」を「もし◇なら」の◇に入れます。

「変数」から「自分の手=相手の手」となるように配置します。

「見た目」から「こんにちは!と言う」を「もし自分の手=相手の手なら」の中に入れます。

「こんにちは!と言う」を、「”あいこだね”と言う」に変更します。

赤いボタンを押して止めた後に、旗マークを押して実行すると、「ぽん」と言った2秒後に勝ち負け(あいこ)を言うようになります。

アル

アル

わーい! これで勝ち負けが出て、ゲームが楽しくなったよ!

変数を非表示にする

最後に変数を非表示にしましょう。

非表示にしたい変数はこれです。

「変数」から、表示されている変数のチェックを外します。
チェックを外す

これでステージの変数が非表示になりました。

りこ

りこ

うん、ステージがスッキリしたね!

これでじゃんけんゲームの完成です。

エピローグ

今回はScratchでじゃんけんゲームを作る方法を紹介しました。

アル

アル

よーし、じゃんけんのトレーニングするぞ!


りこ

りこ

じゃんけんはトレーニングじゃ強くならないよ!


アル

アル

え?


りこ

りこ

それよりアル、明日の帰りの会の歌なににするの? ちゃんと決めた?


アル

アル

ちぇ、うるさいなー。そんなの他の子が考えるよ……りこちゃんには関係ないだろ!?


りこ

りこ

あるわよ! 私も音楽係なんだから。後から決まったんだけど


アル

アル

そうなの!? りこちゃんが音楽係なら……音楽係もいいかな……


りこ

りこ

帰りの会の歌は関ジャニ∞の曲にしましょ?


アル

アル

ちぇ! またそれかよ!


山田

山田

まぁまぁ、プログラミングも係活動も頑張るべよ!


りこ

りこ

うん!


アル

アル

うん!

この企画の一覧はこちら

  1. 小学生から始めるプログラミング入門。プログラミングってなぁに?
  2. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
  3. 小学生から始めるScratch入門。シューティングゲームを作ろう!
  4. 小学生から始めるScratch入門。じゃんけんゲームを作ろう!
  5. 小学生から始めるScratch入門。ピアノ鍵盤を作って音を鳴らそう!

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第6弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

コメントをどうぞ!

メールアドレスが公開されることはありません。