スクラッチの「変数」を使って、リンゴに触れたらスコア加算・ミスで背景を切り替えるゲームを作ろう |

最終更新日 2025年5月25日 by toytune

スクラッチはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。

1 はじめに
2 今回の前提条件
3 「スコア」を記録する変数を作ろう
4 「ミス」を記録する変数を作ろう
5 「ミス」の条件と処理を作ろう
6 「ゲームオーバー」用の背景を作ろう
7 「ミス」に応じて背景を切り替えよう
8 動作確認
9 まとめ

はじめに

「変数」を使うと、ゲームのスコアや状態などの数値を記録し、条件分岐や表示に利用することができます。「変数」とは、数値や文字を入れておける「箱」のようなものです。

今回は、「スクラッチの「ブロック定義」で同じ処理をまとめよう！」で作成した、「リンゴのスプライトにマウスポインターが触れたら消える」ゲームに「変数」を追加し、スコア表示ができるようにします。さらに「ミス」をカウントする変数も用意し、一定回数ミスをすると「ゲームオーバーの背景」に切り替わる仕組みも追加します。

これを通して、「変数」の使い方や「条件分岐」の活用方法を学んでいきましょう。

このページでできるようになること

スクラッチで変数を作れるようになる
変数を使ってカウントができるようになる
設定したカウントを超えると背景を変更できるようになる

※「変数」についての基礎的な説明や、背景の切り替えに関する記事も別途ご用意しています。あわせてご覧ください。

▼ 今回作成するプログラム（の旗をクリックして動作を確認することができます）

今回の前提条件

この記事では、下記のような状態からスタートします。
まだ作成されていない場合は、まずこちらを紹介した記事を是非ご参照ください。

タイトル：スクラッチに「ブロック定義」を使って、同じ処理をするプログラムをまとめる

「スコア」を記録する変数を作ろう

最初にスコアを記録するための変数を作成していきます。
画面左側に「変数」という項目があるのでクリック、さらにその中にある「変数を作る」をクリックします。

画面が遷移し、変数を作るモーダルの画面が表示されます
「新しい変数名」に「スコア」と入力し、右下の「OK」のボタンをクリックします。

この時点でステージでの表示を確認してみます。

ステージの画面左上に「スコア 0」が表示されているかと思います。
この表示は隠すこともできますが、今回は「スコア」として表示したいのでこのままにします。

変数の設定をプログラムに追加していきます。

スコアの変数の初期状態は「0」にしたいので、「変数」のところから、「スコアを0にする」をドラッグし、「が押されたとき」の下に入れます。

続けて、マウスポインターに触れた場合は、スコアとして加算したいので、
「変数」のところから「スコアを1ずつ変える」をドラッグし、「もしマウスのポインターに触れたなら」の中の一番上に入れます。

変数からスコアを0にするをドラッグし旗が押されたときの下に入れる。変数からスコアを1ずつ変えるをドラッグし、もしマウスのポインターに触れたならの中、一番上に入れる

ここまでの状態をステージで動作確認してみます。

ステージのをクリックし、ゲームを開始します。
スコアの表示は最初は0になっています。マウスポインターで「リンゴ」のスプライトに3回触れると、スコアの表示は3になりました。

ステージの旗をクリックし、リンゴのスプライトに3回触れるとスコアの変数が3になった

「ミス」を記録する変数を作ろう

このままだと、永遠にゲームが終わりません。
ミスした回数を入れる変数と、ゲームオーバーの条件を追加して、ゲームが停止されるようにします。

まずは、ミスをカウントする変数を作りたいので、スコアの時と同じ操作を行います。
「変数」をクリック、次に「変数を作る」をクリックします。

画面が遷移します。「新しい変数名」の名前はわかりやすく「ミス」にします。
入力できたら右下の「OK」をクリックします。

スコアの変数を作ったときには解説しませんでしたが、「変数」のところをみると、「スコア」と「ミス」の変数のブロックが追加されていることがわかります。

