首页 > 代码库 > jquery制作打地鼠小游戏
jquery制作打地鼠小游戏
效果图:
素材:
bg.jpg
hole.pngmole.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>
jquery制作打地鼠小游戏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。