js 考记忆力得小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function (){
         var oStar = document.getElementById("start");
         var oSpan = oStar.getElementsByTagName("span")[0];

         var oContent = document.getElementById("content");
         var oRect = document.getElementById("rect");
         var timer = null;
         var oTime = document.getElementById("time");

         var aImg = document.getElementsByTagName("img");

         var arrImg = ["http://img3.douban.com/view/photo/thumb/public/p1994200192.jpg",
                        "http://img5.douban.com/view/photo/thumb/public/p1994200528.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994200963.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994201400.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994201804.jpg",
                        "http://img5.douban.com/view/photo/thumb/public/p1994201968.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994202154.jpg",
                        "http://img5.douban.com/view/photo/thumb/public/p1994202276.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994202342.jpg"];

         var oScore = document.getElementById("score");
         var oFail = document.getElementById("fail");
         var oSuccess = document.getElementById("success");
         var level = [{"num":"3","timeGame":"10"},
                       {"num":"4","timeGame":"10"},
                       {"num":"6","timeGame":"15"},
                       {"num":"8","timeGame":"20"}];


         oSpan.onclick = function (){

             var rating = 0;
             starGame( level[rating].num,level[rating].timeGame,rating );
             
         }

         // 游戏程序 参数分别代表 块数 游戏时间 等级
         function starGame( num,timeGame,rating){ 

             oStar.style.display = "none";
             oFail.style.display = "none";
             oSuccess.style.display = "none";
             oContent.style.display = "block";
             oContent.setAttribute("off","0");

             oTime.style.width = "440px";
             oScore.innerHTML = 0;
             oRect.innerHTML = "";

             fillContent(num); 
             setTimeout(function (){
                 for(var i = 0; i < aImg.length; i++){
                     aImg[i].src = "http://img3.douban.com/view/photo/thumb/public/p2191686093.jpg";
                 }
                 getTime( oTime,"width", -Math.floor( parseInt( getStyle(oTime,"width") )/timeGame ), timeGame, num*20, rating );
             },3000);
         }

         //填充块
         function fillContent(size){
             var arr = Mix(size,1,2);
             //console.log(arr);

             for(var i = 0; i < arr.length; i++){
                 oRect.innerHTML += "<img style = ‘top:"+ 110*Math.floor(i/4) +"px; left:"+ 110*Math.floor(i%4) +"px‘ select = ‘N‘ index = " + i + " address = " + arrImg[arr[i]] +" src = "+ arrImg[arr[i]] +" num = "+ arr[i] + ">";
             }
         }

         function Mix( max,min,fre){
             var arr = [];
             for(var i = min; i <= max; i++ ){
                 arr.push(i);
             }
             var newarr = [getRandom(arr.length,1)];
             for(var i = 0; newarr.length < arr.length*fre; i++ ){

                 var num = getRandom(arr.length,1);

                 if( toCon(num,fre-1 ) ){
                     newarr.push(num);
                 }
             }

             function toCon( num,fre ){
                 var iNow = 0;
                 for(var i = 0; i < newarr.length; i++ ){
                     if( num == newarr[i] && iNow != fre ){
                         ++iNow;
                     }else if( num == newarr[i] && iNow == fre ){
                         return false;
                     }
                 }
                 return true;
             }

             return newarr;
         }

         

         function getTime( obj,attr,speed,time,totle,rating ){
             clearInterval(obj.timer);

             selectRect(totle,rating);
             obj.timer = setInterval( function (){

                 time--;
                 if( time != 0 ){
                     obj.style[attr] = parseInt( getStyle(obj,attr) ) + speed + "px";
                     if( parseInt(oContent.getAttribute("off")) ==  1  ){
                         clearInterval(obj.timer);
                     }
                 }


                 if( time == 0  ){
                     obj.style[attr] = "0px";
                     clearInterval(obj.timer);
                     for(var i = 0; i < aImg.length; i++ ){
                         aImg[i].src = aImg[i].getAttribute("address");
                     }
                     
                     //console.log( oContent.getAttribute("off") );
                     if( parseInt(oContent.getAttribute("off"))!=  1 ){

                         oContent.style.display = "none";
                         oFail.style.display = "block";

                         var oP = oFail.getElementsByTagName("p")[0];

                         oP.onclick = function (){

                             oFail.style.display = "none";
                             oStar.style.display = "block";

                             oSpan.onclick = function (){
                                 starGame(level[0].num,level[0].timeGame,0);
                             }
                         }
                     }

                 }
             },1000)
         }

         function selectRect(totle,rating){
             var selectNum = 0;
             var selectVal = [];
             var selectIndex = [];
             for(var i = 0; i < aImg.length; i++ ){
                 aImg[i].style.cursor = "pointer";
                 aImg[i].onclick = function(){
                     selectNum++;
                     this.style.border = "1px red solid";
                     this.src = this.getAttribute("address");
                     this.setAttribute("select","Y");
                     selectVal.push( parseInt( this.getAttribute("num")) );
                     selectIndex.push( parseInt( this.getAttribute("index")) );

                     //console.log(selectVal );
                     if( selectNum == 2 ){
                         selectNum = 0;

                          if( selectVal.length == 2 ){
                              if( selectVal[0] == selectVal[1]  && selectIndex[0]!= selectIndex[1] ){

                                  toSelectSuccess(totle,rating);
                                  oScore.innerHTML = parseInt( oScore.innerHTML ) + 20;
                              } else {
                                  toSelectError();
                              }
                          }
                         selectVal = [];
                         selectIndex = [];
                     }    
                 }
             }

             function toSelectError(){
                 setTimeout (function(){
                     var selArrE = [];

                     for(var i = 0; i < aImg.length; i++ ){
                         if( aImg[i].getAttribute("select") == "Y"){
                             selArrE.push( parseInt(aImg[i].getAttribute("index")) );
                         }
                     }

                     for(var i = 0; i < aImg.length; i++ ){
                         for(var j = 0; j < selArrE.length; j++ ){
                             if( aImg[i].getAttribute("index") == selArrE[j] ){
                                 aImg[i].src = aImg[i].getAttribute("address");
                                 aImg[i].src = "http://img3.douban.com/view/photo/thumb/public/p2191686093.jpg";
                                 aImg[i].style.border = "1px white solid";
                                 aImg[i].setAttribute("select","N");
                             }
                         }
                     }
                     selArrE.length = 0;
                 },300);
            }

            function toSelectSuccess( totle,rating){
                 setTimeout (function(){
                     var selArrS = [];
                     for(var i = 0; i < aImg.length; i++ ){
                         if( aImg[i].getAttribute("select") == "Y"){
                             selArrS.push( aImg[i].getAttribute("index") );
                         }
                     }

                     //console.log(totle);

                     for(var i = 0; i < aImg.length; i++ ){
                         for(var j = 0; j < selArrS.length; j++ ){
                             if( aImg[i].getAttribute("index") == selArrS[j] ){
                                 aImg[i].src = aImg[i].getAttribute("address");
                                 aImg[i].style.display = "none";
                                 aImg[i].setAttribute("select","N");
                             }
                         }
                     }
                     selArrS.length = 0;

                     if( parseInt( oScore.innerHTML ) == parseInt( totle ) ){

                         oContent.setAttribute("off","1");
                         oContent.style.display = "none";
                         oSuccess.style.display = "block";

                         var oP = oSuccess.getElementsByTagName("p")[0];
                         oP.onclick = function(){
                             rating++;
                             
                             if( rating == 4 ){
                                 oStar.style.display = "block";
                                 oFail.style.display = "none";
                                 oSuccess.style.display = "none";
                                 oContent.style.display = "none";
                                 rating = 0;

                                 oSpan.onclick = function (){

                                     
                                     starGame( level[0].num,level[0].timeGame,0 );
                                     
                                 }

                             }

                             starGame( level[rating].num,level[rating].timeGame,rating);
                             
                         }
                         
                     }

                     //console.log( selArr[0],selArr[1] );
                     var selArr = [];
                     //console.log( selArr[0],selArr[1] );
                     //var selArr = [];
                 },200);
        }



         }

             
         

         
        
         

         function getStyle(obj,attr){
             if(obj.currentStyle){
                 return obj.currentStyle[attr];
             } else{
                 return getComputedStyle(obj)[attr];
             }
         }

         function getRandom( max, min){
             return Math.floor( Math.random()*( max - min + 1) + min );
         }
    }
    </script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #start{
            background: url(images/background.jpg) no-repeat;
            margin: 50px auto;
            position: relative;
            width: 800px;
            height: 500px;
            overflow: hidden;
            display: block;
        }

        #start span{
            background: pink;
            color: white;
            position: absolute;
            top: 400px;
            left: 700px;
            cursor: pointer;
            padding: 15px;
        }

        #content{
            background: #cccccc;
            margin: 50px auto;
            position: relative;
            width: 440px;
            height: 440px;
            display: none;
        }
        #content p{
            position: absolute;
            right: 5px;
            top: -20px;
        }

        #content #rect{
            width: 440px;
            height: 440px;
            position: relative;;
        }

        #content img{
            border: 1px white solid;
            width: 98px;
            height: 98px;
            margin: 5px;
            position: absolute;
        }

        #time{
            width: 440px;
            background: red;
            height: 30px;
            position: absolute;
            bottom: -30px;
        }

        #fail{
            background: black;
            margin: 50px auto;
            width: 440px;
            height: 440px;
            display: none;
        }

        #fail p {
            margin: 50px auto;
            font-size: 120px;
            color:white;
            cursor: pointer;
        }

        #success{
            background: red;
            margin: 50px auto;
            width: 440px;
            height: 440px;
            display: none;
        }

        #success p {
            margin: 50px auto;
            font-size: 120px;
            color:white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id = "start">
        <span>start</span>
    </div>

    <div id = "content"  off = "0">
        <p>Score: <span id = "score">0</span>point</p>
        <div id = "time"></div>
        <div id="rect"></div>

    </div>

    <div id = "fail">
        <p>Failure!</p>
    </div>

    <div id = "success">
        <p>Success</p>
    </div>
</body>
</html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。