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