master

分支 (1)

管理

管理

master

here-you-are
/
index1.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>2048小游戏</title>
<script type="text/javascript">
var arr;
//初始化游戏页面，需要在表格中随机生成一个2,一个4
function init(){
    arr = new Array(4);
    for(i=0;i<arr.length;i++){
        arr[i]=[0,0,0,0];
    }
    var x1,x2,y1,y2;
    x1=Math.round(Math.random()*3);
    y1=Math.round(Math.random()*3);
    arr[x1][y1] =2;
    while(true){
        x2=Math.round(Math.random()*3);
        y2=Math.round(Math.random()*3);
        if(x1!=x2 || y1!=y2){
            arr[x2][y2] =4;
            break;
        }
    }
    display();
    show();

}
function show(){
    var count=0;
    for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            count += arr[i][j];
            var num = arr[i][j];
            var td = document.getElementById(i+""+j);
            switch(num){
            case 2:
                td.style="background-color:#FFFFE1";
                break;
            case 4:
                td.style="background-color:#FFEFD1";
                break;
            case 8:
                td.style="background-color:#FEDFD5";
                break;
            case 16:
                td.style="background-color:#FFDEAD";
                break;
            case 32:
                td.style="background-color:#FFA07A";
                break;
            case 64:
                td.style="background-color:#F08080";
                break;
            case 128:
                td.style="background-color:#DB7093";
                break;
            case 256:
                td.style="background-color:#FF69B4";
                break;
            case 512:
                td.style="background-color:#DA70D6";
                break;
            case 1024:
                td.style="background-color:#FF4500";
                break;
            case 2048:
                td.style="background-color:#FF0000";
                break;
            default:
                td.style="background-color:#87CEFA";
                break;
            }
            if(num==2048){
                var p = document.getElementById("p5");
                p.innerHTML = "";
                p.innerHTML = "恭喜你！已经获得2048胜利！可以继续挑战4096！";
            }
            if(num==4096){
                var p = document.getElementById("p5");
                p.innerHTML = "";
                p.innerHTML = "恭喜你！已经获得4096胜利！";
            }

        }
    }
    var p = document.getElementById("p3");

    p.innerHTML = "";
    p.innerHTML = "Score :"+count;

}
function display(){
    for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            //查找对应下标的元素
            var td = document.getElementById(i+""+j);

            //将对应的数据显示到元素中
            if(arr[i][j]!=0){
                //有效数据
                td.innerHTML = arr[i][j];
            }else{
                td.innerHTML = " ";
            }
        }
    }
}

window.onkeydown = function(){
    var code = event.keyCode;
    switch (code) {
    case 37://左
        onleft();
        show();
        break;
    case 38://上
        ontop();
        show();
        break;
    case 39://右
        onright();
        show();
        break;
    case 40://下
        onbottom();
        show();
        break;
    }
}


