HTML+CSS+JavaScript实现2048小游戏

漫威终极逆转 發表於 2019-8-27 19:00:00

相信很多人都玩过2048小游戏，规则易懂、操作简单，我曾经也“痴迷”于它，不到2048不罢休，最高成绩合成了4096，现在正好拿它来练练手。
我对于2048的实现，除了使用了现有2048小游戏的配色，其它所有的代码都是自己写的，尤其是上下左右移动时的逻辑部分，耗费了主要精力。
在草稿纸上设计、思考逻辑：
<img src="https://img2018.cnblogs.com/blog/1641227/201908/1641227-20190827183828906-1906953189.jpg">
HTML：4x4的棋盘，上下左右方向键，开始新游戏，分数
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_c3625ff5-e6da-4d2b-bdf2-f970c8639db9" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_c3625ff5-e6da-4d2b-bdf2-f970c8639db9" class="cnblogs_code_hide">
<pre> 1 <div class="wrapper">
 2 <div class="square" id="s11"></div>
 3 <div class="square" id="s12"></div>
 4 <div class="square" id="s13"></div>
 5 <div class="square" id="s14"></div>
 6 <div class="square" id="s21"></div>
 7 <div class="square" id="s22"></div>
 8 <div class="square" id="s23"></div>
 9 <div class="square" id="s24"></div>
10 <div class="square" id="s31"></div>
11 <div class="square" id="s32"></div>
12 <div class="square" id="s33"></div>
13 <div class="square" id="s34"></div>
14 <div class="square" id="s41"></div>
15 <div class="square" id="s42"></div>
16 <div class="square" id="s43"></div>
17 <div class="square" id="s44"></div>
18 <button class="direction" id="up" onclick="up()">↑</button>
19 <button class="direction" id="down" onclick="down()">↓</button>
20 <button class="direction" id="left" onclick="left()">←</button>
21 <button class="direction" id="right" onclick="right()">→</button>
22 <button id="new_game" onclick="new_game()">新游戏</button>
23 <div id="score"></div>
24 <div id="game_over">游戏结束！</div>
25 </div></pre>
</div>
View Code</div>
CSS：棋盘块配色使用了现有2048配色
<div class="cnblogs_code"><img id="code_img_closed_2b1f9703-f359-4d1b-b6ba-3244f0ad55c9" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_2b1f9703-f359-4d1b-b6ba-3244f0ad55c9" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_2b1f9703-f359-4d1b-b6ba-3244f0ad55c9" class="cnblogs_code_hide">
<pre> 1 <style type="text/css">
 2 .wrapper {
 3 width: 420px;
 4 height: 420px;
 5 background-color: #C3C0B7;
 6 margin: 0 auto;
 7 border-radius: 15px;
 8 position: relative;
 9 }
