**

1、2048小游戏玩法和规则

**
2048是一款休闲小游戏。
2048界面有16宫格,可以用键盘方向键选择上下左右四个方向进行操作,如果有相邻的两个数字相同就会合并,相加组成新数字,并且每次移动或合并后界面会自动增加一个数字。
当16宫格中没有空格子,且四个方向都无法操作时,游戏会结束。目的是合并出2048这个数字,获得更高分数。

2、游戏界面截图

在这里插入图片描述

3、2048游戏实现原理

1、游戏界面由16宫格组成,可以看成是矩阵的形式。
2、在HTML中给每个格子添加类名以及属性,来记录每个格子的位置。
3、游戏开始时,随机生成两个数字,2或者4出现在矩阵中任意位置.
4、游戏核心在于移动
移动由四个方向:上向左右。实现思路如下:

如果触发向左移动
  遍历所有非空元素
    如果当前元素在第一个位置
           不动
    如果当前元素不在第一个位置
      如果当前元素左侧是空元素    
              向左移动
      如果当前元素左侧是非空元素    
        如果左侧元素和当前元素的内容不同    
                  不动
        如果左侧元素和当前元素的内容相同    
                  向左合并


如果触发向右移动
  遍历所有非空元素
    如果当前元素在最后一个位置     
           不动
    如果当前元素不在最后一个位置
      如果当前元素右侧是空元素   
              向右移动
      如果当前元素右侧是非空元素    
        如果右侧元素和当前元素的内容不同    
                  不动
        如果右侧元素和当前元素的内容相同    
                  向右合并

其他移动的思路和上面一样。
5、然后是判断游戏是否结束

获取所有元素
获取所有非空元素
如果所有元素的个数 == 所有非空元素的个数
  循环遍历所有非空元素
    上面元素存在 && (当前元素的内容 == 上面元素的内容)   return
    下面元素存在 && (当前元素的内容 == 下面元素的内容)   return
    左边元素存在 && (当前元素的内容 == 左边元素的内容)   return
    右边元素存在 && (当前元素的内容 == 右边元素的内容)   return
   以上条件都不满足,Game Over! 

游戏基本思路就完成了,接下来是实现HTML和JS代码。

HTML和CSS部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 500px;
        height: 500px;
        /* border: 1px solid #000; */
        background-color: #BBADA0;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        border-radius: 0.5em;
        margin: 100px auto;
    }
    #box div{
        width: 100px;
        height: 100px;
        border: 1px solid transparent;
        background-color: #CDC1B4;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        border-radius: 10px;
        margin-top: 10px;
    }
</style>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script src="./2048-1.js"></script>
</body>
</html>

Javascript部分:

var divs= document.querySelectorAll("#box>div");
var arr = [[],[],[],[]];
var num=0;
for(var i = 0;i <arr.length;i++){
    for(var j = 0;j <arr.length;j++){
        arr[i][j] = divs[num];
        num++;
    }
}

console.log(arr);





//游戏开始产生2个随机数
rand();
rand();
bgcolor();
//上下左右的监听事件

window.onkeydown = function(e){
   
    switch(e.keyCode){
        case 37 :  end(); downleft();bgcolor();     break;//左
        case 38 :  end(); downup();bgcolor();     break;//上
        case 39 :  end(); downright();bgcolor();     break;//右
        case 40 :  end(); downfoot(); bgcolor();     break;//下
    } 


}



//产生一个数字
function rand(){
    var x=Math.floor(Math.random()*4);
    var y=Math.floor(Math.random()*4);
    if(arr[x][y].innerHTML == ""){
        arr[x][y].innerHTML = Math.random() > 0.5 ? 2 : 2;
    }else{
        rand();
    }
}



