ブログ

JavaScriptで動くおみくじ【サンプル】

ユミカール
2023.01.06

システム開発

＃エンジニア
＃JavaScript
＃技術

2023年あけましておめでとうございます。
本年もよろしくお願いいたします！

皆さん初詣はお済みですか…？
初詣にまだ行けてない方、行ったけどおみくじを引きそびれた方、
大丈夫です。2023年のおみくじ今ここで引けます！！！

ということで早速、今年の運勢占いをどうぞ↓↓
おみくじページへ移動

結果はいかがでしたか？　楽しんでもらえたら嬉しいです。
そして、ランダムで結果が出てアニメーションもついているこのおみくじの作り方、解説しちゃいます！

まずはサンプルソースそのままどうぞ

この後、コード解説していきます！
今回はアニメーションの部分もJavaScriptで作りました。

<button id="draw">おみくじを引く！</button>
<p id="start" class="start">
　<img id="rotate" src="img/ここにおみくじ本体の画像を入れる.png" alt="おみくじ">
</p>
<p>
　<img src="" id="fortune" class="fortune">
</p>

<script>

 const results = [
    'daikichi.png',
    'kichi.png',
    'tyuukichi.png',
    'tyuukichi.png',
    'syoukichi.png',
    'syoukichi.png',
    'suekichi.png',
    'suekichi.png',
    'kyou.png'
  ];

  const elem = document.getElementById('draw');
  const element = document.getElementById('start');
  const rotateItem = document.getElementById('rotate');
  const target = document.getElementById('#draw');

  elem.addEventListener('click', function() {
    if (element != null) {
      tatefuri();
    }
  });

  function tatefuri() {
    element.animate(
      [{
        transform: 'translateY(0)'
      }, {
        transform: 'translateY(-30px)'
      }, {
        transform: 'translateY(0)'
      }], {
        duration: 700,
        iterations: 3
      });
    setTimeout(function() {
      kaiten();
    }, 2400);
  }

  function kaiten() {
    element.animate(
      [{
        transform: 'rotate(0deg)'
      }, {
        transform: 'rotate(180deg)'
      }], {
        duration: 700,
        easing: 'linear',
        fill: 'forwards'
      });
    setTimeout(function() {
      touka();
      btn();
    }, 1000);
  }

  function btn() {
    target.animate(
      [{
        opacity: 1
      }, {
        opacity: 0
      }], {
        duration: 500,
        fill: 'forwards'
      });
    setTimeout(function() {
      target.remove();
    }, 500);
  }

  function touka() {
    element.animate(
      [{
        opacity: 1
      }, {
        opacity: 0
      }], {
        duration: 500,
        fill: 'forwards'
      });
    setTimeout(function() {
      element.remove();
      fortuneAnime();
    }, 500);
  }

  function fortuneAnime() {
    const key = Math.floor(Math.random() * results.length);
    const fortune = document.getElementById("fortune");
    fortune.src = "img/" + results[key];
    fortune.animate(
      [{
        transform: 'translateY(0) scale(1)'
      }, {
        transform: 'translateY(-30px)'
      }, {
        transform: 'scale(1)'
      }, {
        transform: 'scale(1.1)'
      }, {
        transform: 'translateY(0) scale(1)'
      }], {
        duration: 1000,
        fill: 'forwards'
      });
  } 
  
</script>

JavaScriptコード解説

①変数定義

まずは変数を定義していきます。
const resultsの中身は運勢の種類を入れていきます。
今回は画像で結果を表示していくので画像のファイル名を記載します。
中吉、小吉、末吉は確率を上げたいため、2回記載しています。3回記載すると出る確率は3倍、4回記載すると出る確率は4倍…となっていきます。

const results = [
    'daikichi.png',
    'kichi.png',
    'tyuukichi.png',
    'tyuukichi.png',
    'syoukichi.png',
    'syoukichi.png',
    'suekichi.png',
    'suekichi.png',
    'kyou.png'
  ];

  const elem = document.getElementById('draw');
  const element = document.getElementById('start');
  const rotateItem = document.getElementById('rotate');
  const target = document.querySelector('#draw');

②アニメーションの動き作り

次に縦に振ったり、回転させてフェードアウトなどのアニメーションを作っていきます。
今回はJavaScriptのanimate()メソッドを使用しました。

tatefuri→縦に振る動き
kaiten→縦に振った後、下へ回転する動き
btn→結果の画面に移る際にボタンをフェードアウト(消す)
touka→結果の画面に移る際におみくじ本体をフェードアウト(消す)

それぞれsetTimeout()メソッドを使い、次の動きをタイマー機能で指定しています。

elem.addEventListener('click', function() {
    if (element != null) {
      tatefuri();
    }
  });

  function tatefuri() {
    element.animate(
      [{
        transform: 'translateY(0)'
      }, {
        transform: 'translateY(-30px)'
      }, {
        transform: 'translateY(0)'
      }], {
        duration: 700,
        iterations: 3
      });
    setTimeout(function() {
      kaiten();
    }, 2400);
  }

  function kaiten() {
    element.animate(
      [{
        transform: 'rotate(0deg)'
      }, {
        transform: 'rotate(180deg)'
      }], {
        duration: 700,
        easing: 'linear',
        fill: 'forwards'
      });
    setTimeout(function() {
      touka();
      btn();
    }, 1000);
  }

  function btn() {
    target.animate(
      [{
        opacity: 1
      }, {
        opacity: 0
      }], {
        duration: 500,
        fill: 'forwards'
      });
    setTimeout(function() {
      target.remove();
    }, 500);
  }

  function touka() {
    element.animate(
      [{
        opacity: 1
      }, {
        opacity: 0
      }], {
        duration: 500,
        fill: 'forwards'
      });
    setTimeout(function() {
      element.remove();
      fortuneAnime();
    }, 500);
  }

③ランダムに結果を出す処理と、結果が出る時のアニメーション

Math.random()関数で大吉〜凶までの運勢がランダムに出るよう処理されます。
htmiで設定したid fortuneに、ランダムで出される結果を画像で表示させるようにします。
その後のfortune.animateはデンッ！と表示される時の動きです。

function fortuneAnime() {
    const key = Math.floor(Math.random() * results.length);
    const fortune = document.getElementById("fortune");
    fortune.src = "img/" + results[key];
    fortune.animate(
      [{
        transform: 'translateY(0) scale(1)'
      }, {
        transform: 'translateY(-30px)'
      }, {
        transform: 'scale(1)'
      }, {
        transform: 'scale(1.1)'
      }, {
        transform: 'translateY(0) scale(1)'
      }], {
        duration: 1000,
        fill: 'forwards'
      });
  }

以上で動くおみくじの完成です！！
私はJavaScript初心者なのですが、今回いちから作ってみてとても勉強になりました。
同じくJavaScript勉強中の方に参考になると幸いです。

最後まで読んでいただきありがとうございました。
今年も皆さんが楽しく健やかな1年になりますように〜！