0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

引数に最小値(min)最大値(max)を入れるとランダムな整数を返してくれる関数

Posted at

ランダムな整数が欲しい!

そんなときはこの処理を使おう!
自分がよく使っている関数です。

const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

なんのこっちゃない処理ですが
ブラウザゲーム作成時によく使います。

rand(1, 10) //1〜10までのランダムな整数を返してくれます

いろいろと応用が効くので使いやすい。
DOM操作時でも、例えばランダムに画面外からやってくる感じを演出するときにも使えます。

element.style.transform = `translate(${rand(-100, 100)}%, ${rand(-100, 100)}%)`

とかってしてやると
縦軸、横軸ランダムな位置に配置することができるので、
css animationと組み合わせてやると
ランダムな位置に発生して所定の位置へ移動してくる動きを要素に与えることができます。

const els = document.querySelectorAll('[class^=devicon-]')
      els.forEach(el => {
        el.style.transform = `translate(${rand(-100, 100)}%, ${rand(-100, 100)}%)`
        el.classList.add('icon-move')
        setInterval(() => {
          el.style.zIndex = this.rand(-1, 1)
        }, this.rand(4000, 8000))
      })

4秒から8秒のうちランダムな秒数後にz-indexを上げ下げすることで表示、非表示をコントロールしています。
実際に私のポートフォリオの「study」ページにて使用していますので
ぜひ動きをみてにきてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?