第一次尝试——2048前端开发（HTML+CSS+JS）-526互联

实现4*4 2048的三种工具利用：

HTML：实现页面的基本框架。

CSS：实现页面的样式。

JS：实现2048的功能。

利用JS实现功能的思路：

初始化每个格子，随机生成2个数
生成随机数
实现键盘监听事件
实现上下左右移动
记录游戏得分
判断是否有空余格子
判断是否还能移动格子
实现重新游戏

一、HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>2048小游戏</title>
 8     <link rel="stylesheet" href="./home.css">
 9     <style>
10         * {
11             margin: 0;
12             padding: 0;
13         }
14 
15         body {
16             background-color: antiquewhite;
17         }
18     </style>
19 </head>
20 
21 <body>
22 
23     <div class="scores">
24         <p>分数：<span id="score"></span></p>
25     </div>
26     <div class="outframe" id="box">
27         <div class="frame"></div>
28         <div class="frame"></div>
29         <div class="frame"></div>
30         <div class="frame"></div>
31         <div class="frame"></div>
32         <div class="frame"></div>
33         <div class="frame"></div>
34         <div class="frame"></div>
35         <div class="frame"></div>
36         <div class="frame"></div>
37         <div class="frame"></div>
38         <div class="frame"></div>
39         <div class="frame"></div>
40         <div class="frame"></div>
41         <div class="frame"></div>
42         <div class="frame"></div>
43     </div>
44     <button id="resetgame" style="position: relative;left: 100px;bottom:350px;font-size: 25px;">重玩</button>
45     <script type="text/javascript" src="./main.js"></script>
46 </body>
47 
48 </html>

二、CSS

 1 .scores {
 2     width: 150px;
 3     height: 30px;
 4     font-size: 25px;
 5     position: relative;
 6     top: 55px;
 7     margin: auto;
 8 }
 9 
10 .outframe {
11     width: 410px;
12     height: 410px;
13     position: relative;
14     top: 85px;
15     background-color: burlywood;
16     margin: auto;
17 }
18 
19 .frame {
20     width: 90px;
21     height: 90px;
22     background-color: white;
23     border-radius: 10px;
24     text-align: center;
25     line-height: 90px;
26     font-size: 40px;
27     color: cadetblue;
28     opacity: 0.5;
29     float: left;
30     margin: 10px 0px 0px 10px;
31 
32 }

三、JS

1、初始化容器，另每个容器为空。

 1 function init() {
 2     for (var i = 0; i < arr.length; i++) {
 3         for (var j = 0; j < arr.length; j++) {
 4             arr[i][j] = divs[num];
 5             arr[i][j].innerHTML = " ";
 6             num++;
 7         }
 8     }
 9     rand();
10     rand();
11 }

2、生成随机数

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 : 4;
    }
    else {
        rand();
    }
}

3、上下左右监听事件

 1 window.onkeydown = function (e) {
 2     var key = e.keyCode;
 3     //向左移动
 4     if (key == 65) {
 5         left();
 6         isfull();
 7     }
 8     //向上移动
 9     else if (key == 87) {
10         up();
11         isfull();
12     }
13     //向右移动
14     else if (key == 68) {
15         right();
16         isfull();
17     }

4、实现移动（向左）其他方向类似

 1 function left() {
 2     for (var i = 0; i < 4; i++) {
 3         for (var j = 0; j < 4; j++) {
 4             if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j - 1].innerHTML == " ") {
 5                 arr[i][j - 1].innerHTML = arr[i][j].innerHTML;
 6                 arr[i][j].innerHTML = " ";
 7                 left();
 8 
 9             } else if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i][j - 1].innerHTML) {
10                 arr[i][j - 1].innerHTML = arr[i][j - 1].innerHTML * 2;
11                 addscores(arr[i][j - 1].innerHTML)
12                 arr[i][j].innerHTML = " ";
13             }
14         }
15     }
16 
17 }

