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入門。ピアノ鍵盤を作って音を鳴らそう!

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

プログラミングのクラスってなぁに?

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「ク

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

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

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

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

コメントをどうぞ!

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