スクラッチプログラミング - ジャンピングゲームのつくりかた

スプライトをジャンプさせてあそぶゲームのつくりかたをしょうかいします。はいけいをスクロールさせて車をはしらせましょう。そうさは画面(がめん)をタッチするだけでかんたんです!

スクラッチプログラミング - ジャンピングゲームのつくりかた
Photo by Matt Hudson on Unsplash
📖
Pyxofy (著) 電子書籍「きょうからはじめるスクラッチプログラミング入門」を出版しました! ぜひこちらから詳細をご覧ください。

サンプルさくひんであそんでみよう

今回(こんかい)しょうかいするのは、車をジャンプさせてバナナをとびこえるゲームです。

  1. 画面(がめん)をタッチ、パソコンではクリックすると、車がジャンプする
  2. バナナにぶつかったら、ゲームオーバー

(プロジェクトがひょうじされないばあいは、ScratchのPyxofyページをごらんください)

このきじをよむとわかること

  • はいけいをスクロールさせるほうほう
  • 画面(がめん)のタッチ(クリック)で、スプライトをうごかすほうほう
  • あたりはんてい(もしなにかにふれたなら)

ジャンピングゲームをつくろう

はいけいをスクロールさせながらスプライトをジャンプさせるゲームをつくってみましょう。

  1. はいけいのスプライトをよういする
  2. はいけいをプログラミングする
  3. 車をプログラミングする
  4. ゲームオーバーをきめる
  5. プログラムかんせい

道路(どうろ)のスプライトをえがきましょう。

スプライトを描くボタンを押してペイントエディターを開いて道路を描く

ふたつめのはいけい

はいけいをスクロールさせるために、もうひとつはいけいを用意(ようい)しましょう。

  • 道路(どうろ)のスプライトをながおし(パソコンでは右クリック)
  • 出てきたメニューから「ふくせい」をえらぶ
スプライトの横に出てきたメニューから複製を選ぶ

はいけいとしてつかう道路(どうろ)のスプライトがふたつできました!

道路のスプライトが二つ用意された

道路(どうろ)のスプライトを、左へスクロールさせましょう。ステージの右から左へ、ずっとうごきつづけるようにしますよ。

今回(こんかい)えがいた道路(どうろ)のスプライトは、

  • 左はしのxざひょう:-477
  • 右はしのxざひょう:477

です。

»座標(ざひょう)のしらべかたは、よこへスクロール!はいけいをうごかそうの記事(きじ)をごらんください。

ひとつめのはいけいをプログラミングしよう

  • ひとつめの道路(どうろ)をえらぶ
一つ目の道路が選択されて青くなる

道路(どうろ)のスプライトははいけいとしてつかうので、ほかのスプライトよりかならずうしろがわに表示(ひょうじ)されるようにしましょう。つかうブロックは「さいはいめんへいどうする」です。

  • さいしょは、まん中に表示(ひょうじ)する
  • さいはいめんへいどうする
道路のスプライトがステージの中央に表示されている状態
  • ずっと左へうごかす
道路のスプライトがステージの左の方へ移動している画像
  • 左はしまでうごいたら
道路のスプライトがステージの左端から少しだけ見えている状態
  • 右はしに表示(ひょうじ)する
道路のスプライトがステージの左端から少しだけ見えている状態

右から左へ、ずっとうごきつづけるようになりました!

ふたつめのはいけいをプログラミングしよう

いまくみあわせたブロックを、ふたつめの道路(どうろ)のスプライトの上にドラッグしてコピーします。

  • プログラムをコピーする
コードの一番上を押さえてコピーしたいスプライトの上にドラッグする

ふたつめの道路(どうろ)は、右はしからスタートさせます。

  • さいしょのxざひょうを「477」にかえる
最初のx座標をステージの右端にする

ふたつの道路(どうろ)がつながって、左へスクロールするようになりました!

緑色の車のスプライトが選ばれた
  • 左がわに表示(ひょうじ)する
  • 大きさをすこし小さくする
車の位置はステージの左端で道路のスプライトの上

車をジャンプさせよう

ステージのどこかをタッチ(クリック)したら、車がジャンプするようにしましょう。

タッチ(クリック)しているかどうかは、「マウスがおされた」ブロックであらわすことができます。

マウスを押してジャンプさせるコードをつなげる

マウスがおされたかどうかは、プログラムをうごかしているあいだずっとチェックするひつようがあります。「ずっと」ブロックでかこむのを、わすれないようにしましょう!

車を操作するためのコードはずっとブロックで囲む

ステージをタッチ(クリック)すると、車がジャンプするようになりました!

車がジャンプして道路から浮いている画像

車のむきをかえよう

ジャンプするときの車のむきをかえてみましょう。

  • さいしょは、右にむける…「(90)どにむける
最初は車は右を向いている
  • 上にいくときは、右上にむける…「←(15)どまわす
ジャンプした車は右上に傾いている
  • 下にいくときは、右下にむける…「→(30)どまわす
下に降りてくるときは車は右下に傾いている
  • ジャンプしおわったとき、0.1びょうまってから…「(0.1)びょうまつ
下に降りてきて道路に着いたとき0.1秒間は右下に傾いたまま
  • 道路(どうろ)では、右にむける…「(90)どにむける
ジャンプが終わったら車を右に向ける

ジャンプするときに、車のむきがかわるようになりました!

角度を変えながら車がジャンプする一連の画像

車がバナナにあたったら、ゲームオーバーにしてゲームをとめましょう。

バナナをプログラミングしよう

  • Bananas (バナナ)」のスプライトをえらぶ
バナナのスプライトが選ばれている

右から左へずっとうごきつづけるようにプログラミングしますよ。

バナナのスプライトは、

  • 左はしのxざひょう:-264
  • 右はしのxざひょう:263

です。

»座標(ざひょう)のしらべかたは、よこへスクロール!はいけいをうごかそうの記事(きじ)をごらんください。

バナナがステージの右から左へ動き続けるコード

車がバナナにあたったら

ジャンプにしっぱいして車がバナナにあたったら、ゲームオーバーにします。

ゲームをとめるためにつかうブロックは、「すべてをとめる」です。車にブロックを追加(ついか)しましょう。

  • 「車」をえらぶ
車のスプライトが選ばれている
  • 「もし<Bananasにふれた>なら」
  • すべてをとめる
バナナにふれたらプログラムをとめるコード

車をジャンプさせてあそぶゲームができました!

車の完成プログラム

(サンプルさくひんのプログラムをぜんぶ見たいかたは、 ScratchのPyxofyページから、「中を見る」でごらんください)

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

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

詳細はこちら

まとめ

今回(こんかい)は、ジャンピングゲームのつくりかたをしょうかいしました。

画面(がめん)をタッチ、パソコンではクリックして、スプライトをそうさする方法(ほうほう)は、とてもかんたんなので、ぜひおぼえておきましょう。

次回(じかい)は、画面(がめん)のタッチでスプライトをふわふわうかせてあそぶゲームのつくりかたをしょうかいします。

\この記事が参考になったら おねがいします/

Start Here - Scratch (スクラッチ)
Scratch (スクラッチ)記事(きじ)のレベル別一覧です。初級、中級、上級、拡張機能にわけてまとめました。
Scratch Programming ebook for Beginners - 入門
スクラッチ初心者の方へ向けた内容を ebook にまとめました。スクラッチの基本から簡単なスクリプト(プログラム)の作り方まで、全108ページ。ぜひダウンロードしてご活用ください。