5、记录游戏分数

1 function addscores(s) {
2     score += parseInt(s);
3     // console.log(score);
4     var score1 = document.getElementById("score");
5     score1.innerHTML = score;
6 }

6、判断容器是否满

 1 function isfull() {
 2     var bool = 1;
 3     for (var i = 0; i < 4; i++) {
 4         for (var j = 0; j < 4; j++) {
 5             if (arr[i][j].innerHTML == " ") {
 6                 bool = 0;
 7             }
 8         }
 9     }
10     if (bool == 1) {
11         change();
12     }
13     else (bool == 0); {
14         rand();
15     }
16 }

7、判断容器是否能移动

 1 function change() {
 2     var bool = 1;
 3     for (var i = 0; i < arr.length - 1; i++) {
 4         for (var j = 0; j < arr.length - 1; j++) {
 5             if (arr[i][j].innerHTML == arr[i][j + 1].innerHTML || arr[i][j].innerHTML == arr[i + 1][j].innerHTML || arr[i][j + 1].innerHTML == arr[i + 1][j + 1].innerHTML || arr[i + 1][j].innerHTML == arr[i + 1][j + 1].innerHTML) {
 6                 bool = 0;
 7             }
 8         }
 9     }
10     if (bool == 1) {
11         alert("游戏结束");
12         regame();
13     }
14 }

8、实现新游戏

1 function regame() {
2     for (var a = 0; a < 16; a++) {
3         divs[a].innerHTML = " ";
4     }
5     var newscore = document.getElementById("score").innerHTML = 0;
6     rand();
7     rand();
8 
9 }

