Javascript-小游戏2048 超详细教学说明

咔卡熊

已于 2022-06-16 19:39:00 修改

阅读量2k

点赞数 2

分类专栏：前端文章标签： css javascript html

于 2022-06-16 18:58:22 首次发布

本文链接：https://blog.csdn.net/qq_41045128/article/details/125315532

版权

前端专栏收录该内容

17 篇文章 13 订阅

订阅专栏

Javascript-小游戏2048 超详细教学说明

前言

最近在学前端，趁热找几个小游戏练练手。
2048游戏规则不再过多描述，这里主要用到了html，css，JavaScript相关知识.
代码来源：https://blog.csdn.net/bs775926015/article/details/115447514

一、游戏页面布局

在这里插入图片描述
每一个方块就是一个div标签，由于div标签属于块级元素，其默认是垂直排列。想要达到中间的效果。这17个div标签需要有一个父类最为背景框，其余16个子元素在内部排序。这里使用了弹性布局，相比于浮动来说，更加快捷方便。而button属于行内块元素，通过让其转为块级元素实现以上排列。

补充：浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题，但是也会有不好的影响。如脱标

html主要代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="c2048.css">
</head>
<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>
    <button id="rebutton" onclick="restart()">重新开始 </button>
    <script src="j2048.js"></script> 
</body>
</html>

css代码如下：

    #box{   
    width: 500px;
    height: 500px;
    background-color: #BBADA0;
    border-radius: 0.5em;
    margin: 50px auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;  
}
/* 后代选择器 */
#box div{
    width: 100px;
    height: 100px;
    background-color: #CDC1B4;
    border: 1px solid transparent;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
}
#rebutton{
    width: 70px;
    height: 30px;
    background-color: hsl(64, 60%, 52%);
    display: block;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: auto;
}

二、游戏实现

数字的显示和变换主要是利用了元素的innerHTML来实现获取对象内容或向对象插入内容的功能；
首先：创建 4*4 数组，用于存放16个子div元素，

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++;
    }
}

后续的操作主要就是对这个数组内的div元素进行修改

// 在4*4的随机位置产生数字2或4 ，出现比率是1：4
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.2 ? 2 : 4;  
    }else{
        rand();
    }
}
//判断是否游戏结束函数：(1)、数组数组是否已满 (2)相邻元素是否相同
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){
       cheak();
    }else{
        rand();
    }
}
function cheak(){
    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 = ""; 
        }
    }
    bgcolor();
    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 ="";
            } 
        
        }
    }
}

游戏开始流程：

//游戏开始产生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;//下
    } 
}