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

Posted 2020-10-08 变局

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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);
});
 

以上是关于用html+css+js做打地鼠小游戏的主要内容，如果未能解决你的问题，请参考以下文章

HTML + CSS + JavaScript 实现打地鼠小游戏闲暇时刻玩一玩轻松丢烦恼~