用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); });
