2048 源代码

<html>
     <head>
          <style type="text/css">
               body span{
                    margin-left:550px;
                    margin-top:50px;
                  
                    color:red;
                    font-size:50px;
               }
               body table{
                    border:gray 6px solid;
                    width:300px;
                    height:300px;
                    background: gray;
                    border-radius:10px;
                  
                    margin-left:450px;
                    margin-top:150px;
                    table-layout:fixed;
                  
               }
             
               table tr{
                    margin:0px;
                    padding:0px;
                  
                    border:white 0px solid;
                    width:100%;
               }
               table tr td {
                    border:white 1px solid;
                    background: white;
                    overflow: hidden;
                    margin:0px;
                    padding:0px;
                    width:25%;
                    height: 25%;
                    border-radius:10px;
                  
               }
          </style>
        
          <script type="text/javascript">
        
               var nums ={11:0,12:0,13:0,14:0,
                              21:0,22:0,23:0,24:0,
                              31:0,32:0,33:0,34:0,
                              41:0,42:0,43:0,44:0};
             
               /**
               按键控制。
               */
               function keyUp(e) {
                    var currKey=0,e=e||event;
                    currKey=e.keyCode||e.which||e.charCode;
                    console.log("currKey:"+currKey);
                    var isNeedRandomNum = 0;
                    //还需要增加一个判断是否能移动的方法
                    if(!iscanremove()){
                         alert("game is over!");
                         return;
                    }
                    if(currKey == 37)
                    {
                         isNeedRandomNum = removeLeft();
                    }
                    else if(currKey == 38)
                    {
                         isNeedRandomNum = removeTop();
                    }else if(currKey == 39)
                    {
                         isNeedRandomNum = removeRight();
                    }else if(currKey == 40)
                    {
                         isNeedRandomNum = removeDown();
                    }else{
                         isNeedRandomNum = 0;
                    }

                   //将数据刷新到页面中
                    refreshFun();
                    console.log(nums);

                    //生成随机数,并修改nums对应的位置的数
                    randomNum(isNeedRandomNum);
                    console.log("isNeedRandomNum:" + isNeedRandomNum);
                    console.log(nums);

                    //刷新最大数
                    refrushMaxNum();
               }
               document.onkeyup = keyUp;
            
             
               function f(){
                    //remainSpace.splice(3,1);
                    //alert(333);
                    // alert("");
                    // var newArray = [0,0,0,0];
                    // var f1 = getListWithOutZero(newArray);
                    // console.log(f1.length);
                    // console.log(f1);
                    // console.log([1,2,3] + [,4,5]);

                    // console.log(Math.ceil(Math.random()*1) - 1);

                    //判断一个列表是否为空
                    // console.log("========:"  + ([]==[] ? 0 : 1));

                    //判断一个列表是否为空
                    var list1 = [];
                    if (list1.length == 0) {
                         console.log("this list is empty!");
                    }else{
                         console.log("is not empty!");
                    }

                    // console.log("1234".length);

               }
             

               function removeLeft(){
                    //alert("left");
                    console.log("move to left");
                    var l1 = new Array(nums[11],nums[12],nums[13],nums[14]);
                    var l2 = new Array(nums[21],nums[22],nums[23],nums[24]);
                    var l3 = new Array(nums[31],nums[32],nums[33],nums[34]);
                    var l4 = new Array(nums[41],nums[42],nums[43],nums[44]);
                  
                    var l11 = getNewNums(l1);
                    var l22 = getNewNums(l2);
                    var l33 = getNewNums(l3);
                    var l44 = getNewNums(l4);
                  
                    //将数据添加到nums中
                    nums ={11:l11[0],12:l11[1],13:l11[2],14:l11[3],
                              21:l22[0],22:l22[1],23:l22[2],24:l22[3],
                              31:l33[0],32:l33[1],33:l33[2],34:l33[3],
                              41:l44[0],42:l44[1],43:l44[2],44:l44[3]};
                    // console.log(nums);
                  
                    return (list_is_equal(l1,l11) &&
                         list_is_equal(l2,l22) &&
                         list_is_equal(l3,l33) &&
                         list_is_equal(l4,l44)) ? 0 : 1 ;
                  
                  
               }
               function removeRight(){
                    console.log("move to right");
                    var l1 = new Array(nums[14],nums[13],nums[12],nums[11]);
                    var l2 = new Array(nums[24],nums[23],nums[22],nums[21]);
                    var l3 = new Array(nums[34],nums[33],nums[32],nums[31]);
                    var l4 = new Array(nums[44],nums[43],nums[42],nums[41]);
                  
                    var l11 = getNewNums(l1);
                    var l22 = getNewNums(l2);
                    var l33 = getNewNums(l3);
                    var l44 = getNewNums(l4);
                  
                    //将数据添加到nums中
                    nums ={11:l11[3],12:l11[2],13:l11[1],14:l11[0],
                              21:l22[3],22:l22[2],23:l22[1],24:l22[0],
                              31:l33[3],32:l33[2],33:l33[1],34:l33[0],
                              41:l44[3],42:l44[2],43:l44[1],44:l44[0]};
                    console.log(nums);

                    return (list_is_equal(l1,l11) &&
                         list_is_equal(l2,l22) &&
                         list_is_equal(l3,l33) &&
                         list_is_equal(l4,l44)) ? 0 : 1 ;
               }

               function removeTop(){
                    console.log("move to top");
                    var l1 = new Array(nums[11],nums[21],nums[31],nums[41]);
                    var l2 = new Array(nums[12],nums[22],nums[32],nums[42]);
                    var l3 = new Array(nums[13],nums[23],nums[33],nums[43]);
                    var l4 = new Array(nums[14],nums[24],nums[34],nums[44]);
                  
                    var l11 = getNewNums(l1);
                    var l22 = getNewNums(l2);
                    var l33 = getNewNums(l3);
                    var l44 = getNewNums(l4);
                  
                    //将数据添加到nums中
                    nums ={11:l11[0],12:l22[0],13:l33[0],14:l44[0],
                              21:l11[1],22:l22[1],23:l33[1],24:l44[1],
                              31:l11[2],32:l22[2],33:l33[2],34:l44[2],
                              41:l11[3],42:l22[3],43:l33[3],44:l44[3]};
                    console.log(nums);

                    return (list_is_equal(l1,l11) &&
                         list_is_equal(l2,l22) &&
                         list_is_equal(l3,l33) &&
                         list_is_equal(l4,l44)) ? 0 : 1 ;
               }

               function removeDown(){
                    console.log("move to down");
                    var l1 = new Array(nums[41],nums[31],nums[21],nums[11]);
                    var l2 = new Array(nums[42],nums[32],nums[22],nums[12]);
                    var l3 = new Array(nums[43],nums[33],nums[23],nums[13]);
                    var l4 = new Array(nums[44],nums[34],nums[24],nums[14]);
                  
                    var l11 = getNewNums(l1);
                    var l22 = getNewNums(l2);
                    var l33 = getNewNums(l3);
                    var l44 = getNewNums(l4);
                  
                    //将数据添加到nums中
                    nums ={11:l11[3],12:l22[3],13:l33[3],14:l44[3],
                              21:l11[2],22:l22[2],23:l33[2],24:l44[2],
                              31:l11[1],32:l22[1],33:l33[1],34:l44[1],
                              41:l11[0],42:l22[0],43:l33[0],44:l44[0]};
                    console.log(nums);
                  
                    return (list_is_equal(l1,l11) &&
                         list_is_equal(l2,l22) &&
                         list_is_equal(l3,l33) &&
                         list_is_equal(l4,l44)) ? 0 : 1 ;
               }
             
              //判断两个列表是相同
               function list_is_equal(l1,l11){
                    if (l1 == [] && l11 == []) {//先判断两个都为空
                         return true;
                    }else if(l1.length == 0 || l11.length == 0){//再判断一个为空的情况。
                         return false;
                    }else if(l1.length != l11.length){//两个都不为空,而且两个列表长度不同
                         return false;
                    }else{
                         for (var i = 0; i < l1.length; i++) {
                              if(l1[i] != l11[i]){
                                   return false;
                              }
                         }
                         return true;
                    }

               }
               //刷新页面。
               function refreshFun(){
                    var value = 0;
                    for (var i = 1; i <= 4; i++) {
                         for (var j = 1; j <= 4; j++) {
                              value = nums[i*10+j];
                              if(value != 0)
                                   document.getElementById(""+i+""+j).innerHTML = setColor(value);
                              else{
                                   document.getElementById(""+i+""+j).innerHTML = "";
                              }
                         };
                    };
               }

               function setColor(value){
                    var value1 = ""+value+"";
                    var color = "";
                    switch (value){
                         case 2 :
                              color = "#006600";break;
                         case 4 :
                              color = "#006699";break;
                         case 8 :
                              color = "#3300CC";break;
                         case 16 :
                              color = "#6600FF";break;
                         case 32 :
                              color = "#990099";break;
                         case 64 :
                              color = "#996633";break;
                         case 128 :
                              color = "#CC6600";break;
                         case 256 :
                              color = "#FF00CC";break;
                         case 512 :
                              color = "#FF66FF";break;
                         case 1024 :
                              color = "#FFFF00";break;
                         default:
                              color = "#0000FF";break;
                    }

                    return "<font color='"+ color +"'>"+ value +"</font>";
               }
             
              //根据每一个列表,获取每个列表最后的累加数字。
               function getNewNums(arr){
                    // console.log("oldArray:");
                    // console.log(arr);
                    //返回累加后的列表
                    var newArray = [];
                    //获得非0的列表
                    var oldArray = getListWithOutZero(arr);
                    // console.log("oldArray:"+oldArray);

                    if(oldArray.length == 0 ){//非零的数字一个都没有
                         newArray = [0,0,0,0];
                    }else if(oldArray.length == 1 ){//非零的数字有一个
                         newArray = [oldArray[0],0,0,0];
                    }else if(oldArray.length == 2 ){//非零的数字有两个
                         newArray = getListSpecialFun(oldArray);
                    }else if(oldArray.length == 3 ){//非零的数字有三个
                         newArray = getListSpecialFun(oldArray);
                    }else if(oldArray.length == 4 ){//非零的数字有四个
                         newArray = getListSpecialFun(oldArray);
                    }else{//这种情况是不存在的。

                    }

                   
                    // console.log("newArray:");
                    // console.log(newArray);
                    return newArray;
               }
               //给定一个列表(如:[2,2,4]),返回数字为([4,4,0]),规则是左边的优先级高于右边,
               //左边的两个连续数字相同则相加。
               function getListSpecialFun(arr){
                    var newArray = [0,0,0,0];

                    for (var i = 0; i < arr.length ; ) {
                         var nextNum = arr[i+1];
                         if(nextNum == null){
                              nextNum = 0;
                         }
                         var arr1 = getSpecialFun([arr[i], nextNum]);
                         if (arr1[1] == 0) {//第一个数和第二个数是相同的
                              newArray[i] = arr1[0];
                              i = i + 2;
                         }else{//第一个数和第二个数是不同的。
                              newArray[i] = arr1[0];
                              if (i + 1 == arr.length -1) {
                                   newArray[i+1] = arr1[1];
                              };
                              i = i + 1;
                         }

                    };
                    // console.log("===="+newArray);

                    var arr2 = getListWithOutZero(newArray);

                    var arr3 = getListFileZero(arr2, 4);

                    return arr3;

               }

               //判断这两个数字(如:[1,1])是否相同,如果相同则返回[2,0],否则返回[1,2]
               function getSpecialFun(arr){
                    if(arr[0] == arr[1]){
                         return [2 * arr[0], 0];
                    }else{
                         return [arr[0],arr[1]];
                    }

               }

               //获得一个长度为4的列表,在列表的尾部填充0
               function getListFileZero(arr, length11){
                    var length1 = arr.length;
                    for (var i = 0; i < length11 - length1; i++) {
                         arr.push(0);
                    };
                    return arr;
               }

               //获得一个列表中的所有非0 的数字,并按以前的顺序排序。
               function getListWithOutZero(arr){
                    var newArray = [];
                    for (var i = 0; i < arr.length; i++) {
                         if(arr[i] != 0){
                              newArray.push(arr[i]);
                         }
                    };
                    return newArray;
               }

               //随机一个数,修改nums中对应的之。其中2的概率要大于4的概率。
               //并刷新该位置的随机数。
               function randomNum(isNeedRandomNum){
                    if (isNeedRandomNum == 0)//刷新时不需要增加一个数字
                         return;
                    console.log("this is randomNum function !");
                    //产生随机数
                    var randomRegion = Math.ceil(Math.random()*10);
                    var ranNum = 0;
                    if(randomRegion <= 9 ){//90%的概率都是2
                         ranNum = 2;
                    }else{
                         ranNum = 4;
                    }

                    var allPosition = [];
                    //查询出所有没有数字的位置
                    for (var i = 1; i <= 4; i++) {
                         for (var j = 1; j <= 4; j++) {
                              if (nums[i*10+j] == 0){
                                   allPosition.push(i*10 + j);
                              }
                         };
                    };
                    console.log("allPosition:"+allPosition);

                    //随机一个位置
                    if (allPosition.length >= 1) {
                         console.log("length >=1");
                         var position = Math.ceil(Math.random()* allPosition.length) - 1;
                         console.log("position:" + allPosition[position]);
                         nums[allPosition[position]] = ranNum;
                         console.log("position:" + allPosition[position]+" value:"+nums[allPosition[position]]);
                         document.getElementById(""+allPosition[position]).innerHTML = setColor(ranNum);
                    };
               }

               function refrushMaxNum(){
                    //获得最大数
                    var maxNum = 0;
                    for (var i = 1; i <= 4; i++) {
                         for (var j = 1; j <= 4; j++) {
                              if(nums[i*10+j] > maxNum){
                                   maxNum = nums[i*10+j];
                              }
                         };
                    }

                    //刷新最大数
                    document.getElementById("maxNum").innerHTML = "<font color='red'>"+ maxNum +"</font>";
               }

               //true:能移动,false:不能移动,即所有的格子都已经填入数据,而且无法合并。
               function iscanremove(){
                    var returnFlag = false;
                    //横向对比。
                    for (var i = 1; i <= 4; i++) {
                         var flagNum = nums[i*10+1];
                         for (var j = 1; j <= 4; j++) {
                              if (j == 1) {
                                   if(flagNum == 0)
                                        {return true;}
                                   continue;
                              }else{
                                   if(flagNum == 0)
                                        {return true;}

                                   if(flagNum == nums[i*10+j]){
                                        return true;
                                   }else{
                                        flagNum = nums[i*10 + j];
                                   }
                              }
                         }    
                    };

                    //纵向对比。
                    for (var j1 = 1; j1 <= 4; j1++) {
                         var flagNum = nums[1*10+j1];
                         for (var i1 = 1; i1 <= 4; i1++) {
                              if (i1 == 1) {
                                   if(flagNum == 0)
                                        {return true;}
                                   continue;
                              }else{
                                   if(flagNum == 0)
                                        {return true;}

                                   if(flagNum == nums[i1*10 + j1]){
                                        return true;
                                   }else{
                                        flagNum = nums[i1*10 + j1];
                                   }
                              }
                         }    
                    };

                    return returnFlag;
               }

               //初始化页面时随意一个数。
               function getfirstnum(){
                    randomNum(1);
               }
        
          </script>
     </head>
     <body οnlοad='getfirstnum()'>
          <span>
               2048
          </span>
          <br/>
          max score :<mydiv id="maxNum"><font color="red">2</font></mydiv>
          <table>
               <tr>
                    <td id="11"></td>
                    <td id="12"></td>
                    <td id="13"></td>
                    <td id="14"></td>
               </tr>
               <tr>
                    <td id="21"></td>
                    <td id="22"></td>
                    <td id="23"></td>
                    <td id="24"></td>
               </tr>
               <tr>
                    <td id="31"></td>
                    <td id="32"></td>
                    <td id="33"></td>
                    <td id="34"></td>
               </tr>
               <tr>
                    <td id="41"></td>
                    <td id="42"></td>
                    <td id="43"></td>
                    <td id="44"></td>
               </tr>
             
          </table>
          <input type="button" value="testfun" οnclick="f()"></input>
     </body>
   
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值