Javascript-小游戏2048 超详细教学说明_2048小游戏代码的每步解析

作者：AllinToyou | 2024-03-05 15:21:09

踩

2048小游戏代码的每步解析

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

二、游戏实现

数字的显示和变换主要是利用了元素的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++;
    }
}
1
2
3
4
5
6
7
8
9

后续的操作主要就是对这个数组内的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 ="";
            } 
        
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

游戏开始流程：

//游戏开始产生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;//下
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/191983