スクラッチプログラミング - ボールのリアルな落下(らっか)・はねかえり

ボールがおちたり、バウンドしたり、だんだんゆっくりになったりするうごきを Scratch でつくります。はねかえりを色(いろ)で判定(はんてい)するので、応用(おうよう)のきくスクリプトになっています。

スクラッチプログラミング - ボールのリアルな落下(らっか)・はねかえり

ボールのはねかえり運動(うんどう)

この記事(きじ)では、Scratch (スクラッチ)をつかって、ボールの自然(しぜん)なうごきをつくる方法(ほうほう)を紹介(しょうかい)します。

ボールのスピードや、バウンドのしやすさなどを簡単(かんたん)にかえられるスクリプトなので、はやくうごくボール、よくはねかえるボール、など、おこのみのボールをつくってみましょう。

サンプルプロジェクト

下(した)にあるのは、ボールがバウンドするサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、ボールのうごきをみておいてください。

Scratch|ボールがバウンドするサンプルGIF
Scratch|ボールがバウンドするサンプルGIF

ボールをうごかす準備(じゅんび)

まずは、ボールをうごかすための変数(へんすう)をつくります。ボールの最初(さいしょ)の位置(いち)もきめておきましょう。

  • x速度(そくど):横(よこ)へうごかすための変数(へんすう)
  • y速度(そくど):縦(たて)へうごかすための変数(へんすう)
さいしょのいちをしていして、へんすうを0でしょきかする
さいしょのいちをしていして、へんすうを0でしょきかする

今回(こんかい)は、マウスをおす、またはタップで、ボールをうごかします。ボールのむきとスピードは、「マウスがおされた位置(いち)」と「ボールの位置(いち)」から計算(けいさん)します。

  1. マウスがおされたら、ボールをうごかせるようにします。
  2. マウスがおされている間(あいだ)は計算(けいさん)しつづけて、マウスがはなされたらうごくようにします。
  3. マウスの位置(いち)とボールの位置(いち)から、x速度(そくど)y速度(そくど) を計算(けいさん)します。
マウスをおしてボールをうごかせるようにする
マウスをおしてボールをうごかせるようにする

ボールのはやさを調整(ちょうせい)するために、今回(こんかい)は、マウスの位置(いち)とボールの位置(いち)の差(さ)を 7 でわりました。うごきをはやくしたい場合(ばあい)は、たとえば 5 にしたり、おそくしたい場合(ばあい)は 10 にしてみてくださいね。

以上(いじょう)で、ボールをうごかすための準備(じゅんび)ができました。

上下(じょうげ)へうごかす

ここからは、ボールの縦(たて)のうごきをつくっていきます。ブロック定義(ていぎ)で 上下(じょうげ)へうごかす というブロックをつくって、うごきをまとめていきましょう。

  1. 「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれてブロックをつくります。
  2. 重力(じゅうりょく)をあたえるために、y速度(そくど) をつねにへらして下(した)へうごくようにします。
つねにしたへうごかす
つねにしたへうごかす

特定(とくてい)の色(いろ)にふれたら、はねかえるようにしましょう。ボールが上(うえ)へうごいている場合(ばあい)と、下(した)へうごいている場合(ばあい)で条件(じょうけん)をわけて、色(いろ)をとおりぬけないように、位置(いち)を調整(ちょうせい)します。

いろにふれないいちまでうごかす
いろにふれないいちまでうごかす

さきほど、「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれてブロックをつくった理由(りゆう)は、この、y 座標(ざひょう)が 1 ずつ変化(へんか)する様子(ようす)をみせずに、色(いろ)のはしピッタリではねかえるようにみせるためです。

つづけて、うごいてきたむきとは逆方向(ぎゃくほうこう)へバウンドするようにします。-0.8 をかけた値(あたい)を y速度(そくど) に指定(してい)しましょう。

たてほうこうへはねかえす
たてほうこうへはねかえす

ここでつかっている 0.8 という値(あたい)は、反発係数(はんぱつけいすう)というものです。これは、モノのはねかえりやすさをあらわします。

  • 0 にすると、ピタッととまります。
  • 0.3 にすると、鉄球(てっきゅう)のような、はねかえりにくいモノになります。
  • 0.9 にすると、スーパーボールのような、よくはねかえるモノになります。
  • 1 にすると、永遠(えいえん)にバウンドしつづけます。

ここまでで、ボールを縦(たて)へうごかし、特定(とくてい)の色(いろ)にふれたらバウンドするうごきができました。

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

次(つぎ)は、ボールの横(よこ)のうごきです。かんがえかたは、縦(たて)のうごきとほぼおなじですが、横(よこ)のうごきには重力(じゅうりょく)はない、という点(てん)がことなります。

  1. 「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれてブロックをつくります。
  2. x 座標(ざひょう)は、変数(へんすう)におうじて変化(へんか)させます。
xざひょうをへんすうずつかえる
xざひょうをへんすうずつかえる

特定(とくてい)の色(いろ)にふれたら、はねかえるようにしましょう。ボールが左(ひだり)へうごいている場合(ばあい)と、右(みぎ)へうごいている場合(ばあい)で条件(じょうけん)をわけて、色(いろ)をとおりぬけないように、位置(いち)を調整(ちょうせい)します。