10 .square {
11 float: left;
12 width: 90px;
13 height: 90px;
14 margin: 7.5px;
15 background-color:#FBEFE3;
16 border-radius: 7.5px;
17 color: #59503F;
18 text-align: center;
19 line-height: 90px;
20 font-size: 35px;
21 }
22 .direction {
23 width: 120px;
24 height: 75px;
25 border: none;
26 border-radius: 7.5px;
27 color: white;
28 background-color: #C6BFB9;
29 font-size: 45px;
30 font-weight: bolder;
31 line-height: 75px;
32 }
33 #new_game {
34 width: 120px;
35 height: 75px;
36 border: none;
37 border-radius: 15px;
38 background-color: #C6BFB9;
39 font-size: 30px;
40 color: #FFFBF7;
41 position: absolute;
42 top:430px;
43 left: 0px;
44 }
45 #up {
46 position: absolute;
47 top:430px;
48 left:150px;
49 }
50 #left {
51 position: absolute;
52 top:512px;
53 left:0px;
54 }
55 #right {
56 position: absolute;
57 top:512px;
58 left:300px;
59 }
60 #down {
61 position: absolute;
62 top:512px;
63 left:150px;
64 }
65 #game_over {
66 width: 300px;
67 height: 100px;
68 color: #FFFFFF;
69 border-radius:20px ;
70 background-color: burlywood;
71 font-size: 40px;
72 position: absolute;
73 top: 160px;
74 left: 60px;
75 text-align: center;
76 line-height: 100px;
77 visibility: hidden;
78 }
79 #score {
80 width: 120px;
81 height: 75px;
82 border-radius: 15px;
83 background-color: #C6BFB9;
84 font-size: 20px;
85 color: #FFFBF7;
86 position: absolute;
87 top:430px;
88 left: 300px;
89 text-align: center;
90 line-height: 75px;
91 }
92 </style></pre>
</div>
View Code</div>
JavaScript：包括标记变量，新游戏加载函数，新数字生成函数，键盘事件绑定控制方向，以及最重要的各个方向的逻辑函数，具体的算法就不描述了，代码通俗易懂。
<div class="cnblogs_code">
<pre>1 <script type="text/javascript">
2 var can_up = true; //可向上移动
3 var can_down = true; //可向下移动 
4 var can_left = true; //可向左移动 
5 var can_right = true; //可向右移动 
6 //游戏结束
7 function game_over() {
8 if(!can_up&&!can_down&&!can_left&&!can_right) {
9 document.getElementById("game_over").style.visibility = "visible";
 10 }
 11 }
 12 //开始新游戏
 13 function new_game() {
 14 document.getElementById("game_over").style.visibility = "hidden";
 15 for(var i = 1;i < 5;i++) {
 16 for(var j = 1;j < 5;j++) {
 17 document.getElementById("s"+i+j).innerHTML = "";
 18 }
 19 }
 20 born();
 21 can_up = false;
 22 can_down = false;
 23 can_left = false;
 24 can_right = false;
 25 }
 26 //键盘监听
 27 document.onkeydown = function(event) {
 28 switch(event.keyCode) {
 29 case 37: left();break;
 30 case 38: up();break;
 31 case 39: right();break;
 32 case 40: down();break;
 33 default: ;
 34 }
 35 }
 36 //生成新数字2或者4
 37 function born() {
 38 var rand_num = Math.random();
 39 var new_num = (rand_num>0.5)?2:4;
 40 while(true) {
 41 var row = Math.ceil(Math.random()*4);
 42 var col = Math.ceil(Math.random()*4);
 43 var square = document.getElementById("s"+row+col);
 44 if(square.innerHTML =="") {
 45 square.innerHTML = new_num;
 46 break;
 47 }
 48 }
 49 }
 50 //向上移动
 51 function up() {
 52 var new_square_num = [];
 53 var target_square ;
 54 var target_exist= false;
 55 for(var i =1;i < 5;i++) {
 56 for(var j = 2;j < 5;j++) {
 57 var self_square = document.getElementById("s"+j+i);
 58 if(self_square.innerHTML!="") {
 59 for(var k =1;k < j;k++) {
 60 var pre_square = document.getElementById("s"+(j-k)+i);
 61 if(pre_square.innerHTML=="") {
 62 target_square = pre_square ;
 63 target_exist = true;
 64 }
 65 else if(self_square.innerHTML == pre_square.innerHTML && new_square_num[+((j-k).toString()+i)]==undefined ){
 66 pre_square.innerHTML = 2*self_square.innerHTML;
 67 document.getElementById("score").innerHTML = +(document.getElementById("score").innerHTML) + (+pre_square.innerHTML);
 68 self_square.innerHTML = "";
 69 new_square_num[+((j-k).toString()+i)] = 1;
 70 can_up = true;
 71 }
 72 else {
 73 break;
 74 }
 75 }
 76 if(target_exist) {
 77 target_square.innerHTML = self_square.innerHTML;
 78 self_square.innerHTML = "";
 79 can_up = true;
 80 target_exist = false;
 81 }
 82 }
 83 }
 84 new_square_num = [];
 85 }
 86 if(can_up) {
 87 born();
 88 can_up = false;
 89 }
 90
 91 }
 92 //向下移动
 93 function down() {
 94 var new_square_num = [];
 95 var target_square ;
 96 var target_exist= false;
 97 for(var i =1;i < 5;i++) {
 98 for(var j = 3;j > 0;j--) {
 99 var self_square = document.getElementById("s"+j+i);
100 if(self_square.innerHTML!="") {
101 for(var k =j+1;k < 5;k++) {
102 var pre_square = document.getElementById("s"+k+i);
103 if(pre_square.innerHTML=="") {
104 target_square = pre_square ;
105 target_exist = true;
106 }
107 else if(self_square.innerHTML == pre_square.innerHTML && new_square_num[+((k).toString()+i)]==undefined ){
108 pre_square.innerHTML = 2*self_square.innerHTML;
109 document.getElementById("score").innerHTML = +(document.getElementById("score").innerHTML) + (+pre_square.innerHTML);
110 self_square.innerHTML = "";
111 new_square_num[+((k).toString()+i)] = 1;
112 can_down = true;
113 target_exist = false;
114 }
115 else {
116 break;
117 }
118 }
119 if(target_exist) {
120 target_square.innerHTML = self_square.innerHTML;
121 self_square.innerHTML = "";
122 can_down = true;
123 target_exist = false;
124 }
125 }
126 }
127 new_square_num = [];
128 }
129 if(can_down) {
130 born();
131 can_down = false;
132 }
133 }
134 //向左移动
135 function left() {
136 var new_square_num = [];
137 var target_square ;
138 var target_exist= false;
139 for(var j =1;j < 5;j++) {
140 for(var i = 2;i < 5;i++) {
141 var self_square = document.getElementById("s"+j+i);
142 if(self_square.innerHTML!="") {
143 for(var k =1;k < i;k++) {
144 var pre_square = document.getElementById("s"+j+(i-k));
145 if(pre_square.innerHTML=="") {
146 target_square = pre_square ;
147 target_exist = true;
148 }
149 else if(self_square.innerHTML == pre_square.innerHTML && new_square_num[+(j+(i-k).toString())]==undefined ){
150 pre_square.innerHTML = 2*self_square.innerHTML;
151 document.getElementById("score").innerHTML = +(document.getElementById("score").innerHTML) + (+pre_square.innerHTML);
152 self_square.innerHTML = "";
153 new_square_num[+(j+(i-k).toString())] = 1;
154 can_left = true;
155 target_exist = false;
156 }
157 else {
158 break;
159 }
160 }
161 if(target_exist) {
162 target_square.innerHTML = self_square.innerHTML;
163 self_square.innerHTML = "";
164 can_left = true;
165 target_exist = false;
166 }
167 }
168 }
169 new_square_num = [];
170 }
171 if(can_left) {
172 born();
173 can_left = false;
174 }
175 }
176 //向右移动
177 function right() {
178 var new_square_num = [];
179 var target_square ;
180 var target_exist= false;
181 for(var j =1;j < 5;j++) {
182 for(var i = 3;i > 0;i--) {
183 var self_square = document.getElementById("s"+j+i);
184 if(self_square.innerHTML!="") {
185 for(var k =i+1;k < 5;k++) {
186 var pre_square = document.getElementById("s"+j+k);
187 if(pre_square.innerHTML=="") {
188 target_square = pre_square ;
189 target_exist = true;
190 }
191 else if(self_square.innerHTML == pre_square.innerHTML && new_square_num[+(j.toString()+k)]==undefined ){
192 pre_square.innerHTML = 2*self_square.innerHTML;
193 document.getElementById("score").innerHTML = +(document.getElementById("score").innerHTML) + (+pre_square.innerHTML);
194 self_square.innerHTML = "";
195 new_square_num[+(j.toString()+k)] = 1;
196 can_right = true;
197 target_exist = false;
198 }
199 else {
200 break;
201 }
202 }
203 if(target_exist) {
204 target_square.innerHTML = self_square.innerHTML;
205 self_square.innerHTML = "";
206 can_right = true;
207 target_exist = false;
208 }
209 }
210 }
211 new_square_num = [];
212 }
213 if(can_right) {
214 born();
215 can_right = false;
216 }
217 }
218 //涂色
219 setInterval(function paint() {
220 for(var i = 1;i < 5;i++) {
221 for(var j = 1;j < 5;j++) {
222 var square = document.getElementById("s"+i+j);
223 switch(square.innerHTML) {
224 case "2" :square.style.backgroundColor = "#EEE4DA";
225 square.style.color = "#766D64";
226 break;
227 case "4" :square.style.backgroundColor = "#ECE0C8";
228 square.style.color = "#786D67";
229 break;
230 case "8" :square.style.backgroundColor = "#F2B179";
231 square.style.color = "#F6F7F2";
232 break;
233 case "16" :square.style.backgroundColor = "#F59565";
234 square.style.color = "#FAF6F5";
235 break;
236 case "32" :square.style.backgroundColor = "#F77B5F";
237 square.style.color = "#FBF3F0";
238 break;
239 case "64" :square.style.backgroundColor = "#F35F3B";
240 square.style.color = "#FAF4F4";
241 break;
242 case "128" :square.style.backgroundColor = "#EDCE71";
243 square.style.color = "#F8FAF7";
244 break;
245 case "256" :square.style.backgroundColor = "#EDCC61";
246 square.style.color = "#FAF6F7";
247 break;
248 case "512" :square.style.backgroundColor = "#ECC850";
249 square.style.color = "#FAF4F6";
250 break;
251 case "1024" :square.style.backgroundColor = "#EDC53F";
252 square.style.color = "#F9F4FA";
253 break;
254 case "2048" :square.style.backgroundColor = "#E9B501";
255 square.style.color = "#FFFCB0";
256 break;
257 case "4096" :square.style.backgroundColor = "#FCEDD8";
258 square.style.color = "#524B39";
259 break;
260 default:square.style.backgroundColor = "#FBEFE3";
261 }
262 }
263 }
264 },10);
265
266 </script></pre>
</div>
效果图：
<img alt="" width="693" height="393" data-src="https://img2018.cnblogs.com/blog/1641227/201908/1641227-20190827185631717-1295912790.png">
 
虽然小游戏简单，但是实现了也是自己的成果，也是一种进步！
  
来源：https://www.cnblogs.com/duoge/p/11420196.html

頁: [1]

琼殿技术论坛's Archiver

HTML+CSS+JavaScript实现2048小游戏