用html+css+js做打地鼠小游戏

代码连接网盘共享：https://pan.baidu.com/s/1eSxocMm

html 代码 first.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打地鼠</title> <link rel="stylesheet" href="first.css"> </head> <body> <section> </section> <!-- 添加积分器 --> <span id="count">得分 为0</span> <!-- 添加音频 hidden="true" --> <audio src="audio/music.mp3" loop="true"autoplay="autoplay" loop="loop"></audio> <div id="dazhong"></div> <script src="jquery.js"></script> <script src="first.js"></script> </body> </html>

css代码 first.css

html{
 height: 100%;
}
body{
 height: 100%;
 background-image: url('./image/bg.jpg');
 display: flex;
 justify-content: center;
 /* align-items: center; */
 position: relative;
}
section{
 width: 760px;
 height: 400px;
 margin-top: 100px;
}
section div{
 width: 160px;
 height: 140px;
 display: inline-block;
 margin-right: 30px;
 position: relative;
}
.hole{
 display: inline-block;
 width:160px;
 position: absolute;
 bottom: 0;
 z-index: 1;
}

.mouse{
   width:100px; 
    z-index: 10;
    position: absolute;
    bottom:25px;
    left: 30px;

}

#count{
    display:block;
    width:110px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    background-color:brown;
    color: white;
    position: absolute;
    top:200px;
    left: 10px;

}

js代码 first.js

for(var i=1;i<17;i++){
 $('section').append('<div></div>');
 
}
$('section div').append("<img class='hole' src='image/hole.png' >");
$('section div').append('<img class="mouse" src="image/mouse.png">');


// 设置初始状态地鼠都没出现



 $('.mouse').hide();



//袋鼠出现
                   // [1,4] [0, 3)
// 随机出现的袋鼠数目 [1 16]  (0, 15]  向上取整
var num
// 
//袋鼠位置[0  15]  索引 index
 var index
 var object;
setInterval(function(){
    num=Math.ceil(Math.random()*2);
    for(var i=1; i<=num ;i++){
        //随机出现的袋鼠位置[0  15]  索引
       index=Math.floor(Math.random()*16);
      object=$('section div:nth-of-type('+(index+1)+') .mouse')
 
      object.slideDown();
      object.delay(2000).slideUp();
    }
 
},1000);




//鼠标锤子  图形
$('.mouse').hover(function(){
    $(this).css({
        cursor:'url("./image/cursor-down.png"), auto'
    });
},function(){
   $('body').css({
    cursor:'url("./image/cursor.png") ,auto'
   });
});



// score 记录敲到地鼠的分数
var score=0;
$('.mouse').click(function(){
    score+=10;
    $(this).hide('fast');
    $(" <span id='count'>得分 为"+score+"</span>").replaceAll('span');
    $('#dazhong').append('<audio src="audio/dazhong.wav" autoplay="autoplay" ></audio>');
    setTimeout(function(){
        $('#dazhong').empty();
    },1000);
});