效果图：
素材：
bg.jpg
hole.png
mole.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>Document</title>
<style type="text/css">
html{background-color: #eee;height: 100%;}
body{max-width: 500px;margin: 0 auto;background-image: url(bg.jpg);-webkit-background-size: cover;
background-size: cover;padding: 0;height: 100%;min-width: 320px;}
p{margin:0 5%;}
header{width: 100%;height: 50px;position: relative;font: 2rem;}
.othertime{height: 100%;float: left;line-height: 50px;margin-left: 5%;}
.fenshu{height: 100%;float: right;line-height: 50px;margin-right: 5%;}
#container{width: 100%;height: 100%;}
.col-33{width:33.333333%;height:33.333333333%;float: left;position: relative;}
.col-33 img{width: 70%;height: auto;position: absolute;bottom: 0;}
footer{clear: both;text-align: center;}
#play{font-size: 2rem;margin-top: 10px;}
</style>
</head>
<body>
<header>
<span class="othertime">游戏剩余时间：<span id="time">30</span></span>
<span class="fenshu">次数：<span id="fraction">0</span></span>
</header>
<p style="color: red;">温馨提示：本游戏单局时间30秒，地处出现间隔为0.4s~1s，猛点屏幕获得高分。</p>
<div id="container">
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
<div class="col-33"><img src="hole.png"></div>
</div>
<footer><button id="play">开始游戏</button></footer>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘#container‘).css(‘height‘,document.body.clientWidth*0.9+‘px‘);
$(‘.col-33 img‘).css(‘left‘,($(‘.col-33‘).width()-$(‘.col-33 img‘).width())/2+‘px‘);
$(window).resize(function(){
$(‘#container‘).css(‘height‘,document.body.clientWidth*0.9+‘px‘);
$(‘.col-33 img‘).css(‘left‘,($(‘.col-33‘).width()-$(‘.col-33 img‘).width())/2+‘px‘);
})
var ct=0,c,t,prev;
$(‘#play‘).click(function(){
if($(this).text()=="开始游戏"){
$(this).text("结束游戏");
var i=30,x=0;
var $imgs=$(‘img‘);
c=setInterval(function(){
$(‘#time‘).text(--i);
if(i==0){
clearInterval(c);
clearInterval(t);
$(‘#play‘).text("开始游戏");
prev.src=‘hole.png‘;
alert("游戏结束，本次游戏打到地鼠 "+$(‘#fraction‘).text()+‘ 只，加油^_^‘);
$(‘#time‘).text(30);
}
},1000)
t=setInterval(function(){
if(x==1)prev.src=‘hole.png‘;
x=1;
prev=$imgs[Math.floor(Math.random()*9)];
prev.src=‘mole.png‘;
},(4+Math.floor(Math.random()*7))*100)
}else if($(this).text()=="结束游戏"){
alert("很遗憾您已选择结束游戏，本次游戏打到地鼠 "+$(‘#fraction‘).text()+‘ 只，再接再厉哦^_^‘);
$(this).text("开始游戏");
clearInterval(c);
clearInterval(t);
$(‘#time‘).text(‘30‘);
$(‘#fraction‘).text(‘0‘);
prev.src=‘hole.png‘;
}
})
var fenshu=parseInt($(‘#fraction‘).text());
$(‘img‘).on(‘click‘,function(e){
if($(this).attr(‘src‘).indexOf(‘mole‘)==0 && $(‘#play‘).text()!="开始游戏"){
fenshu+=1;
$(‘#fraction‘).text(fenshu);
}
})
})
</script>
</body>
</html>
时间： 2024-08-02 13:35:30