Scratchでじゃんけんゲームを作ろう！　小学生からのプログラミング入門

こんにちは！　今日（きょう）もプログラミングのお勉強（べんきょう）をはじめていきますよ！

前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！」では、Scratch（スクラッチ）ってどうやって使うのか、ってことを学びました。
なんと、今回からは、実際（じっさい）にゲームを作っていきます。

今回は、じゃんけんゲームを作ってみましょう。

プロローグ

---

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

じゃんけんゲームにつかう素材（そざい）

まず、今回使う素材（そざい）についてです。

じゃんけん画像

顔

チョキボタン

グーボタン

パーボタン

チョキ

グー

パー

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

プロジェクト名を変更（へんこう）する

Scratch（スクラッチ）を開いたら、ログインしておいてください。

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

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

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

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

スプライトリスト右下のねこ（いぬ？）のマークにマウスカーソルを合わせて、そこに出てきた「スプライトをアップロード」のボタンをクリックします。

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

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

スプライトを縮小（しゅくしょう）して綺麗（きれい）に配置（はいち）しよう

では、スプライトを綺麗（きれい）に配置（はいち）してみましょう。Scratch（スクラッチ）上で、スプライトの拡大（かくだい）縮小（しゅくしょう）をすることもできます。

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

ではまず、スプライトを小さくしてみましょう。
スプライトリストから小さくしたいスプライトを選択（せんたく）し、その上の「大きさ」の値（あたい）を小さくします。今回は30にしました。

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

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

スプライトを綺麗（きれい）に配置（はいち）しよう

つづいて、スプライトを綺麗（きれい）に配置（はいち）してみましょう。

スプライトを複製（ふくせい）してみよう

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

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

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

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

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

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

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

ではまず、複製（ふくせい）したチョキのスプライトを選択（せんたく）し、向きの値（あたい）を-90に変更してみましょう。

おなじように、さきほど複製したグーとパーのスプライトの向きも、値を-90に変更します。
すると、ステージ上のスプライトの向きが、反対（はんたい）向きになりました。

そして、さきほどと同じように、相手の手の位置（いち）を、画像のように全て同じ位置に配置（はいち）します。

変数（へんすう）を作ろう！

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

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

変数名は「自分の手」とし、OKをクリックします。

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

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

これで「相手の手」という変数が作成されました。

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

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

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

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

ボタンが押（お）されたときに、自分の手を表示（ひょうじ）するようにしよう

つづいて、ボタンが押（お）されたときに、自分の手を表示（ひょうじ）するようにしてみます。

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

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

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

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

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

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

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

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

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

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

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

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

今回はパーボタンのスプライトにコピーしてみましょう。

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

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

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

つづいて、ボタンが押（お）されたときに、そのボタンに対応（たいおう）したグー、チョキ、パーの、スプライトが表示（ひょうじ）され、それ以外（いがい）は隠（かく）すようにしてみましょう。

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

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

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

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

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

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

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

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

コピーしてきたグーのスプライトのブロックは、画像のように、「グー」に変更しておきます。

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

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

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

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

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

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

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

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

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

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

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

50の部分は「チョキ」に変更（へんこう）します。

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

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

相手のグーのスプライトを選択（せんたく）し、先ほどコピーしてきたブロックを、画像のように「もし相手の手=（グー）なら」に変更（へんこう）します。

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

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

乱数（らんすう）を使ってみよう

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

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

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

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

「ランダム数字を（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でピアノ鍵盤を作って音を鳴らそう！　小学生からのプログラミング入門
6. テキストエディタ（Visual Studio Code）をインストールしてみよう！　小学生からのプログラミング入門
7. Visual Studio Codeを日本語化してみよう！　小学生からのプログラミング入門
8. JavaScriptでおみくじを作ろう！　小学生からのプログラミング入門
9. JavaScriptで今月の残り日数を計算してみよう！　小学生からのプログラミング入門
10. JavaScriptで画像を表示してみよう！　小学生からのプログラミング入門
11. JavaScriptで画像を移動してみよう！　小学生からのプログラミング入門
12. 【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門
13. 【JavaScript】ファイルを分けて管理してみよう！　小学生からのプログラミング入門
14. 【JavaScript】オブジェクトを使ってみよう！　小学生からのプログラミング入門
15. 【JavaScript】ゲームのメインループを作ってみよう！　小学生からのプログラミング入門
16. 【JavaScript】キャラを決まった間隔ずつ動かす！　小学生からのプログラミング入門
17. HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門
18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門
19. 【JavaScript】マップでキャラを動かせるようにしよう！　小学生からのプログラミング入門
20. 【JavaScript】クラスの概念をしっかりと理解しよう！　小学生からのプログラミング入門
21. 【JavaScript】プログラム全体をクラスを使って作ってみよう！　小学生からのプログラミング入門
22. 【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門
23. 【JavaScript】改行と一文字ずつ画面に表示する方法！　小学生からのプログラミング入門
24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！　小学生からのプログラミング入門
25. JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
26. webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）
27. WindowsにPythonをインストールしてみよう！小学生からのPython入門
28. MacにPythonをインストールしてみよう！小学生からのPython入門
29. Pythonでじゃんけんゲームを作ってみよう！小学生からのPython入門
30. Pythonのtkinterを使って、ウィンドウを表示してみよう！
31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう！

• Tweet
• Facebook
• はてブ
• Pocket