JavaScript--打地鼠案例学习

效果图:

 

代码:

创建class="head"的盒子,再分为左右俩个盒子,分别放得分和剩余时间

<div class="head">
    <div class="score" style="font-size: 30px; color: blue;">得分:
        <div class="score1" style="font-size: 30px; color: red;">0</div></div>
    <div class="time" style="font-size: 30px; color: red;">时间还有:
        <div id="time1" style="font-size: 30px; color: brown;">0</div></div>
    </div>

.head{
    margin-top: 10px;
    width: 880px;
    height: 80px;
    margin: 10px auto;
}
.score{
    float: right;
}
.time{
    float: left;
}

把背景图片和六只地鼠的图片导入,设置图片的大小后再调整地鼠的位置,并填入地鼠冒出来的音乐和打到地鼠的音乐

html:

    <div class="box">
        <img src="img/mouse.png" alt="" width="100">
        <img src="img/mouse.png" alt="" width="100">
        <img src="img/mouse.png" alt="" width="100">

        <img src="img/mouse.png" alt="" width="100">
        <img src="img/mouse.png" alt="" width="100">
        <img src="img/mouse.png" alt="" width="100">

        <img src="img/mouse.png" alt="" width="100">
        <img src="img/mouse.png" alt="" width="100">
        <img src="img/mouse.png" alt="" width="100">
        <input type="button" value="开始游戏" id="button">
        <!-- 另一种写法 
         <button class="buttonBegin"></button> 
        -->
        <audio src="img/come.mp3" id="musicHit"></audio>
        <audio src="img/hit.mp3" id="musicBoot"></audio>
    </div>

 css:

.box{
    width: 800px;
    height: 600px;
    border: solid;
    margin: 20px auto;
    background: url(img/timg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    position: relative;
    cursor: url(img/chuizi.png),auto;
}
.box img{
    width: 150px;
    position: absolute;
    
}
img:nth-child(1){
    left: 65px;
    top: 80px; 
}
img:nth-child(2){
    left: 335px;
    top: 80px; 
}
img:nth-child(3){
    left: 605px;
    top: 80px; 
}
img:nth-child(4){
    left: 65px;
    top: 220px; 
}
img:nth-child(5){
   left: 335px;
    top: 220px; 
}
img:nth-child(6){
    left: 605px;
   top: 220px;  
}
img:nth-child(7){
   left: 65px;
    top: 360px; 
}
img:nth-child(8){
  left: 335px;
    top: 360px; 
}
img:nth-child(9){
    left: 605px;
    top: 360px; 
}

js:

window.onload = function () {
    // 获取所有 img 元素
    var imgObj = document.getElementsByTagName("img");
    var score = 0; // 得分
    var t = null; // 定时器
    var time = 0; // 时间

    // 给开始按钮绑定点击事件
    document.getElementById("button").onclick = function () {
        document.querySelector(".score1").innerHTML = score;
        this.style.display = "none";

        // 启动游戏定时器
        t = setInterval(function () {
            // 生成 0 到 8 之间的随机数
            var num = Math.floor(Math.random() * 9);

            // 隐藏所有老鼠图片
            for (var i = 0; i < imgObj.length; i++) {
                imgObj[i].src = "img/mouse.png";
                imgObj[i].style.display = "none";
            }

            // 显示随机位置的老鼠图片
            document.getElementById("musicBoot").play();
            imgObj[num].style.display = "block";
            imgObj[num].onclick = function () {
                document.getElementById("musicHit").play();
                this.src = "img/mouse2.png";
                score += 5;
                document.querySelector(".score1").innerHTML = score;
            }
        }, 800);

        // 计时器，用于判断游戏时间
        var t1 = window.setInterval(function () {
            time++;
            document.querySelector("#time1").innerHTML = 10 - time;
            if (time == 10) {
                clearInterval(t);//清除老鼠移动
                clearInterval(t1);//清除自己
                alert("游戏结束");
                //重置
                document.getElementById("button").style.display = "block";
                document.getElementById("button").value = "再玩一次";
                // 隐藏所有老鼠图片,否则剩下的那个会一直可以被点,分数一直被积累
                for (var i = 0; i < imgObj.length; i++) {
                    imgObj[i].style.display = "none";
                }
                score = 0;
                time = 0;
            }
        }, 1000);
    }
}