スクラッチプログラミング - したへおちるゲームのつくりかた

プラットフォームの上(うえ)でとびはねる四角(しかく)を矢印(やじるし)キーでうごかして下(した)へ下(した)へとおちるシンプルなゲームを Scratch (スクラッチ)でつくってみましょう。

スクラッチプログラミング - したへおちるゲームのつくりかた

トゲにあたらないようにおちつづけるゲームをつくろう

今回(こんかい)紹介(しょうかい)するのは、簡単(かんたん)なルールでずっとあそんでいたくなるような Scratch (スクラッチ)のゲームです。

操作(そうさ)に失敗(しっぱい)しても自動的(じどうてき)にリスタート。ゲームは永遠(えいえん)につづきます。シンプルな内容(ないよう)でも、キャラクターの四角(しかく)がプラットフォームの上(うえ)でピョンピョンとびはねるので、みていてたのしいゲームです。ぜひ一緒に(いっしょ)につくってみましょう。

サンプルプロジェクト

下(した)にあるのは、これからつくっていくゲームのサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、四角(しかく)やプラットフォームのうごきをみておいてください。

  • プラットフォームは上(うえ)へうごく
  • とびはねる四角(しかく)を左右(さゆう)の矢印(やじるし)キーで操作(そうさ)する
  • あかいトゲにあたったらゲームがリスタートする
Scratch|したへおちるゲームのサンプルGIF
Scratch|したへおちるゲームのサンプルGIF

背景(はいけい)を用意(ようい)しよう

最初(さいしょ)に、背景(はいけい)を用意(ようい)しましょう。

  • 左右(さゆう)に壁(かべ)をつくります。
  • 上下(じょうげ)にトゲをつくります。
はいけいをえがく
はいけいをえがく

プラットフォームをうごかそう

次(つぎ)に、プラットフォームのスプライトを用意(ようい)して、スクリプトをつくっていきましょう。

かべとおなじいろのプラットフォームをえがく
かべとおなじいろのプラットフォームをえがく

今回(こんかい)つくるゲームは、トゲにあたったあと、ゲームを自動的(じどうてき)にリセットして何度(なんど)でもくりかえしつづくようにします。そのために、緑(みどり)の旗(はた)がおされたとき の下(した)にブロックをつなげていくのではなく、メッセージをおくって、そのメッセージでゲームがうごきだすようにします。

みどりのはたがおされたとき、ゲームスタートのメッセージをおくる
みどりのはたがおされたとき、ゲームスタートのメッセージをおくる

ゲームスタートをうけとったとき の下(した)に、ゲームをうごかすためのブロックをつなげていきましょう。

  1. ゲームがはじまるときの表示位置(ひょうじいち)をきめます。
  2. 上(うえ)へうごかしたあと、非表示(ひひょうじ)にします。
ステージのまんなかあたりから、うえへうごかす
ステージのまんなかあたりから、うえへうごかす

プラットフォームはひとつだけでなくたくさん必要(ひつよう)なので、クローンをつくりましょう。

クローンをつくりつづける
クローンをつくりつづける

プラットフォームのクローンは、それぞれちがうところに表示(ひょうじ)されるよう、横(よこ)の位置(いち)をランダムにして、ステージの下(した)に表示(ひょうじ)します。

クローンのいちをきめてひょうじする
クローンのいちをきめてひょうじする

ひとつめのプラットフォームとおなじように上(うえ)へごかし、ステージの上(うえ)までうごいたクローンは削除(さくじょ)しましょう。

うえへうごかしたあと、クローンをさくじょする
うえへうごかしたあと、クローンをさくじょする

うごきをたしかめよう

緑(みどり)の旗(はた)をおして、ここまでのうごきを確認(かくにん)してみましょう。ひとつめのプラットフォームは、かならずおなじ位置(いち)に表示(ひょうじ)されます。それより下(した)につづくクローンのプラットフォームは、緑(みどり)の旗(はた)をおすたびにちがう位置(いち)に表示(ひょうじ)されます。

ふくすうのプラットフォームがうえへうごきつづける
ふくすうのプラットフォームがうえへうごきつづける

四角(しかく)をうごかそう

今度(こんど)は、四角(しかく)のスプライトを用意(ようい)してスクリプトをつくっていきます。トゲにあたったときのコスチュームもつくってください。

しかくのコスチュームと、トゲにあたったときのコスチューム
しかくのコスチュームと、トゲにあたったときのコスチューム

四角(しかく)のうごくはやさは、変数(へんすう)できめます。そのためにつかう変数(へんすう)をつくりましょう。緑(みどり)の旗(はた)がおされたとき ではなく、ゲームスタートをうけとったとき の下(した)にブロックをつなげてくださいね。

  1. 左右(さゆう)のはやさをきめる変数(へんすう) x速度(そくど)
  2. 上下(じょうげ)のはやさをきめる変数(へんすう) y速度(そくど)
へんすうを0でしょきかする
へんすうを0でしょきかする

