jquery实现手机端打地鼠打新冠病毒小游戏抽奖代码
代码语言:html
所属分类:游戏
代码描述:jquery实现手机端打地鼠打新冠病毒小游戏抽奖代码,点击开始游戏,在30秒内打死更多的病毒者就能获取奖励。
代码标签: jquery 手机端 打地鼠 打 新冠 病毒 游戏 抽奖
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"> <script> //单位自适应 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 640) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> <style type="text/css"> html, body { margin: 0; padding: 0; position: relative; } .gameIndex { width: 100%; position: relative; background: url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/bg.jpg) no-repeat center/cover; display: block; } .btnImage { height: 0.56rem; width: 1.71rem; position: absolute; } .startBtn { top: 7.6rem; left: 1.2rem; } .ruleBtn { top: 7.6rem; left: 3.5rem; } .againBtn { top: 9rem; left: 1.2rem; } .recordBtn { top: 9rem; left: 3.5rem; } .gameRule { display: none; z-index: 10; width: 5.6rem; position: fixed; left: 50%; top: 1rem; margin-left: -2.8rem; text-align: center; } .gameHideBg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 10; position: absolute; } .ruleImage { width: 90%; height: 90%; } #closeRule { position: absolute; width: 0.6rem; bottom: -0.5rem; left: 50%; margin-left: -0.3rem; } .gamePlay { width: 100%; position: relative; background: url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/bg2.jpg) no-repeat center/cover; display: none; } .timeRun { height: 0.7rem; position: absolute; top: 3.2rem; left: 50%; margin-left: -0.35rem; width: 0.7rem; background: url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/runtime.png) no-repeat center/cover; font-size: 0.35rem; color: #19591C; line-height: 0.7rem; text-align: center; } .scoreDiv { position: absolute; top: 4rem; right: 0.5rem; font-size: 0.3rem; color: #19591C; } .gameContent { width: 100%; height: 4.3rem; position: absolute; top: 4.5rem; } .mouseUl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; } .mouseLi { width: 1.96rem; height: 0.7rem; background: url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/dong1.png) no-repeat center/cover; position: relative; } .theMouseDiv { position: absolute; top: -0.57rem; left: 0.48rem; width: 1rem; height: 1rem; overflow: hidden; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .theMouse { position: absolute; top: 60px; left: 0; width: 100%; } .hammer { position: absolute; z-index: 1; top: -0.7rem; left: 0.8rem; width: 1rem; display: none; } .socreDetail { position: absolute; font-size: 0.35rem; top: -0.8rem; left: 0.6rem; z-index: 2; color: #ff3; display: none; } .overShow { display: none; } .gameResult { display: none; z-index: 10; width: 5.6rem; position: fixed; left: 50%; top: 2.3rem; margin-left: -2.8rem; text-align: center; } .resultImage { width: 90%; height: 90%; } #closeResult { position: absolute; width: 0.6rem; bottom: -0.5rem; left: 50%; margin-left: -0.3rem; z-index: 10; } .resultTitle { position: absolute; font-size: 0.5rem; top: 0.3rem; left: 31%; color: #265E08; } .resultScoreText { position: absolute; font-size: 0.28rem; top: 1rem; left: 33%; color: #265E08; } .reslutText { position: absolute; font-size: 0.25rem; top: 1.5rem; display: inline-block; width: 85%; left: 8%; color: #265E08; display: none; } .resultBtn { position: absolute; font-size: 0.3rem; display: inline-block; width: 2.3rem; height: 0.6rem; background: #CB6437; border-radius: 1.2rem; color: #fff; line-height: 0.6rem; } .failBtn { top: 2.4rem; left: 1.6rem; display: none; } .successBtn { top: 1.8rem; left: 1.6rem; display: none; } .prizeResult { display: none; z-index: 10; width: 5.6rem; position: fixed; left: 50%; top: 1rem; margin-left: -2.8rem; text-align: center; } .prizeImage { width: 90%; height: 90%; } #closePrize { position: absolute; width: 0.6rem; bottom: -0.5rem; left: 50%; margin-left: -0.3rem; } </style> </head> <body> <div class="gameHideBg"></div> <div class="gameRule"> <img class="ruleImage" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/gz_bg.png" /> <img id="closeRule" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/close.png" /> </div> <div class="gameIndex"> <img class="btnImage startBtn" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/ks.png" /> <img class="btnImage ruleBtn" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/gz.png" /> </div> <div class="gamePlay"> <div class="timeRun">30</div> <div class="scoreDiv">得分:<span id="textScore">0</span></div> <div class="gameContent"> <ul class="mouseUl"> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <li class="mouseLi"> <div class="theMouseDiv"></div><img class="hammer" src="//repo.bfw.wiki/bfwrepo/images/game/dadishu/2/Img/hammer.png" /><span class="socreDetail"></span> </li> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0