javascript 2048游戏

Posted 前端爱好者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 2048游戏相关的知识,希望对你有一定的参考价值。

技术分享  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 header{display:block; margin:0 auto; width:100%; text-align:center;}
  8 header h1{font-size:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
  9 header #newgamebutton{display:block; margin:10px auto; width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none;}
 10 header #newgamebutton:hover{background-color:#9f8b77;}
 11 header p{font-family:Arial; font-size:25px; margin:10px auto;}
 12 
 13 #grid-container{width:460px; height:460px; padding:20px; margin:20px auto; background-color:#bbada0; border-radius:10px; position:relative;}
 14 .grid-cell{width:100px; height:100px; border-radius:6px; color:white;  background-color:#ccc0b3; position:absolute; font-family:Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center;}
 15 
 16 .gameover{display:block; margin:0 auto; width:500px; text-align:center; vertical-align:middle; position:absolute;}
 17 
 18 .gameover p {
 19     font-family: Arial;
 20     font-size: 50px;
 21     color: white;
 22     margin: 20px auto;
 23 
 24     margin-top: 150px;
 25 }
 26 
 27 .gameover span {
 28     font-family: Arial;
 29     font-size: 50px;
 30     color: white;
 31     margin: 20px auto;
 32 }
 33 
 34 #restartgamebutton {
 35     display: block;
 36     margin: 20px auto;
 37 
 38     width: 180px;
 39     padding: 10px 10px;
 40     background-color: #8f7a66;
 41 
 42     font-family: Arial;
 43     font-size: 30px;
 44     color: white;
 45 
 46     border-radius: 10px;
 47 
 48     text-decoration: none;
 49 }
 50 
 51 #restartgamebutton:hover {
 52     background-color: #9f8b77;
 53 }
 54 
 55 #showGameover{width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none; font-size:36px; position:absolute;}
 56 
 57 </style>
 58 
 59 <script>
 60 
 61 window.onload = function (){
 62     //newgame();
 63     var showScore = document.getElementById(‘score‘);
 64     score = 0;
 65     init();
 66     generateOneNumber();
 67     generateOneNumber();
 68     
 69     window.onkeydown = function (e){
 70         var e = e || window.event;
 71         
 72         switch(e.keyCode){
 73             case 37:
 74                 if(canMoveLeft(board)){
 75                     moveLeft();
 76                     generateOneNumber();
 77                     isgameover();
 78                 }
 79                 break;
 80             case 38:
 81                 if(canMoveUp(board)){
 82                     moveUp();
 83                     generateOneNumber();
 84                     isgameover();
 85                 }
 86                 break;
 87             case 39:
 88                 if(canMoveRight(board)){
 89                     moveRight();
 90                     generateOneNumber();
 91                     isgameover();
 92                 }
 93                 break;
 94             case 40:
 95                 if(canMoveDown(board)){
 96                     moveDown();
 97                     generateOneNumber();
 98                     isgameover();
 99                 }
100                 break;
101             default :
102                 break;
103         }
104     };
105 };
106 
107 function generateOneNumber() {
108     if(!nospace(board)){
109         var randx = parseInt(Math.floor(Math.random() * 4));
110         var randy = parseInt(Math.floor(Math.random() * 4));
111         while (true) {
112             if (board[randx][randy] == 0) {
113                 break;
114             }
115             var randx = parseInt(Math.floor(Math.random() * 4));
116             var randy = parseInt(Math.floor(Math.random() * 4));
117         }
118         var randNumber = Math.random() < 0.5 ? 2 : 4;
119         board[randx][randy] = randNumber;
120         var gridCell = document.getElementById(‘grid-cell-‘+randx+‘-‘+randy);
121         gridCell.innerHTML = randNumber;
122         //
123     }
124     else {
125         gameover();
126     }
127 }
128 
129 
130 function newgame() {
131     window.location.reload();
132     
133 }
134 
135 var board = new Array();
136 function init(){
137     for(var i=0;i<4;i++){
138         board[i] = new Array();
139         for(var j=0;j<4;j++){
140             board[i][j] = 0;
141             
142             var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
143             gridCell.style.top = (20+i*120)+‘px‘;
144             gridCell.style.left = (20+j*120)+‘px‘;
145         }
146     }
147 }
148 
149 function getNumberBackgroundColor(number) {
150     switch (number) {
151         case 2:return "#eee4da";break;
152         case 4:return "#ede0c8";break;
153         case 8:return "#f2b179";break;
154         case 16:return "#f59563";break;
155         case 32:return "#f67c5f";break;
156         case 64:return "#f65e3b";break;
157         case 128:return "#edcf72";break;
158         case 256:return "#edcc61";break;
159         case 512:return "#9c0";break;
160         case 1024:return "#33b5e5";break;
161         case 2048:return "#09c";break;
162         case 4096:return "#a6c";break;
163         case 8192:return "#93c";break;
164     }
165 }
166 
167 function getNumberColor(number) {
168     if (number <= 4) {
169         return "#776e65"
170     }
171     return "white";
172 }
173 
174 function nospace(board) {
175     for (var i = 0; i < 4; i++) {
176         for (var j = 0; j < 4; j++) {
177             if (board[i][j] == 0) {
178                 return false;
179             }
180         }
181     }
182     return true;
183 }
184 
185 function canMoveLeft(board) {
186     for (var i = 0; i < 4; i++) {
187         for (var j = 1; j < 4; j++) {
188             if (board[i][j] != 0) {
189                 if (board[i][j - 1] == 0 || board[i][j - 1] == board[i][j]) {return true; }
190             }
191         }
192     }
193     return false;
194 }
195 
196 function moveLeft() {
197         for (var i = 0; i < 4; i++) {
198             for (var j = 1; j < 4; j++) {
199                 if (board[i][j] != 0) {
200                     for (var k = j-1; k > -1; k--) {
201                         if(board[i][k] == 0 || board[i][k] == board[i][j]){
202                             board[i][k] = board[i][k] + board[i][j];
203                             board[i][j] = 0;
204                             var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
205                             gridCell.innerHTML = ‘‘;
206                             var gridCellk = document.getElementById(‘grid-cell-‘+i+‘-‘+k);
207                             gridCellk.innerHTML = board[i][k];
208                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
209                             gridCell.style.backgroundColor = ‘#ccc0b3‘;
210                             gridCellk.style.color = getNumberColor(board[i][k]);
211                             gridCell.style.color = ‘white‘;
212                             score += board[i][k];
213                             var showScore = document.getElementById(‘score‘);
214                             showScore.innerHTML = score;
215                             j = k;
216                             //
217                         }
218                         else {
219                             break;   //跳出 var k 的for循环
220                         }
221     
222                     }
223                 }
224             }
225         }
226 }
227 
228 function canMoveUp(board) {
229     for (var j = 0; j < 4; j++) {
230         for (var i = 1; i < 4; i++) {
231             if (board[i][j] != 0) {
232                 if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]) {return true; }
233             }
234         }
235     }
236     return false;
237 }
238 
239 function moveUp() {
240         for (var j = 0; j < 4; j++) {
241             for (var i = 1; i < 4; i++) {
242                 if (board[i][j] != 0) {
243                     for (var k = i-1; k > -1; k--) {
244                         if(board[k][j] == 0 || board[k][j] == board[i][j]){
245                             board[k][j] = board[k][j] + board[i][j];
246                             board[i][j] = 0;
247                             var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
248                             gridCell.innerHTML = ‘‘;
249                             var gridCellk = document.getElementById(‘grid-cell-‘+k+‘-‘+j);
250                             gridCellk.innerHTML = board[k][j];
251                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
252                             gridCell.style.backgroundColor = ‘#ccc0b3‘;
253                             gridCellk.style.color = getNumberColor(board[i][k]);
254                             gridCell.style.color = ‘white‘;
255                             score += board[k][j];
256                             var showScore = document.getElementById(‘score‘);
257                             showScore.innerHTML = score;
258                             i = k;
259                             //
260                         }
261                         else {
262                             break;   //跳出 var k 的for循环
263                         }
264     
265                     }
266                 }
267             }
268         }
269 }
270 
271 function canMoveRight(board) {
272     for (var i = 0; i < 4; i++) {
273         for (var j = 2; j > -1; j--) {
274             if (board[i][j] != 0) {
275                 if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]) {return true; }
276             }
277         }
278     }
279     return false;
280 }
281 
282 function moveRight() {
283         for (var i = 0; i < 4; i++) {
284             for (var j = 2; j > -1; j--) {
285                 if (board[i][j] != 0) {
286                     for (var k = j+1; k < 4; k++) {
287                         if(board[i][k] == 0 || board[i][k] == board[i][j]){
288                             board[i][k] = board[i][k] + board[i][j];
289                             board[i][j] = 0;
290                             var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
291                             gridCell.innerHTML = ‘‘;
292                             var gridCellk = document.getElementById(‘grid-cell-‘+i+‘-‘+k);
293                             gridCellk.innerHTML = board[i][k];
294                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
295                             gridCell.style.backgroundColor = ‘#ccc0b3‘;
296                             gridCellk.style.color = getNumberColor(board[i][k]);
297                             gridCell.style.color = ‘white‘;
298                             score += board[i][k];
299                             var showScore = document.getElementById(‘score‘);
300                             showScore.innerHTML = score;
301                             j = k;
302                             //
303                         }
304                         else {
305                             break;   //跳出 var k 的for循环
306                         }
307     
308                     }
309                 }
310             }
311         }
312 }
313 
314 function canMoveDown(board) {
315     for (var j = 0; j < 4; j++) {
316         for (var i = 2; i > -1; i--) {
317             if (board[i][j] != 0) {
318                 if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {return true; }
319             }
320         }
321     }
322     return false;
323 }
324 
325 function moveDown() {
326         for (var j = 0; j < 4; j++) {
327             for (var i = 2; i > -1; i--) {
328                 if (board[i][j] != 0) {
329                     for (var k = i+1; k < 4; k++) {
330                         if(board[k][j] == 0 || board[k][j] == board[i][j]){
331                             board[k][j] = board[k][j] + board[i][j];
332                             board[i][j] = 0;
333                             var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
334                             gridCell.innerHTML = ‘‘;
335                             var gridCellk = document.getElementById(‘grid-cell-‘+k+‘-‘+j);
336                             gridCellk.innerHTML = board[k][j];
337                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
338                             gridCell.style.backgroundColor = ‘#ccc0b3‘;
339                             gridCellk.style.color = getNumberColor(board[i][k]);
340                             gridCell.style.color = ‘white‘;
341                             score += board[k][j];
342                             var showScore = document.getElementById(‘score‘);
343                             showScore.innerHTML = score;
344                             i = k;
345                             //
346                         }
347                         else {
348                             break;   //跳出 var k 的for循环
349                         }
350     
351                     }
352                 }
353             }
354         }
355 }
356 
357 function isgameover() {
358     if (nospace(board) && nomove(board)) {
359         gameover();
360     }
361 }
362 
363 function nomove(board) {
364     if (canMoveDown(board) || 
365     canMoveLeft(board) || 
366     canMoveRight(board) || 
367     canMoveUp(board)) {
368         return false;
369     }
370     return true;
371 }
372 
373 function bounce(obj,top){
374     clearInterval(obj.timer);
375     var nSpeed = 0;
376     var acceleration = 9;
377     var Flag = 0;
378     
379     obj.timer = setInterval(function (){
380         nSpeed += acceleration;
381         nSpeed *= 0.93;
382         
383         if(obj.offsetTop + nSpeed >= top){
384             obj.style.top = top + ‘px‘;
385             nSpeed *= -1;
386         }else{
387             if(Math.abs(nSpeed) < 4 && Math.abs(top-obj.offsetTop)<1){
388                 clearInterval(obj.timer);
389             }
390             else{
391                 obj.style.top = obj.offsetTop + nSpeed + ‘px‘;
392             }
393         }
394         
395     },30);
396 }
397 
398 function gameover() {
399     //alert("gameover!");
400     var gameover = document.createElement(‘div‘);
401     gameover.id = ‘showGameover‘;
402     gameover.innerHTML = ‘GAME OVER‘;
403     var gridContainer = document.getElementById(‘grid-container‘);
404     gridContainer.appendChild(gameover);
405     var showGameover = document.getElementById(‘showGameover‘);
406     showGameover.style.left = (gridContainer.offsetWidth - showGameover.offsetWidth ) / 2 + ‘px‘;
407     
408     bounce(showGameover,200);
409 }
410 
411 
412 </script>
413 
414 </head>
415 
416 <body>
417     <header>
418         <!--<h1> 2048 </h1>-->
419         <a href="javascript:newgame();" id="newgamebutton"> New Game </a>
420         
421         <p> score: <span id="score">0</span></p>
422         
423         <div id="grid-container">
424             <div class="grid-cell" id="grid-cell-0-0"></div>
425             <div class="grid-cell" id="grid-cell-0-1"></div>
426             <div class="grid-cell" id="grid-cell-0-2"></div>
427             <div class="grid-cell" id="grid-cell-0-3"></div>
428             <div class="grid-cell" id="grid-cell-1-0"></div>
429             <div class="grid-cell" id="grid-cell-1-1"></div>
430             <div class="grid-cell" id="grid-cell-1-2"></div>
431             <div class="grid-cell" id="grid-cell-1-3"></div>
432             <div class="grid-cell" id="grid-cell-2-0"></div>
433             <div class="grid-cell" id="grid-cell-2-1"></div>
434             <div class="grid-cell" id="grid-cell-2-2"></div>
435             <div class="grid-cell" id="grid-cell-2-3"></div>
436             <div class="grid-cell" id="grid-cell-3-0"></div>
437             <div class="grid-cell" id="grid-cell-3-1"></div>
438             <div class="grid-cell" id="grid-cell-3-2"></div>
439             <div class="grid-cell" id="grid-cell-3-3"></div>
440         </div>
441     </header>
442 </body>
443 </html>

 

以上是关于javascript 2048游戏的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript小游戏--2048(PC端)

JavaScript实现2048小游戏,我终于赢了一把

JavaScript小游戏--2048(移动端)

Python 2048游戏实现

90行代码写一个游戏?教你用90行HasKell代码实现2048游戏

制作2048游戏