bigscreen/index.html at master · dancisinfo/bigscreen · GitHub

1
<!DOCTYPE html><html lang="zh-CN"><head>    <!-- 首页网站模板 -->    <title>合金手指 Alloy Colour</title>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> -->    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0">    <meta name="author" content="机智的大熊猫,开源小熊猫" />    <meta name="renderer" content="webkit">    <meta name="description" content="机智的大熊猫(开源熊猫)" />    <meta name="Keywords" content="机智的大熊猫,开源小熊猫,前端开发">    <!-- <link rel="stylesheet" type="text/css" href="./_src/css/base.css"> -->    <style type="text/css">     html,body,ul,ol,li,h1,h2,h3,p,a,div,section{margin: 0;padding: 0;list-style: none;}     html,body,.wrapper{      height: 100%;width: 100%;    }    body {      font-family: "微软雅黑",Arial, Helvetica, sans-serif;      font-size: 62.5%;      position: relative;      text-align:center;      background:  #f6a0bb;      color: #FFF;    }    .btn{        background: #0070F9;        color: #fff;        border-radius: 5px;        padding: 5px;        width: 40%;        margin:0 auto;        margin-top: 10px;        font-size: 25px;        cursor: pointer;        /*box-shadow: 0 1px 2px #aaa;*/    }    .circle{        cursor: pointer;        width: 40px;        height: 40px;        background: #ff0;        /*border-radius: 50%;*/        border-width: 10px;        border-style: solid;        border-color: #000;    }    .circle:hover{        opacity: 0.6;        /*box-shadow: 0 0px 2px #fff;*/    }    .container{        position: relative;        width: 320px;        height: 480px;        margin:0 auto;    }    /*menu start*/    #menu-start{        padding-top: 10px;        color: #000;    }    #menu-start .logo{        width: 88px;        height: 88px;        color:#fff;        background: #f78b26;        margin: 20px auto 20px auto;        font-size: 60px;        line-height: 80px;                    border-width:10px;        border-style:solid;        border-top-color:#0ff;        border-radius:50%;        border-color: #0080ff  #53c5e7 #9a59b5 #35c87a;s    }    #menu-start .title{        font-size: 25px;        line-height: 30px;        font-weight: lighter;        margin-bottom: 20px;    }    #rules{        border: 2px solid #fff;        border-radius: 5px;        width: 80%;        padding: 5px;        margin:0 auto;    }    #rules p{        font-size: 16px;        margin-left: auto;margin-right: auto;        text-align: left;        margin-top: 10px;    }    /*game-container*/    #game-container{        display: none;    }    #game-container .header{        padding-top: 1em;        height: 100px;        font-size: 20px;        line-height: 30px;    }    #game-container .header span{margin: 0 10px;}    #big-circle-box{        width: 200px;        height: 200px;        margin: 0 auto;    }    #big-circle-box .circle{        width: 120px;height: 120px;        border-width: 30px;        font-size: 30px;        line-height: 120px;        font-weight: lighter;    }    #small-circle-list{        width: 100%;        position: absolute;        left: 0;bottom: 0;        list-style: none;            }    #small-circle-list li{        width: 20%;height: 60px;        float: left;        margin:10px 0;        overflow: hidden;    }    /*menu over*/    #menu-over{        display: none;        position: fixed;        top: 100px;width: 100%;        color: #000;    }    #menu-over h1{font-size: 40px;}    #menu-over p{font-size: 30px;}    #btn-restart,#btn-share{        color: #fff;    }    /*color style*/    /*pink*/    .bg_color0{background: #f6a0bb;}    .border_color0{border-color: #f6a0bb;}    /*blue*/    .bg_color1{background: #0080ff;}    .border_color1{border-color: #0080ff;}    /*orange*/    .bg_color2{background: #f78b26;}    .border_color2{border-color: #f78b26;}    /*purple */    .bg_color3{background: #9a59b5;}    .border_color3{border-color: #9a59b5;}    /*cyan*/    .bg_color4{background: #53c5e7;}    .border_color4{border-color: #53c5e7;}    /*green*/    .bg_color5{background: #35c87a;}    .border_color5{border-color: #35c87a;}    </style>        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>    <!--<script>window.jQuery || document.write('<script src="./static/libs/jquery-1.9.1.min.js" type="text/javascript"><\/script>')</script>    <script src="http://d3js.org/d3.v3.min.js"></script>    <script src="trianglify.min.js"></script>-->    <script src= "http://static.api.5miao.com/js/api.js" ></script></head><body><div class="wrapper">    <!-- loading 动画 -->    <div id="loading">           </div>    <!-- 开始界面 -->    <div id="menu-start" class="container">        <div>            <p class="logo">A</p>            <!-- <img src="AlloyColour_logo.png" class="logo"> -->            <!-- <p class="title">合金手指</p> -->        </div>        <div id="rules">            <h1>合金手指 游戏规则</h1>            <p>1.游戏中有一个大色环和五个小色环，每个色环有内外两种颜色;</p>            <p>2.点击屏幕下方的小色环,保证小色环里面的颜色与大色环外面的颜色相同;</p>            <p>3.不会就不要乱点,我会告诉你么？</p>        </div>        <p id="btn-start" class="btn">开始游戏</p>            </div>    <div id="game-container" class="container">        <!-- 游戏统计 -->        <div class="header">            <span>时间:<em id="leftTime">30</em>s</span>            <span>得分:<em id="scores">0</em></span>        </div>        <!-- 主circle -->        <div id="big-circle-box">            <div class="circle"></div>        </div>        <!-- 小circle -->        <ul id="small-circle-list">            <li><div class="circle"></div></li>            <li><div class="circle"></div></li>            <li><div class="circle"></div></li>            <li><div class="circle"></div></li>            <li><div class="circle"></div></li>        </ul>    </div>    <!-- 结束界面 -->    <div id="menu-over" class="container">        <h1>游戏结束!</h1>        <p id="over-tips">你个啦啦啦啦啦啦啦垃圾！</p>        <p id="btn-share" class="btn">炫耀一下</p>        <p id="btn-restart" class="btn">重新再来</p>        <!-- <p id="btn-rank" class="btn">排行榜</p> -->    </div></div><script type="text/javascript">var AC = {    scores:0,    bestScore:0,    timer:null,    leftTime:30,    isOver:false,    init:function(){        AC.randomColor();        AC.action.init();    },    randomColor: function(){        var list = $("#small-circle-list").find(".circle");        var len=list.length;        var rdmArr=AC.randomArr(len);        // console.log(rdmArr);        var i,cls;        for(i=0;i<len;i++){            cls="circle border_color"+rdmArr.borderArr[i]+" bg_color"+rdmArr.bgArr[i];            $(list[i]).removeClass()                    .addClass(cls)                    .attr("data-idx",rdmArr.borderArr[i]+"-"+rdmArr.bgArr[i]);        }        i=parseInt(Math.random()*len);        cls="circle border_color"+rdmArr.bgArr[i]+" bg_color"+rdmArr.borderArr[i];        $("#big-circle-box").find(".circle")                .removeClass()                .addClass(cls)                .attr("data-idx",rdmArr.borderArr[i]+"-"+rdmArr.bgArr[i]);    },    randomArr: function(len){        var arrBg=new Array();        var arrBorder;        var i,temp,rdm;        for(i=1;i<=len;i++){            arrBg[i-1]=i;        }        arrBorder=arrBg.slice();        //打乱arrBg数字        for (i=0;i<len;i++){            rdm=parseInt(Math.random()*len);            temp=arrBg[rdm];            arrBg[rdm]=arrBg[i];            arrBg[i]=temp;        }        //保证arrBg[i]和arrBorder[i]不相同        for(i=0;i<len;i++){            if(arrBg[i]===arrBorder[i]){                if(i===0){                    temp=arrBorder[len-1];                    arrBorder[len-1]=arrBorder[i];                    arrBorder[i]=temp;                }                else{                    temp=arrBorder[i-1];                    arrBorder[i-1]=arrBorder[i];                    arrBorder[i]=temp;                }            }        }        return {bgArr:arrBg,borderArr:arrBorder}    },    timeCount:function(){        AC.timer=setInterval(function(){            if(AC.leftTime <0.1){                clearInterval(AC.timer);                AC.isOver=true;                AC.gameOver();            }            $("#leftTime").text(AC.leftTime--);        },1000)    },    //游戏结束，显示得分和分享按钮    gameOver:function(){        if(AC.scores>AC.bestScore){            AC.bestScore=AC.scores;            AC.uploadScore(AC.bestScore);        }        if(AC.scores < 30){            $("#over-tips").text("才"+AC.scores+"分,逼格太低了");        }        else if(AC.scores < 50){            $("#over-tips").text(AC.scores+"分,逼格不错哦！");        }        else if(AC.scores < 60){            $("#over-tips").text("你的逼格超过了84%的人！");        }        else if(AC.scores < 70){            $("#over-tips").text("你的逼格超过了99%的人！");        }        else{            $("#over-tips").text("这么高的分，呵呵，你懂的！");        }        $("#menu-over").fadeIn();    },    //用户事件    action:{        gameStart:function(){            $("#btn-start").bind("touchstart click",function(e){                e.preventDefault();e.stopPropagation();                $("#menu-start").hide();                $("#game-container").show();                AC.timeCount();            });        },        gameRestart:function(){            $("#btn-restart").bind("touchstart click",function(e){                e.preventDefault();e.stopPropagation();                $("#menu-over").hide();                // $("#game-container").show();                AC.leftTime=30;                AC.scores=0;                AC.isOver=false;                AC.randomColor();                AC.timeCount();            });        },        gameShare:function(){            $("#btn-share").bind("touchstart click",function(e){                e.preventDefault();e.stopPropagation();                var shareplat = "qzone";                if(yw.hostEnv == "weixin"){                    shareplat = "weixin";                }                yw.openSocialShareView(shareplat, {                    "title":"我是金手指",                    "text" : "我拿了"+AC.scores+"分,24K纯色魔！",                    "imageUrl":"logo.png"                    },                    function (err, data) {                    });                });        },          //游戏点击circle事件        changeColor:function(){            $("#small-circle-list").delegate("li","touchstart click",function(e){                e.preventDefault();e.stopPropagation();                if(AC.isOver)return;                // AC.generateBg();                var that=$(this).find(".circle")[0];                var bigCircle=$("#big-circle-box .circle")[0];                var bigClass=$(bigCircle).attr("data-idx");                var smallClass=$(that).attr("data-idx");                if(bigClass == smallClass){                    // console.log("right!")                    $("#scores").text(++AC.scores);                     AC.randomColor();                }                else{                    //点错扣分                    // $("#scores").text(--AC.scores);                  }                            })        },        init:function(){            // AC.generateBg();            AC.action.gameStart();            AC.action.gameRestart();            AC.action.gameShare();            AC.action.changeColor();        }    },    uploadScore:function(score){            },    generateBg:function(){            var t = new Trianglify();            var pattern = t.generate(document.body.clientWidth, document.body.clientHeight);            document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);    },    name: function(){        return "Alloy Colour"    }};//屏幕适配，游戏居中function responsiveUI(){    // var h=;    // switch(yw.hostEnv){    //     case "android":                //         break;    //     case "iPhone":                //         break;    //     case "iPod":                //         break;    //     case "iPad":                //         break;    //     case "ios":                //         break;    //     case "weixin":    //         break;    //     case "5miao":    //         break;    //     default:                //         //end switch;    // }    var responsive={        WH:$(window).height(),        WW:$(window).width(),        default:function(){            var h,shiftPx=20;            var scale;            if(responsive.WH/responsive.WW > 480/320){                scale = responsive.WW/320;            }            else{                scale = responsive.WH/480;            }            // console.log(scale)            if(responsive.WH > (480+shiftPx)){                h=(responsive.WH-480-shiftPx)/2;                $(".container").css({                    'margin-top':h+'px',                    'transform':'scale('+scale+')','-webkit-transform':'scale('+scale+')','-moz-transform':'scale('+scale+')','-o-transform':'scale('+scale+')',                })            }        },        addOrientationListener:function(){            if(window.onorientationchange == "object"){                window.onorientationchange=function(){                    responsive.default();                    // window.location.href="/#game-container";                }            }        }    }    responsive.default();    responsive.addOrientationListener();}function is_weixin(){      var ua = navigator.userAgent.toLowerCase();      if(ua.match(/MicroMessenger/i)=="micromessenger") {          return true;      } else {          return false;      }  }$(document).ready(function(){    // if(!is_weixin()){    //     yw.init({gameId: '10000026'});    // }    // yw.init({gameId: '10000026'});    responsiveUI();    AC.init();});/**/</script></body></html>