/**
* 当用户按下 ←
* @returns
*/
function onleft(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向左移动
        //1.1   创建一个临时数组, 用于存储当前行的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 0;
        for(j=0;j<arr.length;j++){
            if(arr[i][j]!=0){
                temp[index] = arr[i][j];
                index++;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据前移一位
        for(j=0;j<temp.length-1;j++){
            if(temp[j]==temp[j+1]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j+1;
                while(k<arr.length-1){
                    temp[k++] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[temp.length-1] = 0;
            }
        }
        arr[i] = temp;
    }

    //3.    随机产生一个2/4 放在在一个空的位置
    random();
    //4.    显示
    display();
}
/**
* 当用户按下↑
*/
function ontop(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向上移动
        //1.1   创建一个临时数组, 用于存储当前列的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 0;
        //00  10  20  30
        for(j=0;j<arr.length;j++){
            if(arr[j][i]!=0){
                temp[index] = arr[j][i];
                index++;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据上移一位
        for(j=0;j<temp.length-1;j++){
            if(temp[j]==temp[j+1]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j+1;
                while(k<arr.length-1){
                    temp[k++] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[temp.length-1] = 0;
            }
        }
        //arr[i] = temp;
        for(j=0;j<arr.length;j++){
                arr[j][i] = temp[j];
            }
    }

    //3.    随机产生一个2/4 放在在一个空的位置
    random();
    //4.    显示
    display();

}

function onbottom(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向上移动
        //1.1   创建一个临时数组, 用于存储当前列的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 3;
        //00  10  20  30
        for(j=3;j>=0;j--){
            if(arr[j][i]!=0){
                temp[index] = arr[j][i];
                index--;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据上移一位
        for(j=3;j>0;j--){
            if(temp[j]==temp[j-1]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j-1;
                while(k>0){
                    temp[k--] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[0] = 0;
            }
        }
        //arr[i] = temp;
        for(j=3;j>=0;j--){
                arr[j][i] = temp[j];
            }
    }

    //3.    随机产生一个2/4 放在在一个空的位置
    random();
    //4.    显示
    display();
}


function onright(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向左移动
        //1.1   创建一个临时数组, 用于存储当前行的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 3;
        for(j=3;j>=0;j--){
            if(arr[i][j]!=0){
                temp[index] = arr[i][j];
                index--;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据前移一位
        for(j=3;j>0;j--){
            if(temp[j-1]==temp[j]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j-1;
                while(k>0){
                    temp[k--] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[0] = 0;
            }
        }
        arr[i] = temp;
    }

    //3.    随机产生一个2/4 放在在一个空的位置
    random();
    //4.    显示
    display();
}

function random(){
    //1.    循环遍历所有数据, 查询是否存在0 , 不存在,则直接结束游戏!
    //  用于记录使用可以继续产生随机数字
    var flag = false;
    for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            if(arr[i][j]==0){
                flag = true;
                break;
            }
        }
    }
    if(!flag){
        alert("GameOver!");
        return;
    }
    //产生一个随机位置
    var x,y;
    while(true){
        x = Math.round(Math.random()*3);
        y = Math.round(Math.random()*3);
        if(arr[x][y]==0){
            break;
        }
    }
    //产生一个随机数字
    while(true){
        var num = Math.round(Math.random()*6);
        if(num==2||num==4){
            arr[x][y] = num;
            break;
        }
    }
}
</script>
<style type="text/css">
div{
margin-top:30px;
width:900px;
margin:0 auto;
border:2px solid #666;
border-radius:5px;
background-color:#E0FFFF;
}
#p2{
margin:0 auto;
font-size:40px;
text-align:center;
}
table{
width:400px;
height:400px;
background-color:#F0FFFF;
border:1px solid #aaa;
text-align:center;
margin:0 auto;
border-radius:1%;
font-size:28px;
}
tr,td{
width:18%;
height:18%;
background-color:#87CEFA;
border:1px solid #ddd;
border-radius:2%;
}
#p1{
margin:0 auto;
text-align:center;
padding-bottom:50px;
}
body{
width:100%;
height:600px;
}
#p3{
width:90%;
display:inline-block;
height:40px;
font-size:22px;
text-align:right;
padding-right:40px;
margin-bottom:0;
}
input{
width:100px;
height:30px;
margin-right:80px;
}
#p4{
width:100%;
text-align:right;
margin-top:0;
}
#p5{
color:red;
text-weight:bold;
width:100%;
text-align:right;
margin-top:0;
}
</style>
</head>
<body onload="init()">
<div>
    <br>
    <p id="p2">2048游戏</p>
    <br>
    <hr>
    <br>
    <p id="p5"></p>
    <p id="p3">Score :6</p>
    <p id="p4"><input type="button" value="开始新游戏" onclick="init()"></p>
    <table>
    <tbody><tr><td id="00" style="background-color: rgb(135, 206, 250);"> </td><td id="01" style="background-color: rgb(135, 206, 250);"> </td><td id="02" style="background-color: rgb(135, 206, 250);"> </td><td id="03" style="background-color: rgb(135, 206, 250);"> </td></tr>
    <tr><td id="10" style="background-color: rgb(255, 255, 225);">2</td><td id="11" style="background-color: rgb(135, 206, 250);"> </td><td id="12" style="background-color: rgb(135, 206, 250);"> </td><td id="13" style="background-color: rgb(255, 239, 209);">4</td></tr>
    <tr><td id="20" style="background-color: rgb(135, 206, 250);"> </td><td id="21" style="background-color: rgb(135, 206, 250);"> </td><td id="22" style="background-color: rgb(135, 206, 250);"> </td><td id="23" style="background-color: rgb(135, 206, 250);"> </td></tr>
    <tr><td id="30" style="background-color: rgb(135, 206, 250);"> </td><td id="31" style="background-color: rgb(135, 206, 250);"> </td><td id="32" style="background-color: rgb(135, 206, 250);"> </td><td id="33" style="background-color: rgb(135, 206, 250);"> </td></tr>
    </tbody></table>
    <br>
    <hr>
    <p id="p1">游戏规则：使用← ↑ → ↓ 操作，相邻相同的数字会相加，当和为2048时，游戏胜利！</p>
    </div>
</body>
</html>