つづけて、コスチュームと表示位置(ひょうじいち)を指定(してい)します。y 座標(ざひょう)は、ひとつめのプラットフォームより上(うえ)の位置(いち)にしてください。

しかくのコスチュームにして、ひょうじするいちをきめる
しかくのコスチュームにして、ひょうじするいちをきめる

ここまでで、最初(さいしょ)の設定(せってい)ができました。次(つぎ)のセクションからは、うごきの種類(しゅるい)ごとにブロック定義(ていぎ)でまとめて、スクリプトをつくっていきます。

ブロック定義(ていぎ)については、以下(いか)の記事(きじ)で紹介(しょうかい)しているので参考(さんこう)にしてください。

スクラッチプログラミング -「ブロックていぎ」とは?じぶんでつくるブロック
プログラミングにつかうブロックを、あたらしくつくってみましょう。Scratchにはたくさんのブロックが用意(ようい)されていますね。でもそれだけでなく、じぶんでブロックをつくることもできますよ。

重力(じゅうりょく)

ブロック定義(ていぎ)でつくる1つめのブロックは、重力(じゅうりょく) です。

四角(しかく)は、重力(じゅうりょく)で自動的(じどうてき)に下(した)へおちるようにします。定義(ていぎ) 重力(じゅうりょく) の下(した)に次(つぎ)のようにブロックをつなげて、下(した)へおちるスピードがだんだんはやくなるようにしましょう。

へんすうのあたいをすこしずつかえて、たてへうごくりょうもへんすうにおうじてかえる
へんすうのあたいをすこしずつかえて、たてへうごくりょうもへんすうにおうじてかえる

上下(じょうげ)ではねかえる

ブロック定義(ていぎ)でつくる2つめのブロックは、上下(じょうげ)ではねかえる です。このブロックは、「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれてつくってください。

ブロックをつくるがめん
ブロックをつくるがめん

プラットフォームにふれたとき、四角(しかく)はプラットフォームにうまったようになります。画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する理由(りゆう)は、このうまった様子(ようす)をみせずに、プラットフォームの端(はし)ではねかえるようにみせるためです。

では、上下(じょうげ)ではねかえる を定義(ていぎ)していきましょう。プラットフォームにふれたとき、それがプラットフォームの上部(じょうぶ)か、または下部(かぶ)かで処理(しょり)をわけます。

「もしプラットフォームのいろにふれたなら」、「もし〜なら、でなければ」
「もしプラットフォームのいろにふれたなら」、「もし〜なら、でなければ」

最初(さいしょ)に、プラットフォームの上部(じょうぶ)にふれた場合(ばあい)です。重力(じゅうりょく)でおちてきたときに、プラットフォームにうまらないようにしましょう。

  1. 下(した)へうごいているときの y速度(そくど) の値(あたい)はマイナスです。
  2. プラットフォームにふれない位置(いち)まですこしずつ上(うえ)へうごかします。
プラットフォームのうえではねかえる
プラットフォームのうえではねかえる

プラットフォームではねかえったあと、上(うえ)への速度(そくど)を追加(ついか)して、四角(しかく)がとびはねるようにします。

うえへたくさんうごかす
うえへたくさんうごかす

次(つぎ)は、プラットフォームの下部(かぶ)にふれた場合(ばあい)です。四角(しかく)がとびはねたときに、プラットフォームをとおりぬけないようにしましょう。

  1. プラットフォームにふれない位置(いち)まですこしずつ下(した)へうごかします。
  2. y速度(そくど) をリセットして、重力(じゅうりょく)で自動的(じどうてき)に下(した)へおちるようにします。
プラットフォームのしたではねかえる
プラットフォームのしたではねかえる

左右(さゆう)へうごかす

ブロック定義(ていぎ)でつくる3つめのブロックは、左右(さゆう)へうごかす です。

矢印(やじるし)キーをおしたときに、だんだんはやく横方向(よこほうこう)へうごくようにします。

へんすうのあたいをすこしずつかえて、よこへうごくりょうもへんすうにおうじてかえる
へんすうのあたいをすこしずつかえて、よこへうごくりょうもへんすうにおうじてかえる

キーをはなしたとき、すぐにとまるのではなく、だんだんゆっくりとまるようにしましょう。

へんすうのあたいに0.9をかける
へんすうのあたいに0.9をかける

つづけて、四角(しかく)が壁(かべ)をとおりぬけないようにしましょう。

  1. 壁(かべ)の色(いろ)にふれたかどうかを判定(はんてい)します。
  2. 左右(さゆう)のはやさに -1 をかけて、逆方向(ぎゃくほうこう)へうごかします。
  3. x速度(そくど) をリセットして、壁(かべ)でとまるようにします。
かべにあたったらはねかえる
かべにあたったらはねかえる

うごきをたしかめよう

では、定義(ていぎ)したブロックを ずっと の中(なか)につなげて、ここまでのうごきを確認(かくにん)してみましょう。プラットフォームの上(うえ)でピョンピョンととびはねる四角(しかく)を、左右(さゆう)の矢印(やじるし)キーで操作(そうさ)できるようになりました。

