代码连接 网盘共享：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(' '); }$('section div').append("
");$('section div').append('
');// 设置初始状态地鼠都没出现 $('.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'); $(" 得分 为"+score+"").replaceAll('span'); $('#dazhong').append(' '); setTimeout(function(){ $('#dazhong').empty(); },1000);});