スクラッチプログラミング - ランゲーム|ゲームオーバーとスタートボタン

障害物(しょうがいぶつ) をジャンプでよけながらはしりつづけるランゲームを Scratch (スクラッチ)でつくります。ゲームオーバーにする方法(ほうほう)やスタートボタンのつくりかたなどをまなびましょう。

スクラッチプログラミング - ランゲーム|ゲームオーバーとスタートボタン

ランゲームのつくりかた|パート2

Scratch (スクラッチ)でつくるランゲームについて、3回(かい)にわけておとどけしています。今回(こんかい)は、そのパート2です。

  • パート1では、ネコをずっとはしらせて、ジャンプできるようにしました。
  • パート2(このきじ)では、ネコが障害物(しょうがいぶつ)にあたったらゲームオーバーにして、はしりつづけたタイムをはかれるようにします。ゲームを開始(かいし)・再開(さいかい)するためのボタンもつくります。
  • パート3では、はしるスピードをだんだんはやくしたり、宝石(ほうせき)をゲットできるようにして、ゲームを完成(かんせい)させます。
スクラッチプログラミング - ランゲーム|はしりながらジャンプする
Scratch (スクラッチ)でたのしくあそべるランゲームをつくります。「どれだけながくはしりつづけられるか」をたのしむゲームです。ネコをずっとはしらせたり、ジャンプさせる方法(ほうほう)などをまなびましょう。

サンプルプロジェクト

下(した)にあるのは、これからつくっていくランゲームのサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、ゲームオーバーになるようすやボタンの表示(ひょうじ)、タイムの表示(ひょうじ)をみておいてください。

ランゲームのサンプルGIF
ランゲームのサンプルGIF

障害物(しょうがいぶつ)にあたったらおわり

パート1では、ネコがはしるだけでなく、ジャンプできるようにしました。これは、はしっている途中(とちゅう)ででてくるトゲやマグマをよけられるようにするためです。

ジャンプのタイミングをまちがえてトゲやマグマにあたったら、ゲームオーバーにしましょう。

  1. トゲやマグマにふれたかどうかは、その色(いろ)で判定(はんてい)します。
  2. すべてのスクリプトをとめて、ゲームをおわりにします。
2-1 トゲやマグマのいろにふれたら、ゲームをとめる
2-1 トゲやマグマのいろにふれたら、ゲームをとめる

ゲームオーバーになったら背景(はいけい)がかわるようにします。ゲームが終了(しゅうりょう)したことをわかりやすくするためです。メッセージをつかって、ゲームオーバーになったことをつたえましょう。

2-2 メッセージのブロックをついかする
2-2 メッセージのブロックをついかする

ステージの背景(はいけい)を変更(へんこう)する

ネコからのメッセージをうけとるのは、ステージです。ステージのスクリプトをつくる前(まえ)に、ゲームオーバーになったときに表示(ひょうじ)する背景(はいけい)をつくりましょう。

  1. はいけい1 を複製(ふくせい)して、ゲームオーバーになったことがわかるような背景(はいけい)をつくります。
  2. 背景(はいけい)のちがいをわかりやすくするために、コスチュームの名前(なまえ)を「ゲームちゅう」、「ゲームオーバー」にしておいてください。
2-3 ゲームオーバーのはいけいをつくる
2-3 ゲームオーバーのはいけいをつくる

背景(はいけい)を用意(ようい)できたら、ステージのスクリプトをつくります。

  1. ゲームをはじめるとき、背景(はいけい)のコスチュームは「ゲームちゅう」です。
  2. ゲームオーバーになったとき、背景(はいけい)のコスチュームを「ゲームオーバー」にします。
2-4 はいけいのコスチュームをしていする
2-4 はいけいのコスチュームをしていする

うごきをたしかめよう

緑(みどり)の旗(はた)をおして、ここまでのうごきを確認(かくにん)してみましょう。ネコがトゲやマグマにあたったらゲームがとまり、ゲームオーバーの背景(はいけい)にきりかわるようになりました。

2-5 ゲームオーバーのじょうたい
2-5 ゲームオーバーのじょうたい

ボタンをつくろう

ここからは、あらたにボタンのスプライトを用意(ようい)してスクリプトをつくっていきます。緑(みどり)の旗(はた)をおさなくても、くりかえしゲームをたのしめるようにするためのボタンです。