しかくがプラットフォームのうえでうごく
しかくがプラットフォームのうえでうごく

トゲにあたった

ブロック定義(ていぎ)でつくる4つめのブロックは、トゲにあたった です。

四角(しかく)がステージの上下(じょうげ)にあるトゲにあたったら、コスチュームをかえましょう。

トゲにあたったときのコスチュームにする
トゲにあたったときのコスチュームにする

変数(へんすう)でゲームをコントロールする

さて、さきほど、今回(こんかい)つくるゲームはトゲにあたったあとゲームを自動的(じどうてき)にリセットする、といいました。そのため、トゲにあたったら、プラットフォームのクローンもつくりなおす必要(ひつよう)があります。

  • ゲームがつづいているあいだは、クローンをつくりつづける
  • トゲにあたったら、表示(ひょうじ)されているクローンは削除(さくじょ)する

上(うえ)のふたつの処理(しょり)を制御(せいぎょ)できるよう、ゲーム続行(ぞっこう) という変数(へんすう)をつくって、最初(さいしょ)は はい にしておきましょう。

「ゲームぞっこうをはいにする」をついかする
「ゲームぞっこうをはいにする」をついかする

トゲにあたったら次(つぎ)のように変数(へんすう)の値(あたい)をかえて、ゲームをコントロールします。

  1. トゲにあたったら、ゲーム続行(ぞっこう)いいえ にします。
  2. すこしまってから、ゲームをリスタートするためにメッセージをおくります。
トゲにあたったあと、ゲームをリスタートする
トゲにあたったあと、ゲームをリスタートする

トゲにあたった の定義(ていぎ)は以上(いじょう)です。ずっと の中(なか)、左右(さゆう)へうごかす の下(した)にブロックを追加(ついか)しておいてください。

プラットフォームのスクリプトを修正(しゅうせい)する

ゲーム続行(ぞっこう)はいいいえ によってうごきがかわるのは、プラットフォームです。プラットフォームのスクリプトを修正(しゅうせい)していきましょう。

まず、プラットフォームのクローンをつくるのは、ゲーム中(ちゅう)のときだけです。

ゲームぞっこうがはいなら、クローンをつくりつづける
ゲームぞっこうがはいなら、クローンをつくりつづける

さらに、クローンが上(うえ)へうごいている途中(とちゅう)で、「トゲにあたったとき」と「ゲーム中(ちゅう)のとき」とで処理(しょり)をわけます。

  1. トゲにあたって ゲーム続行(ぞっこう)いいえ になったら、表示(ひょうじ)されているクローンは削除(さくじょ)します。
  2. ゲーム中(ちゅう)なら、上(うえ)へごかします。
「もし〜なら、でなければ」をついかして、しょりをわける
「もし〜なら、でなければ」をついかして、しょりをわける

スクリプト完成(かんせい)

したへおちるゲームの完成(かんせい)です。

プラットフォームのスクリプト
プラットフォームのスクリプト
しかくのスクリプト
しかくのスクリプト

Scratch の Pyxofy ページへいって、実際(じっさい)にしたへおちるゲームであそんでみてくださいね。Scratch したへおちるゲーム by Pyxofy

Pyxofy (著)「きょうからはじめるスクラッチプログラミング入門」

Pyxofy が Scratch の電子書籍を出版しました!Kindle・Apple Books からご購入ください。

詳細はこちら

まとめ

今回(こんかい)は、下(した)へ下(した)へとおちるゲームを Scratch でつくりました。

ゲームをよりおもしろくするために工夫(くふう)したポイントをまとめると、次(つぎ)のようになります。

  • プラットフォームの上(うえ)で四角(しかく)がピョンピョンとびはねる
  • プラットフォームはランダムな位置(いち)に表示(ひょうじ)される
  • 操作(そうさ)に失敗(しっぱい)しても自動的(じどうてき)にリスタートし、ゲームは永遠(えいえん)につづく

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

SNS で Pyxofy とつながりましょう! LinkedInThreadsBlueskyMastodon X (Twitter) @pyxofyFacebook

関連記事

スクラッチプログラミング - プラットフォーマーのつくりかた【上へすすむ】
上へすすむとステージがかわるプラットフォームゲームをつくりましょう。スプライトを左右にうごかしたり、障害物(しょうがいぶつ)にぶつかってジャンプがとまるようにするプログラムを、ブロックていぎをつかってつくります。
JavaScript - ボールが跳ね返るアニメーションの作り方
ボールが動き続けるアニメーションを JavaScript で作ります。requestAnimationFrame() メソッドの使い方や、キャンバスに図形を描画してアニメーションを作る基本的な方法を学びましょう。
CSS Art – How to Make a 3D Cube With CSS
Why settle for two dimensions when you can have three? Learn how to make a three-dimensional CSS cube and then rotate it into multiple angles.
CSS Animation – Jumping Box with @property – Part 1
You can make an orange-colored 3D-ish box jump up and down with CSS. Learn how to make this animation in this step-by-step article.