JavaScriptでランダムに要素を動かす

ランダム移動サンプル

赤い玉がガタガタ移動しています。

ランダム移動コード

CSS

.randomWrap {
  background-color: #ccc;
  position:relative;
  height: 300px;
  margin: 24px 0;
  overflow: hidden;
}

#randomMove {
  position: absolute;
  transition: .1s;
  transform: translate(-50%, -50%);

  /*見た目*/
  width : 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
}

translate を使って、真ん中になるように調整しています。動き自体は position 値を JavaScript で変更することで移動させます。

JavaScript

function randomMove(id) {
  var randomElm = document.getElementById(id);

  //初期値、ど真ん中にする
  var randomTop = 50;
  var randomLeft = 50;

  randomElm.style.top = randomTop + "%";
  randomElm.style.left = randomLeft + "%";

  var timer= setInterval(function() {

    if(Math.random() * 2 < 1) {
      randomTop++;
    } else {
      randomTop--;
    };

    if(Math.random() * 2 < 1) {
      randomLeft++;
    } else {
      randomLeft--;
    };

  randomElm.style.left = randomLeft + "%";
  randomElm.style.top = randomTop + "%";
  }, 100);
};

//使い方
randomMove("randomMove");

Math.random を使って半々の確率で、position 値を 1% 増やすか減らすかを決めています。

このコードの最大の問題点？は、top 値と left 値が 0% 以下、または 100% 以上になってしまう可能性があるということです。

overflow ではみ出したら見えないようにはしていますが、ずっとサンプルを見ているとそのうち消えてしまいます。なので改善してみます。

はみ出さないランダム移動サンプル

ずっとみていてもはみ出さないで領域内をずっとガタガタ動いています。

はみ出さないランダム移動コード

CSS

.randomWrap {
  background-color: #ccc;
  position:relative;
  height: 300px;
  margin: 24px 0;
}

#randomMove2 {
  position: absolute;
  transition: .1s;
  transform: translate(-50%, -50%);

  width : 5px;
  height: 5px;
  border-radius: 50%;
  background-color: blue;
}

はみ出さないので overflow の指定はいりません。

JavaSript

function randomMove2(id) {
  var randomElm = document.getElementById(id);

  var randomTop = 50;
  var randomLeft = 50;

  randomElm.style.top = randomTop + "%";
  randomElm.style.left = randomLeft + "%";

  var timer= setInterval(function() {

    if(Math.random() * 2 < 1) {
      randomTop++;
    } else {
      randomTop--;
    };

    if(randomTop === 0) {
      randomTop = 2;
    }
    if(randomTop === 100) {
      randomTop = 98;
    }

    if(Math.random() * 2 < 1) {
      randomLeft++;
    } else {
      randomLeft--;
    };

    if(randomLeft === 0) {
      randomLeft = 2;
    }
    if(randomLeft === 100) {
      randomLeft = 98;
    }

  randomElm.style.left = randomLeft + "%";
  randomElm.style.top = randomTop + "%";
  }, 100);
};

randomMove2("randomMove2");

変更があった箇所は赤文字の部分。単純にランダム変化の結果 100% になってしまった場合は 98% に、0% になった場合は 2% にしているだけです。1% ではなく 2% 変化させることで、必ず動いている状態になります。

まとめ

どこで使うべきか、というか使うことはない動きな気がしますが、ランダムなので少し見ていて楽しいです。

canvas とかと組み合わせたらもう少しかっこよいエフェクト的なのも作れるかもしれません。