ボタンのスプライトを追加(ついか)して、コスチュームを2つつくりましょう。コスチュームのちがいをわかりやすくするために、それぞれに名前(なまえ)をつけてください。ここでは、「はしる」と「もういちど」という名前(なまえ)にしています。

  1. はしる:ネコをはしらせるためのボタンのコスチューム
  2. もういちど:ゲームオーバーになったあと、もう一度(いちど)ゲームをはじめるためのボタンのコスチューム
2-6 ボタンのコスチューム
2-6 ボタンのコスチューム

最初(さいしょ)の設定(せってい)

ボタンの最初(さいしょ)の状態(じょうたい)を設定(せってい)しましょう。

  1. 表示(ひょうじ)する位置(いち)は、ステージの中央(ちゅうおう)です。
  2. ほかのスプライトよりも一番(いちばん)手前(てまえ)に表示(ひょうじ)します。
  3. ネコをはしらせるためのボタンのコスチュームにします。
  4. 最初(さいしょ)はかならず表示(ひょうじ)されるようにします。(ゲームを開始(かいし)したら非表示(ひひょうじ)にします)
2-7 ゲームをはじめるときのボタンのスクリプト
2-7 ゲームをはじめるときのボタンのスクリプト

ゲームオーバーになったときの設定(せってい)

ゲームオーバーになったとき、ネコがおくるメッセージをうけとります。もう一度(いちど)ゲームをはじめるためのコスチュームにして、ボタンを表示(ひょうじ)しましょう。

2-8 ゲームオーバーをうけとったときのボタンのスクリプト
2-8 ゲームオーバーをうけとったときのボタンのスクリプト

このボタンがおされたときにどのようにゲームをうごかすのかは、ボタンのコスチュームにおうじてかえますよ。下(した)のようにブロックをつなげておいてください。

2-9「このスプライトがおされたとき」「もし〜なら、でなければ」
2-9「このスプライトがおされたとき」「もし〜なら、でなければ」

「はしる」がおされたとき

まずは、コスチュームが「はしる」のときにボタンがおされた場合(ばあい)です。ネコをはしらせて、ゲームをはじめましょう。

  1. ボタンのコスチュームを確認(かくにん)します。
  2. ゲームをはじめるためのメッセージ スタート をおくります。
  3. ボタンが表示(ひょうじ)されたままだとゲームをやりにくいので、非表示(ひひょうじ)にします。
2-10 ボタンがおされたらゲームをスタートする
2-10 ボタンがおされたらゲームをスタートする

「もういちど」がおされたとき

つづいて、コスチュームが「もういちど」のときにボタンがおされた場合(ばあい)です。もう一度(いちど)ゲームをはじめられるようにしましょう。

  1. ゲームを最初(さいしょ)の状態(じょうたい)にもどすためのメッセージ リセット をおくります。
  2. ネコをはしらせるためのボタンのコスチュームにします。
2-11 ボタンがおされたらゲームをリセットする
2-11 ボタンがおされたらゲームをリセットする

以上(いじょう)で、ボタンのスクリプトができました。

次(つぎ)のセクションからは、緑(みどり)の旗(はた)がおされたときではなく、このボタンをクリックしたときにネコがはしりだすようにしていきますよ。

ネコのスクリプトを修正(しゅうせい)しよう

ネコは、さきほどつくったボタンからのメッセージをうけとります。次(つぎ)のようにスクリプトを修正(しゅうせい)しましょう。

  1. みどりのはたがおされたとき、最初(さいしょ)の状態(じょうたい)を設定(せってい)します。
  2. スタートをうけとったとき、ジャンプできるようにします。
  3. スタートをうけとったとき、はしらせます。
  4. リセットをうけとったとき、最初(さいしょ)の状態(じょうたい)にもどします。
2-12 さいしょのせっていと、メッセージをうけとったときのうごき
2-12 さいしょのせっていと、メッセージをうけとったときのうごき

地面(じめん)のスクリプトを修正(しゅうせい)しよう

地面(じめん)も、ボタンからのメッセージをうけとります。次(つぎ)のようにスクリプトを修正(しゅうせい)しましょう。

  1. みどりのはたがおされたとき、最初(さいしょ)の状態(じょうたい)を設定(せってい)します。
  2. スタートをうけとったとき、地面(じめん)をうごかします。
  3. リセットをうけとったとき、最初(さいしょ)のみためにもどします。
2-13 さいしょのせっていと、メッセージをうけとったときのうごき
2-13 さいしょのせっていと、メッセージをうけとったときのうごき

