【Scratch】ボートレースを作ろう!/「Code Club作品プロジェクトで学ぶ」<レベル1>

2019年5月2日

スクラッチのネタを探していたところ、Code Clubのサイトを見つけました。
CoderDojoのような非営利団体で、世界中にクラブが存在しています。
今回はCode Clubのスクラッチプロジェクトから「ボートレース」を紹介します。

【Scratch】ボートレースを作ろう!/「codeclub作品プロジェクトで学ぶ」

Code Club /Code Club 作品プロジェクトで学ぶ

Code Club とは

Code Clubは、Raspberry Pi 財団の一部です。

ラズベリーパイ財団とは、世界中の人々の手にコンピューティングとデジタル製作の力を注ぐために働く英国の慈善団体です。
ラズパイ財団のミッションは、「私たちは、より多くの人々が仕事のためにコンピューティングとデジタル技術の力を利用し、自分にとって重要な問題を解決し、創造的に表現できるようにします。」。

Code Clubで、毎週コードを学習する若者が18万人いるそうです。
そんなCode Clubは、世界中に12,000箇所に存在しています。

Code Club の豊富なチュートリアル

今回は、Scratch のチュートリアルからボートレースを選択しました。
Sratch のプロジェクトも2018年12月時点で38あり、その他にもラズベリーパイやHTML、pythonなどのチュートリアルが充実していますよ。

Code Club の豊富なチュートリアル
Code Club の豊富なチュートリアル

さぁ、【Scratch】ボートレースを作ろう!/「Code Club作品プロジェクトで学ぶ」でプログラミングをはじめよう。

【Scratch】ボートレースを作ろう!/「Code Club作品プロジェクトで学ぶ」で学べる知識

  • 繰り返し(ループ)
  • 条件文(もし〇〇なら)
  • コスチュームの切り替え
  • 変数

まずは【Scratch】「ボートレースを作ろう!」の工程をかくにん

  1. 背景を入れます
  2. ボートのスタート位置、向きを設定
  3. ボートの動きを設定
  4. 一度動かしてみて問題点を修正
  5. ボートのクラッシュをつくります
  6. ボートがコースアウトしたときの動きを設定
  7. 新たに魚のスプライトを追加
  8. 点数をつけます
  9. 得点の入り方を設定
  10. ゴールを設定
  11. バグ(不具合)を修正し完成です!

1 背景を入れます/【Scratch】ボートレースを作ろう!

背景の迷路のようなボートコースとボートのスプライトはCode Clubのオリジナルです。
同クラブのScratchチュートリアルからScratchサイトに飛び、リミックスさせてもらいます。

背景を入れます/【Scratch】ボートレースを作ろう!

2 ボートのスタート位置、向きを設定/【Scratch】ボートレースを作ろう!

最初ボートは横を向いています。
まっすぐ上を向くようにします。
スタート位置も現状を固定します。

ボートのスタート位置、向きを設定/【Scratch】ボートレースを作ろう!

3 ボートの動きを設定/【Scratch】ボートレースを作ろう!

ボートをゲームで動かすために、ボートをマウスポインターへ動くように設定します。

ボートの動きを設定/【Scratch】ボートレースを作ろう!

4 一度動かしてみて問題点を修正/【Scratch】ボートレースを作ろう!

一度、緑色の旗をクリックして動かしてみると、ボートがマウスポインターに追いつくと、グルグル回ってしまいます。
そこで、ボートとマウスポインターの距離を少し離します。
ここでは条件式を使いました。

一度動かしてみて問題点を修正/【Scratch】ボートレースを作ろう!

5 ボートのクラッシュをつくります/【Scratch】ボートレースを作ろう!

ボートのスプライトを右クリックして複製を作ります。
その複製をコースアウトして大破したボートとして使いたいので、手のマークをクリックし、延びた線の先を左右に振って、画像をグシャグシャにします。
名前は「Crash」に変更しておきました。

ボートのクラッシュをつくります/【Scratch】ボートレースを作ろう!

6 ボートがコースアウトしたときの動きを設定/【Scratch】ボートレースを作ろう!

ここでも条件式を使います。
コースは茶色の枠でできているので、ボートが茶色に触れたらクラッシュのコスチュームに変わり、元のボートになってスタート地点に戻るようにしました。

ボートがコースアウトしたときの動きを設定/【Scratch】ボートレースを作ろう!

7 新たに魚のスプライトを追加/【Scratch】ボートレースを作ろう!

これだけだと味気ないので、魚を追加し、隅に隠れている魚にボートが触れたら得点されるようにしていきます。
魚はボートと同じくらい小さくしておきます。

8 点数をつけます/【Scratch】ボートレースを作ろう!

点数は、変数を使って作ることができます。
変数名は「スコア」としました。

点数をつけます/【Scratch】ボートレースを作ろう!

9 得点の入り方を設定/【Scratch】ボートレースを作ろう!

条件式を使って、ボートが魚に触れたら点数が増えていくように設定しました。

得点の入り方を設定/【Scratch】ボートレースを作ろう!

10 ゴールを設定/【Scratch】ボートレースを作ろう!

右下の黄色がゴール地点です。
ボートがゴールしたら、すべてのプログラムを止めるように設定します。

11  バグ(不具合)を修正し完成です!/【Scratch】ボートレースを作ろう!

一度動かしてみます。
特に問題はありませんでした。
音がなくて、寂しかったので、得点箇所などに音を入れました。

バグ(不具合)を修正し完成です!/【Scratch】ボートレースを作ろう!

最初は誰だって初心者です。
やりながら順番に覚えていきましょう。
さぁ、プログラミングをはじめましょう。