スクラッチプログラミング - ドライブゲームのつくりかた
やじるしキーで車をそうさするドライブゲームをつくってみましょう。画面(がめん)をスクロールさせて車をはしらせますよ。リストをつかって座標(ざひょう)をランダムにえらぶ方法(ほうほう)もしょうかいします。
サンプルさくひんであそんでみよう
今回(こんかい)しょうかいするのは、車を左右にうごかしてあそぶドライブゲームのつくりかたです。
- 左右のやじるしキーで車をうごかす
- さんかくけいのブースターにふれると、スピードアップする
- ほかの車にふれると、ゲームオーバー
【キーボードのないタブレットでもあそべます!】
みどりのはたをおしたあと、「タブレット キーボードなし」をえらんでください。ステージ右下にコントローラーが出てきます。タップしてそうさできますよ。
(プロジェクトがひょうじされないばあいは、ScratchのPyxofyページをごらんください)
このきじをよむとわかること
- 画面(がめん)をスクロールさせるほうほう
- やじるしキーのつかいかた
- リストのつかいかた
ドライブゲームをつくろう
つぎの手順(てじゅん)で、ドライブゲームをつくってみましょう!
1. はいけいをよういする
- 道路(どうろ)のはいけいをえがく
- いちばん上に、ゴールをつくる

2. スクロールさせる
道路(どうろ)に白線(はくせん)をひいて、ステージのはしからはしへうごかしましょう。そうすると、画面(がめん)をスクロールさせることができますよ。
はくせんをうごかそう
- 白線(はくせん)のスプライトをえがく

白線(はくせん)のクローンをつくって、上から下へうごかします。
- 「はたがおされたとき」
- 1びょうかんかくで、クローンをつくる
- 「クローンされたとき」
- ステージの上に表示(ひょうじ)して、下までうごかす

白線(はくせん)がうごきつづけることで、スクロールするようになりました!

3. じぶんの車をよういする
そうさする車をプログラミングしましょう。
- 上から見た車のスプライトをえがく

- 座標(ざひょう)は、ステージの下のほうにする

4. やじるしキーでそうさする
車を左右にうごかせるようにしましょう。

やじるしキーをおすと、となりの車線(しゃせん)にいどうできるようになりました!
でもこのままだと、キーをなんどもおすと車が道路(どうろ)から出てしまいます。

どうろから出ないようにしよう
キーをおしたときに、車が道路(どうろ)から出ないようにしましょう。
- 車が道路(どうろ)の右がわ、xざひょうが120の位置(いち)にあるときは、「みぎむきやじるしキー」をおしてもうごかせない

- 車が道路(どうろ)のまん中か左がわ、xざひょうが120より小さいときは、右にうごかせる

- みぎむきやじるしキーがおされたとき
- もしxざひょうが、120より小さいなら
- xざひょうをふやして、右にうごかす

「ひだりむきやじるしキー」で左にうごかすときも、おなじようにかんがえます。
- ひだりむきやじるしキーがおされたとき
- もしxざひょうが、-120より大きいなら
- xざひょうをへらして、左にうごかす

やじるしキーをつかって、3つの車線(しゃせん)をいどうできるようになりました!
5. どうろにブースターをつくる
車をスピードアップさせるブースターをつくりましょう。
- ブースターのスプライトをえがく

上から下へうごかそう
- 上から下へうごかしつづける

道路(どうろ)のまん中にブースターが出てくるようになりました!

リストをつくろう
まん中だけでなく、道路(どうろ)の右がわと左がわにも、ブースターを表示(ひょうじ)したいですね!
3つの車線(しゃせん)のどれかに表示(ひょうじ)するために、リストをつかいましょう。
- xざひょうを入れるリストをつくる
- 道路(どうろ)のまん中「0」、右がわ「120」、左がわ「-120」、3つのxざひょうを入れる

- リストに入れたxざひょうの、どれかをつかうようにする

ブースターが、3つの車線(しゃせん)のどこかに出てくるようになりました!

6. ほかの車をはしらせる
ブースターとおなじように、ほかの車が出てくるようにしましょう。
- 上から見た車のスプライトをえがく

- ブースターのプログラムをドラッグして、コピーする

- うごくスピードを、すこしおそくする

ほかの車が、3つの車線(しゃせん)のどこかに出てくるようになりました!

7. あたりはんてい
3つのあたりはんていで、ゲームをかんせいさせましょう。
- じぶんの車をえらぶ

スピードアップ
- ブースターにふれたら、yざひょうをふやしてスピードアップさせる

ゲームオーバー
- ほかの車にふれたら、ゲームをとめる

ゲームクリア
- ゴールにふれたら、ゲームをとめる

8. プログラムかんせい
ドライブゲームのかんせいです!


「きょうからはじめるスクラッチプログラミング入門」by Pyxofy
Pyxofy から Scratch の基本をまとめた電子書籍を出版しました。
Apple Books・Kindle でご購入ください。
まとめ
今回(こんかい)は、やじるしキーで車をそうさするドライブゲームをつくってみました。
白線(はくせん)をうごかしてスクロールさせると、車がはしっているように見えましたね。座標(ざひょう)をランダムにえらぶために、リストをつかったところもポイントでした。
次回(じかい)は、ケーキメーカーのつくりかたをしょうかいします。
\この記事が参考になったら Tweet おねがいします/