打地鼠小游戏（带有背景音乐和敲打声）

【实例截图】

【核心代码】

<script>
    // 获取指定的整数范围
    // a.先获取页面上所有的地鼠图片
    var mouses = document.querySelectorAll('img');
    //    b.获取数量
    var len = mouses.length;
    console.log(len);
    // 声明基础分数
    var score=0;
    // 获取页面上显示分数的元素
    var span = document.getElementById('score');
    // 获取页面上击中的音效
    var shutdown = document.getElementById('shutdown');
    //    定义一个函数
    function one() {
        //    从整数范围中随机获取一个整数
        // a.先获取一个（0.1）的随机数
        var ran = Math.random()
        // b.转为指定范围随机数
        var index = len * ran;
        // c. 向下取整（0,19）之间的整数
        index = Math.floor(index);
        console.log(index);

        // 根据随机的整数选项中对应的地鼠实现上升效果
          mouses[index].classList.remove('down')
        mouses[index].classList.add('up');
        // 从开始上升事件进行计算，在上升结束等待
        // 一小段事件再开始下落
        // 延迟函数，让某个动作在一定时间后在执行
        setTimeout(function () {
            //  下降时需要先去除原有的上升动作样式
            // 再添加需要的下降的动画样式
            mouses[index].classList.remove('up')
            mouses[index].classList.add('down')
        }, 1500);
    }
    function play(){
   // 使用 for 循环重复执行了7次
    for (var i = 0; i < 7; i ) {
        one();
    }
    }
    play();
    // 设置每隔一段时间出现一批地鼠
    setInterval(play,1500);
 
    // 给每一个地鼠都添加点击事件
    for (var k = 0; k < len; k ) {
        // 遍历地鼠集合，获取一个地鼠
        // 然后添加点击事件
        //当地鼠图片被鼠标点中后，对应的函数就会执行
        mouses[k].onclick = function (e) {
            // console.log('你点中我了！');
            // console.log(e.target);
            // e.表示事件对象，点击事件相关的所有信息集合
            // e.target 表示出发时间元素
            // 被点中之后，立刻执行下降动画
            e.target.classList.remove('up');
            e.target.classList.add('down');
            // 点中以后计算分数
            score =10;
            // 将分数显示在页面上 设置为标签内容
            span.innerText = score;
            // 播放击中音效
            shutdown.load();
            shutdown.play();
        }
    }
</script>