master

分支 (1)

管理

管理

master

getgame
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="html/css/main.css">
    <title>逸生活收藏家</title>
</head>

<body style="margin: 0;overflow-x:hidden;overflow-y:hidden">
    <!-- <body onload="init()" style="margin: 0;overflow-x:hidden;overflow-y:hidden"> -->
    <canvas id="mainView" style="position: absolute;"></canvas>
    <!--结果页-->
    <div class="restart-box" style="align-items: center; justify-content: center;">
        <div>
            <div class="title-score" style="position:relative;">
                <img src="./html/images/score_ret_bg.png" alt="" style="display: block;">
                <div
                    style="position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%); line-height: 2em;">
                    <p style="color:#0077ca; font-size: 7.4vw; font-weight: 700;">本次得分</p>
                    <p class="current-score" style="font-weight: 900;">0</p>
                </div>
                <img src="./html/images/score-red40.png" alt=""
                    style="display: block; width: 21vw; height: 21vw; position: absolute; top: -82px; left: 98px;">
                <img src="./html/images/score-blue30.png" alt=""
                    style="display: block; width: 21vw; height: 21vw; position: absolute; bottom: 80px; left: -70px;">
                <img src="./html/images/score-green10.png" alt=""
                    style="display: block; width: 21vw; height: 21vw; position: absolute; top: 20px; right: -64px;">
                <img src="./html/images/score-lightblue20.png" alt=""
                    style="display: block; width: 21vw; height: 21vw; position: absolute; bottom: -60px; right: -38px;">
            </div>

            <a href="javascript:" class="share">
                <img class="result-share" src="./html/images/go2reank_btn.png" alt="">
            </a>
            <a href="javascript:" class="again">
                <img class="result-again" src="./html/images/result_again.png" alt="">
            </a>
        </div>
    </div>

    <!-- 用户信息提交 -->
    <div class="share-page" style="display:none; align-items:center; justify-content:center; ">
        <div style="display: flex;flex-direction: column;align-items: center;">
            <div style="position: relative;margin-bottom: 9vw;">
                <img src="./html/images/userinfo_bg.png" alt="" style="display: block;">
                <img id="userinfo-close" src="./html/images/userinfo_close_btn.png" alt=""
                    style="display: block;position: absolute;top: 70px;right: -32px;">
                <div class="share-page-input-box">
                    <p
                        style="margin-bottom: 1.4em; color:#0077ca; text-align: center; font-size: 6vw; font-weight: 900; position: relative; top: 20px;">
                        提交信息 公布排行</p>
                    <input class="share-page-input" type="text" id="username" placeholder="请填写您的姓名">
                    <input class="share-page-input" type="text" id="userphone" placeholder="请填写您的手机号">
                </div>
            </div>
            <img id="userinfo-commit" src="./html/images/userinfo_commit_btn.png" alt=""
                style="display: block; width: 60vw;">
        </div>
    </div>

    <!-- 用户排行 -->
    <div class="userrank-page" style="display:none; align-items:center; justify-content:center; ">
        <div style="display: flex;flex-direction: column;align-items: center;">
            <!-- 前5 -->
            <div style="position: relative; margin-bottom:8vw;">
                <img src="./html/images/rank_bg.png" alt="" style="display: block;">
                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
                    <p style="color: #0077ca; font-size: 6vw;font-weight: 900; text-align: center;">前5名排行榜</p>
                    <ul id="userrank-list" class="userrank-list">
                        <!-- <li><span class="rank-img"><img src="./html/images/rank1.png" alt=""></span><span
                                class="rank-name">username</span><span class="rank-score">9999分</span>
                        </li>
                        <li><span class="rank-img"><img src="./html/images/rank2.png" alt=""></span><span
                                class="rank-name">username</span><span class="rank-score">8999分</span>
                        </li>
                        <li><span class="rank-img"><img src="./html/images/rank3.png" alt=""></span><span
                                class="rank-name">username</span><span class="rank-score">7999分</span>
                        </li>
                        <li><span class="rank-img"><img src="./html/images/rank4.png" alt=""></span><span
                                class="rank-name">username</span><span class="rank-score">6999分</span>
                        </li>
                        <li><span class="rank-img"><img src="./html/images/rank5.png" alt=""></span><span
                                class="rank-name">username</span><span class="rank-score">5999分</span>
                        </li> -->
                    </ul>
                </div>
            </div>
            <!-- 当前排名 -->
            <div style="position: relative; margin-bottom:10vw;">
                <img src="./html/images/rank_bg2.png" alt="" style="display: block;">
                <div
                    style="position: absolute;top: 62px; left: 0; right: 0; font-size: 5vw; display: flex; align-items: center; justify-content: center;">
                    <div>
                        <span>当前得分：</span><span id="curt-score"
                            style="color:#eb7825; font-weight: 900; margin-right: 0.8em;">66</span>
                        <span>当前排名：</span><span id="curt-rank" style="color:#eb7825; font-weight: 900;">66</span>
                    </div>
                </div>
            </div>
            <!-- 重新开始 -->
            <img id="userrank-again" src="./html/images/result_again.png" alt="" style="display: block; width: 60vw;">
        </div>
        <!-- <img class="share-icon" src="html/images/accent.png" alt="accent"> -->
    </div>


    <!-- 时间到了 -->
    <div id="timeend"
        style="width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; position: fixed;">
        <img src="./html/images/timeend.png" alt="" width="248">
    </div>

    <!-- 背景乐按钮 -->
    <a href="javascript:" class="u-globalAudio z-play">
        <i class="icon-music ani"></i>
        <audio src="html/sound/music.mp3" loop id="music" preload muted></audio>
    </a>

    <!-- 碰撞音效 -->
    <audio src="html/sound/ding.mp3" id="music-ding" style="display: none;" preload></audio>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="html/js/inc/jquery-1.10.1.min.js"></script>
<script src="html/js/inc/easeljs.min.js"></script>
<script src="html/js/inc/preloadjs.min.js"></script>
<script src="html/js/inc/TweenMax.min.js"></script>
<script src="html/js/app/main.js"></script>

</html>