aixiaochu
/
index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <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" />
    <title>爱消除</title>
    <style>
    * { margin: 0; padding: 0; }
    canvas { display: block; margin:0px auto;}
    html, body { height: 100%; width: 100%; overflow-y:hidden;}
    body{background: #252833;}
    .bang{position: absolute; top:40px; left:50%; width: 275px; margin-left: -134px; overflow: hidden; display:none; z-index: 1002;}
    .bang .ico{background-image: url(image/default/bang.png);background-repeat: no-repeat;}
    .bang ul{list-style: none; background: rgba(80,116,52,0.6); padding: 5px 5px 0px;}
    .bang ul > li{display: inline-block; width: 100%; background: rgba(124,166,76,0.6); border-bottom: 1px solid #9ebd85; line-height: 50px; color:#2fc7c2; font-weight: bold; height: 50px; overflow: hidden;}
    .bang ul > li:hover{background:  rgba(131,189,87,0.6); color:#efefef;}
    .bang ul > li:last-child{border-bottom:none;}
    .bang ul > li .ico{text-indent: 999em;}
    .bang ul > li > img{display: inline-block; margin:0px 0px 0px 50px;vertical-align:middle;}
    .bang ul > li > div{display: inline-block; width: 40px; height: 40px; text-align: center; position: absolute;vertical-align:middle;}
    .bang ul > li > span{display: inline-block;vertical-align:middle; margin-left:10px;}
    .bang ul > li > .num{margin: 12px 0px 0px 5px; width:28px; height:30px;}
    .bang .bt,.bang .bb{height: 36px; overflow: hidden;}
    .bang .bt div{height: 36px; display: inline-block; margin:0px; float: left;}
    .bang .bt .btl{background-position: 0px -65px; width: 20px;}
    .bang .bt .btc{background-position: 0px -105px; background-repeat:repeat-x;width: 235px; text-align:center; font-size: 16px; line-height:36px; font-weight:bold;color:#fff;}
    .bang .bt .btr{background-position: -20px -65px; width: 20px;}
    .bang .bb{height:5px;background: rgba(80,116,52,0.6); border-radius: 0px 0px 5px 5px;}
    .bang ul > li.horno{height:50px; line-height: 50px;}
    li div.num1.ico{background-position: 0px -145px; margin-top: 10px;}
    li div.num2.ico{background-position: -40px -145px; margin-top: 10px;}
    li div.num3.ico{background-position: -80px -145px; margin-top: 10px;}
    li div.num4.ico{background-position: -112px 0px;}
    li div.num5.ico{background-position: 0px -30px;}
    li div.num6.ico{background-position: -28px -30px;}

    /*结束页面*/
    #scoreItem, #myItem{background: url(image/default/score.png); background-size:100% 100%;background-repeat: no-repeat; width: 320px; height: 480px; position: absolute; left:50%; margin-left: -160px; top:0px; overflow: hidden; display: none; z-index: 1003}
    #scoreItem div{position: absolute;font-family:"微软雅黑"; font-weight:bold;color:#e34e65; text-align: center;}
    .scorenum{left:125px; bottom:205px; font-size:24px;text-shadow: 1px 1px 3px #333;}
    .subnum{left:120px; bottom:188px; font-size:12px;}
    .recordC{background: url(image/default/circle.png); background-size:100%;background-repeat: no-repeat; width:70px; height: 70px; right:40px; bottom:220px; display: none;}
    .weekC{background: url(image/default/circle.png); background-position: 0px -70px; background-size:100%;background-repeat: no-repeat; width:70px; height: 70px; right:40px; bottom:220px; display: none;}
    .return, #myItem .myreturn{width: 130px; height: 40px; bottom:64px; cursor: pointer; left: 50%; margin-left: -65px;}

	#myItem{background: url(image/default/my.png); background-size:100% 100%; display:none;}
	#myItem div{font-family:"微软雅黑"; font-weight:bold;}
	#myItem .myreturn{position: absolute; bottom:90px;}
	#myrecord{color:#fff; font-size:28px; text-align: center; margin-top:130px;}
	#mynum{color:#e48937; font-size:24px; text-align: center; margin-top: 85px; text-shadow: none;}


    #model{position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: black; z-index: 1001;opacity: 0.3; display: none;}
    #over{opacity: 1; background: transparent; display: none;}
    #over img{position: absolute; left: 50%; margin-left: -660px; zoom:0.2; top:10px;}
    #timeBar{width:320px; margin:45px auto 0px; overflow: hidden; position: absolute; height: 6px; left: 50%; margin-left: -160px; display: none;}
    #timeBar span{width: 100%;height: 1px;margin: 2px auto;background: #2187E7;position: absolute;box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);}
    </style>
    <script src="js/jquery.js"></script>
    <script src="js/util.js"></script>
    <script src="js/create.js"></script>
    <script src="js/tweenMax.js"></script>
    <script src="js/avatar.js"></script>
    <script src="js/score.js"></script>
    <script src="js/ani.js"></script>
    <script src="js/game.js"></script>
</head>
<body>
    <div class="view">
        <div id="timeBar"><span></span></div>
        <canvas id="demoCanvas" width="320" height="480">您的浏览器不支持canvas</canvas>
    </div>

    <!--排行榜-->
    <div class="bang">
        <div class="bt">
            <div class="btl ico"></div>
            <div class="btc ico">排行榜</div>
            <div class="btr ico"></div>
        </div>
        <ul id="toplist">
        </ul>
        <div class="bb"></div>
    </div>

    <!--结束界面-->
    <div id="scoreItem">
        <div class="scorenum" id="scorenum">0</div>
        <div class="subnum" id="subnum">历史最高：0</div>
        <div class="recordC"></div>
        <div class="weekC"></div>
        <div class="return"></div>
    </div>

    <!--个人主页-->
    <div id="myItem">
    	<div class="subnum" id="myrecord">历史最高：30,000</div>
        <div class="scorenum" id="mynum">本周最高：5,000</div>
        <div class="myreturn" onclick="$('#myItem').fadeOut();"></div>
    </div>

    <!--时间条提示-->
    <div id="over"><img src="image/default/over.png"/></div>
    <div id="model"></div>

    <script>
        window.onload = init;

        function init(){
            var game;
            var theme = $.getVar("theme")
            var themeName = theme ? theme : "default";

            //开始游戏
            game = Game.init({"canvasID":"demoCanvas", "theme":themeName});
        }
        $("body").delegate("#model", "click", function() {
            $("#model").fadeOut();
            $(".bang").animate({"top":-480}, {"callback":function() {

            },"speed":300});
        });
    </script>
</body>
</html>