いろにふれないいちまでうごかす
いろにふれないいちまでうごかす

つづけて、うごいてきたむきとは逆方向(ぎゃくほうこう)へバウンドするよう、-0.8 をかけた値(あたい)を x速度(そくど) に指定(してい)しましょう。

よこほうこうへはねかえす
よこほうこうへはねかえす

以上(いじょう)で、ボールを横(よこ)へうごかし、特定(とくてい)の色(いろ)にふれたらはねかえるうごきができました。

うごきの微調整(びちょうせい)

さて、ここからは、ボールのうごきを微調整(びちょうせい)していきます。

今回(こんかい)、ボールをうごかす変数(へんすう)の値(あたい)は、-0.8 をかけたりするので小数(しょうすう)になります。そのため、うごく量(りょう)がすごくすくなくなってボールがとまりかけているときにも、カクカクとこきざみにうごいてしまいます。

このちょっとしたうごきをふせぐためのブロックを追加(ついか)していきましょう。上下(じょうげ)へうごかす左右(さゆう)へうごかす の下(した)に、次(つぎ)のようにブロックをつなげてください。

  • うごく量(りょう)が 1 よりちいさくなったら、変数(へんすう)の値(あたい)を 0 にして、うごきをとめます。
へんすうのぜったいちが1よりちいさいなら、へんすうを0にする
へんすうのぜったいちが1よりちいさいなら、へんすうを0にする

◯ のぜったいち をつかっているのは、変数(へんすう)の値(あたい)が「1 よりちいさい」だけでなく、「-1 よりおおきい」とき(-0.9-0.5 など)でも 0 になるようにするためです。これで、ボールのこきざみなうごきをふせげるようになりました。

次(つぎ)に、摩擦力(まさつりょく)を追加(ついか)しましょう。

地面(じめん)の上(うえ)を横方向(よこほうこう)へうごいているときに、ボールのうごきがだんだんおそくなるようにします。ボールが地面(じめん)の上(うえ)にある、ということは、縦(たて)のうごきがゼロのときです。上下(じょうげ)へうごかす の一番下(いちばんした)にブロックを追加(ついか)してください。

  • 0.96 をかけた値(あたい)を x速度(そくど) に指定(してい)します。
xそくどに0.96をかける
xそくどに0.96をかける

この 0.96 という値(あたい)は、モノと地面(じめん)がせっしているときの、すべりやすさをあらわしています。もっとよくすべるようにしたい場合(ばあい)は、0.99 などにしてみてくださいね。

以上(いじょう)で、上下(じょうげ)へうごかす左右(さゆう)へうごかす を定義(ていぎ)できたので、ずっと の間(あいだ)につなげておきましょう。

ずっとボールをうごかせるようにする
ずっとボールをうごかせるようにする

ペンでねらう

最後(さいご)に、ペンのスクリプトです。マウスのクリックまたはタップでボールをうごかすときに、ボールからマウスのところへ線(せん)がひかれるようにします。

あたらしいスプライトと、拡張機能(かくちょうきのう)のペンを追加(ついか)してから、ブロックをつなげていきましょう。

  1. 最初(さいしょ)に余計(よけい)な線(せん)がえがかれないよう、ペンをあげるぜんぶけす をつなげておきます。
  2. ペンの色(いろ)とふとさを指定(してい)します。
ペンのさいしょのせってい
ペンのさいしょのせってい
  1. ペンでえがくのは、マウスがおされている間(あいだ)です。ボールのところからマウスの位置(いち)まで線(せん)をひきます。
  2. マウスがはなされたら、線(せん)をけします。
マウスがおされているいちまでせんをえがく
マウスがおされているいちまでせんをえがく

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

自然(しぜん)なうごきをするボールのスクリプトが完成(かんせい)です。

ボールのスクリプト
ボールのスクリプト
ペンのスクリプト
ペンのスクリプト

Scratch の Pyxofy ページへいって、実際(じっさい)にボールをうごかしてあそんでみてください。Scratch ボールバウンド by Pyxofy

Scratch|ボールバウンド by Pyxofy
Scratch|ボールバウンド by Pyxofy

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

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

特設ページはこちら

まとめ

今回(こんかい)は、Scratch でボールが自然(しぜん)に落下(らっか)したりバウンドしたりするスクリプトをつくりました。

リアルなボールにするためには、はねかえりやすさや摩擦力(まさつりょく)も計算(けいさん)にいれてうごかします。スピードやバウンドのしやすさ、すべりやすさなどをすきなようにかえてみて、ボールがどのようにうごくか、いろいろためしてみてくださいね。

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

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

関連記事

Scratch - Pyxofy
Scratch 3.0の使い方を、プログラミング初心者や子どもにも分かりやすく紹介しています。
JavaScript - ボールが跳ね返るアニメーションの作り方
ボールが動き続けるアニメーションを JavaScript で作ります。requestAnimationFrame() メソッドの使い方や、キャンバスに図形を描画してアニメーションを作る基本的な方法を学びましょう。
CSS Art
Articles for creating CSS Art.
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.