四、完整的js代码

  1 var score = 0;
  2 var divs = document.querySelectorAll('#box div');
  3 var arr = [[], [], [], []];
  4 var num = 0;
  5 init();
  6 //上下左右监听事件
  7 window.onkeydown = function (e) {
  8     var key = e.keyCode;
  9     //向左移动
 10     if (key == 65) {
 11         left();
 12         isfull();
 13 
 14     }
 15     //向上移动
 16     else if (key == 87) {
 17         up();
 18         isfull();
 19     }
 20     //向右移动
 21     else if (key == 68) {
 22         right();
 23         isfull();
 24     }
 25 
 26     //向下移动
 27     if (key == 83) {
 28         dwon();
 29         isfull();
 30     }
 31 
 32 }
 33 //初始化容器，另每个容器为空
 34 function init() {
 35     for (var i = 0; i < arr.length; i++) {
 36         for (var j = 0; j < arr.length; j++) {
 37             arr[i][j] = divs[num];
 38             arr[i][j].innerHTML = " ";
 39             num++;
 40         }
 41     }
 42     rand();
 43     rand();
 44 }
 45 //生成随机数
 46 function rand() {
 47     var x = Math.floor(Math.random() * 4);
 48     var y = Math.floor(Math.random() * 4);
 49     if (arr[x][y].innerHTML == " ") {
 50         arr[x][y].innerHTML = Math.random() > 0.5 ? 2 : 4;
 51     }
 52     else {
 53         rand();
 54     }
 55 }
 56 //设置重玩按键
 57 function regame() {
 58     for (var a = 0; a < 16; a++) {
 59         divs[a].innerHTML = " ";
 60     }
 61     var newscore = document.getElementById("score").innerHTML = 0;
 62     rand();
 63     rand();
 64 
 65 }
 66 //分数
 67 function addscores(s) {
 68     score += parseInt(s);
 69     // console.log(score);
 70     var score1 = document.getElementById("score");
 71     score1.innerHTML = score;
 72 }
 73 //判断容器是否满
 74 function isfull() {
 75     var bool = 1;
 76     for (var i = 0; i < 4; i++) {
 77         for (var j = 0; j < 4; j++) {
 78             if (arr[i][j].innerHTML == " ") {
 79                 bool = 0;
 80             }
 81         }
 82     }
 83     if (bool == 1) {
 84         change();
 85     }
 86     else (bool == 0); {
 87         rand();
 88     }
 89 }
 90 //判断是否还能移动
 91 function change() {
 92     var bool = 1;
 93     for (var i = 0; i < arr.length - 1; i++) {
 94         for (var j = 0; j < arr.length - 1; j++) {
 95             if (arr[i][j].innerHTML == arr[i][j + 1].innerHTML || arr[i][j].innerHTML == arr[i + 1][j].innerHTML || arr[i][j + 1].innerHTML == arr[i + 1][j + 1].innerHTML || arr[i + 1][j].innerHTML == arr[i + 1][j + 1].innerHTML) {
 96                 bool = 0;
 97             }
 98         }
 99     }
100     if (bool == 1) {
101         alert("游戏结束");
102         regame();
103     }
104 }
105 
106 //向右移动
107 function right() {
108     for (var i = 0; i < 4; i++) {
109         for (var j = 0; j < 4; j++) {
110             if (j < 3 && arr[i][j].innerHTML != " " && arr[i][j + 1].innerHTML == " ") {
111                 arr[i][j + 1].innerHTML = arr[i][j].innerHTML;
112                 arr[i][j].innerHTML = " ";
113                 right();
114             } else if (j < 3 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i][j + 1].innerHTML) {
115                 arr[i][j + 1].innerHTML = arr[i][j + 1].innerHTML * 2;
116                 addscores(arr[i][j + 1].innerHTML)
117                 arr[i][j].innerHTML = " ";
118             }
119         }
120     }
121 
122 }
123 
124 //向左移动
125 function left() {
126     for (var i = 0; i < 4; i++) {
127         for (var j = 0; j < 4; j++) {
128             if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j - 1].innerHTML == " ") {
129                 arr[i][j - 1].innerHTML = arr[i][j].innerHTML;
130                 arr[i][j].innerHTML = " ";
131                 left();
132 
133             } else if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i][j - 1].innerHTML) {
134                 arr[i][j - 1].innerHTML = arr[i][j - 1].innerHTML * 2;
135                 addscores(arr[i][j - 1].innerHTML)
136                 arr[i][j].innerHTML = " ";
137             }
138         }
139     }
140 
141 }
142 
143 //向上移动
144 function up() {
145     for (var i = 0; i < 4; i++) {
146         for (var j = 0; j < 4; j++) {
147             if (i > 0 && arr[i][j].innerHTML != " " && arr[i - 1][j].innerHTML == " ") {
148                 arr[i - 1][j].innerHTML = arr[i][j].innerHTML;
149                 arr[i][j].innerHTML = " ";
150                 up();
151 
152             } else if (i > 0 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i - 1][j].innerHTML) {
153                 arr[i - 1][j].innerHTML = arr[i - 1][j].innerHTML * 2;
154                 addscores(arr[i - 1][j].innerHTML)
155                 arr[i][j].innerHTML = " ";
156             }
157         }
158     }
159 }
160 //向下移动
161 function dwon() {
162     for (var i = 0; i < 4; i++) {
163         for (var j = 0; j < 4; j++) {
164             if (i < 3 && arr[i][j].innerHTML != " " && arr[i + 1][j].innerHTML == " ") {
165                 arr[i + 1][j].innerHTML = arr[i][j].innerHTML;
166                 arr[i][j].innerHTML = " ";
167                 dwon();
168 
169             } else if (i < 3 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i + 1][j].innerHTML) {
170                 arr[i + 1][j].innerHTML = arr[i + 1][j].innerHTML * 2;
171                 addscores(arr[i + 1][j].innerHTML)
172                 arr[i][j].innerHTML = " ";
173             }
174         }
175     }
176 }
177 //重玩事件
178 var resetgame = document.getElementById("resetgame");
179 
180 resetgame.onclick = function () {
181     regame();
182     console.log("resetgame");
183 }