こんにちは、プログラマーの山本です。

今回は企業さんからのご依頼で、

・WEBサイトの上から指定の画像10枚をランダムに降らし、
　その画像をクリックした時に画像を削除する。

・さらに画像クリック時に、ランダムに5種類の音を鳴らす。

というシステムを制作しました。

同じようなシステムを開発したい方は参考にしてください。

コピペで同じシステムを導入できるようにしておきます。

画像の準備

今回は10枚の画像を用意しました。

扱いやすくするため、名前は「1.png」〜「10.png」にして、
全て同じディレクトリに入れます。

降らす画像の指定に、この番号を使用します。

【HTML】再生する音声のリストを書く。

htmlで音声を設置しておきます。

<div class="sound hidden" id="sound_wrapper">
  <audio id="audio1" src="url.mp3" preload="auto"></audio>
  <audio id="audio2" src="url.mp3" preload="auto"></audio>
  <audio id="audio3" src="url.mp3" preload="auto"></audio>
  <audio id="audio4" src="url.mp3" preload="auto"></audio>
  <audio id="audio5" src="url.mp3" preload="auto"></audio>
</div>

url.mp3　のところは、各音声のURLに変更しましょう。

【JavaScript】画像を降らせるシステムのコードを書く。

jQueryを使うので、jQueryファイルを読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">

いよいよシステムのメインとなるjsコードを書いていきます。

$(function(){
  const img_directory = '画像のディレクトリURL';
  const img_cnt = 10; //画像の種類
  const audio_cnt = 5; //音声の種類
  const interval_mili = 1000; //画像を降らせる間隔
  $('body').css('overflow-x' ,'hidden');
  let window_width, window_height;
  function resize(){
    window_width = $(window).width();
    window_height = $(window).height();
  }
  $(window).on('resize' , resize);
  resize();
  //実行
  setInterval(loop, interval_mili);
  function loop(){
    const random_no = Math.floor( Math.random() * (img_cnt - 1) ) + 1;
    $('<img>')
    .appendTo('body')
    .attr('src' , img_directory+ random_no +'.png')
    .addClass('img')
    .css({
      'display' : 'none',
      'position' : 'fixed',
      'z-index' : '50'
    })
    .load(function(){
      $(this).click(function(){
        //画像クリック時の動作
        const random　=　Math.floor( Math.random() * (audio_cnt - 1) ) + 1;
        $('#audio'+random).get(0).currentTime = 0; //リセット
        $('#audio'+random).get(0).play(); //音を鳴らす
        $(this).remove(); //画像削除
      });
    }
  }
});

軽く補足説明をしておきます。

【状況に応じて変更する箇所】
2行目：画像を入れているディレクトリのURLを記入してください。
3行目：画像の種類を指定してください。
4行目：音声の種類を指定してください。
5行目：画像を降らせる間隔を指定してください。1秒=1000です。

6~13行目：ウィンドウサイズ内から画像が降るように調整しています。

15行目：指定した間隔ごとに画像を降らせるコードを繰り返し実行しています。

17行目：1~10（画像の種類）までの数値をランダムで出力します。

18~27行目：ランダムに画像を上から降らします。

30行目：1~8（音声の種類）までの数値をランダムで出力します。

まとめ

以上で、上から画像をランダムに降らし、
クリックした時に画像を消してランダムに音を鳴らすことができます。

画像や音声の数が増えても、
一部を修正するだけで対応できるようになっています。