//判断是否游戏结束函数
function end(){
    var bool=true;
    for(var i = 0;i <arr.length;i++){
        for(var j = 0;j <arr.length;j++){
            if(arr[i][j].innerHTML == "" ){
            bool = false;
            }
        }
    }
    if(bool){
       chonghe();
    }else{
        rand();
    }
}
function  chonghe(){
    var bool = true;
    for(var i = 0;i < arr.length-1 ;i++){
        for(var j = 0;j< arr.length-1;j++){
            if(arr[i][j].innerHTML == arr[i][j+1].innerHTML || arr[i][j].innerHTML == arr[i+1][j].innerHTML || arr[i+1][j].innerHTML == arr[i+1][j+1].innerHTML || arr[i][j+1].innerHTML == arr[i+1][j+1].innerHTML  ){
                bool = false;
            }
        }
    }
    if(bool){
        alert("游戏结束!")
    }
}


//游戏重新开始的函数
function restart(){
    for(var i = 0;i <arr.length;i++){
        for(var j = 0;j <arr.length;j++){
            arr[i][j].innerHTML = ""; 
        }
    }
    rand();
    rand();
}


//不同的数字添加不同的背景颜色

function bgcolor(){
    for(var i = 0;i <arr.length;i++){
        for(var j = 0;j <arr.length;j++){
          
          switch(arr[i][j].innerHTML){
            case '2': arr[i][j].style.backgroundColor = "#EEE4DA" ;break;
            case '4': arr[i][j].style.backgroundColor = "#EDE0C8" ;break;
            case '8': arr[i][j].style.backgroundColor = "#F2B179" ;break;
            case '16': arr[i][j].style.backgroundColor = "#F59563" ;break;
            case '32': arr[i][j].style.backgroundColor = "#F67C5F" ;break;
            case '64': arr[i][j].style.backgroundColor = "#F65E3B" ;break;
            case '128': arr[i][j].style.backgroundColor = "#EDCF72" ;break;
            case '256': arr[i][j].style.backgroundColor = "#EDCC61" ;break;
            case '512': arr[i][j].style.backgroundColor = "#EDC850" ;break;
            case '1024': arr[i][j].style.backgroundColor = "yellowgreen" ;break;
            case '2048': arr[i][j].style.backgroundColor = "perple" ;break;
            default:  arr[i][j].style.backgroundColor = "#CDC1B4" ;break;     

          }
        }
    }

}



//上下左右按下执行的函数
         
function downright(){
    for(var i = 0;i <4;i++){
        for(var j = 0;j <4;j++){
            if( j<3&&arr[i][j].innerHTML !=""&& arr[i][j+1].innerHTML==""){
                arr[i][j+1].innerHTML = arr[i][j].innerHTML;
                arr[i][j].innerHTML="";
                downright();
            }else if(j<3&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i][j+1].innerHTML){
                arr[i][j+1].innerHTML *=2;
                arr[i][j].innerHTML ="";
            } 
        
        }
    }
}

function downleft(){
    for(var i = 0;i <4;i++){
        for(var j = 0;j <4;j++){
            if( j>0&&arr[i][j].innerHTML !=""&& arr[i][j-1].innerHTML==""){
                arr[i][j-1].innerHTML = arr[i][j].innerHTML;
                arr[i][j].innerHTML="";
                downleft();
            }else if(j>0&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i][j-1].innerHTML){
                arr[i][j-1].innerHTML *=2;
                arr[i][j].innerHTML ="";
            } 
        
        }
    }
}

function downfoot(){
    for(var i = 0;i <4;i++){
        for(var j = 0;j <4;j++){
            if( i<3&&arr[i][j].innerHTML !=""&& arr[i+1][j].innerHTML==""){
                arr[i+1][j].innerHTML = arr[i][j].innerHTML;
                arr[i][j].innerHTML="";
                downfoot();
            }else if(i<3&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i+1][j].innerHTML){
                arr[i+1][j].innerHTML *=2;
                arr[i][j].innerHTML ="";
            } 
        
        }
    }
}

function downup(){
    for(var i = 0;i <4;i++){
        for(var j = 0;j <4;j++){
            if( i>0&&arr[i][j].innerHTML !=""&& arr[i-1][j].innerHTML==""){
                arr[i-1][j].innerHTML = arr[i][j].innerHTML;
                arr[i][j].innerHTML="";
                downup();
            }else if(i>0&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i-1][j].innerHTML){
                arr[i-1][j].innerHTML *=2;
                arr[i][j].innerHTML ="";
            } 
        
        }
    }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