hibikousinnkibouのブログ

駆け出しプログラマーによる足跡ブログ

落ちゲーアプリ作成16(ランダム落下について)

落ちてくる忍者のランダム化に取り組んだのですが、

落ちてくるスピードをランダムにするのはとても簡単でした。

下記の記事を参考にしました。

【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) | 侍エンジニアブログ

コードがめちゃくちゃブサイクですが、

// スピードA団
const random1 = Math.floor( Math.random() * 2000 ) + 17000;
document.querySelector(`#ninjas_a`).animate(
[
{ transform: 'translateY(0)' },
{ transform: 'translateY(3000px)' }
],
{duration: random1}
);

これをA、B、Cと作成することによってそれぞれのスピードを指定の範囲内でランダムにしました。

Mathに関しては以下の記事参照

数学関数(Math) - とほほのWWW入門

一応小数点以下を切り捨てる floor を利用し、3000px を17秒〜19秒?で落ちるようにすることにしました。

その後、 css で左右とスタート位置を設定している忍者の位置もランダムにしようとしたのですが、 css で乱数を使用することは難しいらしく、 JavaScript を利用した以下の記事しか見つかりませんでした。

CSS で乱数を使えるようにする - Qiita

内容も理解するのに時間がかかりそうなので、またの課題にしたいと思います。

引き続き就活頑張りながら進めていきたいと思います。