ジャンプボタンのスクリプトに追加(ついか)しよう

ジャンプボタンは、ネコがはしりはじめたときに表示(ひょうじ)して、ゲームオーバーになったら非表示(ひひょうじ)にします。次(つぎ)のようにブロックを追加(ついか)しましょう。

  1. みどりのはたがおされたとき、このときはまだ非表示(ひひょうじ)です。
  2. スタートをうけとったとき、表示(ひょうじ)します。
  3. ゲームオーバーをうけとったとき、非表示(ひひょうじ)にします。
2-14 ひょうじとひひょうじをきりかえる
2-14 ひょうじとひひょうじをきりかえる

ステージのスクリプトに追加(ついか)しよう

つづいてステージです。ステージも、ボタンからのメッセージをうけとります。リセットをうけとったとき、ゲーム中(ちゅう)の背景(はいけい)にもどしましょう。

2-15 はいけいをリセットする
2-15 はいけいをリセットする

うごきをたしかめよう

ここまでのうごきを確認(かくにん)してみましょう。緑(みどり)の旗(はた)をおしても、ネコははしりません。ボタンをおすとネコがはしりだします。ゲームオーバーになっても、ボタンをおすことで何度(なんど)でもやりなおせるようになりました。

2-16 ステージちゅうおうにあるボタンでゲームをかいしする
2-16 ステージちゅうおうにあるボタンでゲームをかいしする

タイムをはかろう

最後(さいご)に、はしりつづけたタイムをはかれるようにします。ステージにブロックを追加(ついか)していきましょう。

  1. 変数(へんすう) タイム をつくって、最初(さいしょ)の値(あたい)を 0 にします。
  2. スタートをうけとったとき、1秒(びょう)ごとに タイム をふやします。
  3. リセットをうけとったときタイム0 にもどします。
2-17 タイムをはかるためのスクリプト
2-17 タイムをはかるためのスクリプト

はしりつづけたタイムはステージで確認(かくにん)できるようにしたいので、ブロックの左(ひだり)にチェックをいれておきます。ステージに表示(ひょうじ)された変数(へんすう)はドラッグすることができるので、みやすい場所(ばしょ)に移動(いどう)しておいてくださいね。

2-18 へんすうをステージにひょうじする
2-18 へんすうをステージにひょうじする

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

以上(いじょう)で、ランゲームのつくりかたパート2の解説(かいせつ)はおわりです。ネコが障害物(しょうがいぶつ)にあたったらゲームオーバーになって、はしりつづけたタイムをはかれるようになりました。

2-19 ネコのスクリプト
2-19 ネコのスクリプト
2-20 じめんのスクリプト
2-20 じめんのスクリプト
2-21 ジャンプボタンのスクリプト
2-21 ジャンプボタンのスクリプト
2-22 ボタンのスクリプト
2-22 ボタンのスクリプト
2-23 ステージのスクリプト
2-23 ステージのスクリプト

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

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

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

詳細はこちら

まとめ

今回(こんかい)は、Scratch でつくるランゲームの解説(かいせつ)パート2として、以下(いか)のスクリプトをつくりました。

  • 障害物(しょうがいぶつ)にあたったらゲームオーバーにする
  • ボタンをおすとネコがはしりだす
  • ボタンをおしてゲームをリセットする
  • はしりつづけたタイムをはかる

今後(こんご)のパート3では、ゲームをよりおもしろくするために、はしるスピードをはやくしたり、宝石(ほうせき)をゲットできるようにしてゲームを完成(かんせい)させます。おたのしみに!

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

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

関連記事

Start Here - Scratch (スクラッチ)
Scratch (スクラッチ)記事(きじ)のレベル別一覧です。初級、中級、上級、拡張機能にわけてまとめました。
JavaScript - タイプライター風に一文字ずつ表示する方法
キーボードで入力しているかのようなタイピングアニメーションを JavaScript で作ります。左から一文字ずつ順番に表示したあとで、今度は右から一文字ずつ削除するようコーディングします。
CSS Art – Combining Gradients and Custom Properties – Part 2
Fireworks are dazzling, spectacular, and enjoyable to observe for any celebration. Join us and learn how to create them step-by-step using CSS.
CSS Animation – steps() Function Multi-Step Animation
Smooth animations are delightful to look at, but sometimes, you may want to control each keyframe with CSS. Learn how in this step-by-step article.