余談ですが、この「スコア」と「ミス」のすぐ左側にある「チェックマーク」を外すと、
ステージから変数の表示が消えます。
もし「チェックマーク」を外し、ステージから変数の表示が消えても、その変数は裏側で動いているので注意してください。

ミスの変数をプログラムに追加していきます。

ミスの変数もスコアと同じように最初は「0」にしておきたいので、
「変数」から「スコアを0にする」をドラッグし、最初に入れた「スコアを0にする」の下に入れます。
入れたあと、「スコア」のところをクリックし、「ミス」に変更します。

変数からスコアを0にするをドラッグし、スコアを0にするの下に入れる。その後、その部分のスコアをミスみ変更する

「ミス」の条件と処理を作ろう

ミスの条件を作っていきます。
今回は、リンゴのスプライトがマウスポインターで触れることができずに下まで落ちてしまった場合を「ミスをした」と定義し、その条件をプログラムしていきます。

「制御」から「もし〜なら」をドラッグし、「ずっと」の一番下にいれます。

次に「演算」から「〜 = 50」のブロックをドラッグし、「もし〜なら」の「〜」にドラッグします。

「変数」から「ミス」をドラッグし、「もし〜=50なら」の「〜」に入れます。
そのあと今回は「3」になった場合、ゲームオーバーにしたいので、「50」のところを「3」に変更します。

もし、この条件になった場合、つまり変数のミスが「3」になったらゲームを止めたいので、「制御」から「すべてを止める」をドラッグし、「もしミス=3なら」の中に入れます。

これでミスの変数が「3」になったらゲームが止まる、つまりゲームオーバーになるプログラムができました。

「ゲームオーバー」用の背景を作ろう

ただゲームが止まっただけでは味気ないですよね。

ミスの変数が「3」になった場合、ゲームオーバーになったことがわかるような背景を作成います。画面右下、背景のところから「描く」をクリックします。

画面が遷移し、背景を描ける画面に遷移します。
ツールのところから「四角形」のアイコンをクリックします。

左上から右下にドラッグで描画し、全体が覆うようにします。（下記画像を参照）

真っ黒の画面にしたいので、「塗りつぶし」のところをクリックし、出てきたスライダーを全て右にします。

最初に描画したときは紫だったものが黒にすることができました。

続けて、「Game Over」の表示もしたいので、文字を背景に追加していきます。
「T」のアイコンをクリックします。

今度は先に色を変更します。
「塗りつぶし」をクリックし、一番上は左いっぱいにスライド、二番目と三番目は右いっぱいにスライドします。これで赤色の文字で入力することができます。

塗りつぶしをクリックし、色を左いっぱいにスライド、鮮やかさと明るさは右にいっぱいにスライド

画面中央辺りで、「Game Over」と入力します。ずれてもドラッグで調整できます。

ゲーム中の背景も変えていきます。
真っ白の画面は必要ないので、「背景1」の右上の「ゴミ箱」アイコンをクリックして削除しておきます。

その一番下に「背景を選ぶ」があるので、クリックします。

画面が遷移し、背景の一覧が表示されます。
今回は、「Blue Sky」という背景を使いたいので、見つけてクリックで選択します。

クリックできたら、画面が戻り「Blue Sky」の背景が追加されていることがわかります。

「ミス」に応じて背景を切り替えよう

スプライトのプログラムに戻って、背景の切り替える処理を加えていきます。

先ほどまで背景をさわっていたので、作成していたブロックの表示がないと思います。
スプライトのところから「Apple」をクリックして選択します。

作成していたブロックが表示されます。

最初の背景は「Blue Sky」にしておきたいので、「見た目」から「背景をBlue Skyにする」をドラッグし、「ミスを0にする」の下に入れます。

続けてミスの変数が「3」になったら、背景を変更するようにします。
「見た目」から「背景をBlue Skyにする」をドラッグし、「もしミス=3」の中の一番上に入れます。
入れたあと、「Blue Sky」のところをクリックし、先ほど作成した「GAME OVER」の背景となる「背景2」に変更します。