1. HOME»
  2. プログラミング・Web»
  3. Scratch»
  4. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

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

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

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

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

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

プロローグ

アル

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

りこ

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

アル

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

りこ

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

アル

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

山田

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

りこ

山田先生だ!

アル

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

りこ

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


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

アル

がんばるぞー!

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

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

山田

まず、今回のじゃんけんゲームで使う素材だべよ。
下のリンクからまとめてダウンロードするか、さらにその下の画像をひとつずつ右クリックして、「名前を付けて画像を保存」で、自分のパソコン保存ほぞんしてほしいんだべ

じゃんけん画像


チョキボタン

グーボタン

パーボタン

チョキ

グー

パー

山田

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

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

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

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

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

アル

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

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

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

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

山田

この猫はわだずの永遠のライバルだべよ

りこ

そうなんだ……

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

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

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

アル

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

りこ

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

山田

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

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

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

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

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

スプライトを選択して大きさを変更する

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

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

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

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

山田

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

りこ

うん!

山田

こういうふうにしてほしいんだべ

アル

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

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

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

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

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

右クリックで複製を選択

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

3つのスプライトが複製された

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

りこ

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

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

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

アル

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

りこ

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

山田

ふっふっふ。ちゃんと向きも変えられるだべよ

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

複製したスプライトを選択して向きを変更する

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

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

りこ

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

アル

でもまだ動かないよ

山田

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

変数へんすうを作ろう!

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

りこ

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

山田

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

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

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

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

変数名は「相手の手」と入力し、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でピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  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で、画像つきのおみくじゲームを作ろう!
オリジナルゲーム.com