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>
时间： 2024-11-03 03:43:50

javascript 2048游戏的相关文章

用javascript制作2048游戏的思路（原创若 转载请附上本链接）

一.项目已上传至github,地址:https://github.com/forjuan/2048game 二.学习了javascript基础后,想要捣鼓点东西做,做了一个自己以前很爱玩的2048游戏.经过初期的思路设计手工画了设计思路图.手工图有空在用图画出来. 实现2048的功能:1.核心:上下左右移动. 2.游戏开始,游戏结束. 3.外观实现. 4.积分(暂时没实现) 把问题分解:1.首要难点移动,将移动进行分解,分为上下左右移动: 2.用什么记录位置,怎样记录每个方块的值,边界,相同值相

用javascript实现一个2048游戏

早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个如下图,按方向键开始玩吧.如果觉得操作不方便,请直接打开链接玩吧:http://gujianbo.1kapp.com/2048/2048.html 附上源代码链接:https://github.com/gujianbo/js2048 个人博客地址:http://gujianbo.1kapp.com/ 新浪微博:http://weibo.com/gujianbobo 欢迎读者交流讨论并提出宝贵意见. 用javascript实现一个2048游

280行代码：Javascript 写的2048游戏

2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.不妨就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算法,移动后有数字的对齐,无数字(我用的0,但不显示)补齐. 移动前 移动后(注意程序合并了第一行2个2,并产生了新的2) 移动算法分2步: 第一步骤:移动 第二步骤:合并 移动代码参考: [html] view plaincopy function left(t,i) { var j; var len 

简单的JavaScript实现2048游戏

实现一个网页版的2048游戏,过程参考了慕课网2048游戏的教程, 具体代码如下: html结构: <body> <div class="header"> <h2>2048</h2> <a href="javascript:newGame()" id="newGameBtn">New Game</a> <p>Score:<span id="scor

最少javascript代码完成一个2048游戏

原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/htm

网页版《2048游戏》教程 - 构建页面

1.     游戏标题 <2048>游戏的标题包含游戏名称.开始新游戏的按钮和游戏分数等三项内容. 创建游戏页面index.html: <!DOCTYPE html> <html > <head > < meta charset= "UTF-8"> < title>2048</title > < link rel= "stylesheet" type ="text/c

网页版《2048游戏》教程 - 游戏优化

1.     GameOver部分 下面我们来分析游戏是如何结束的.一种情况是棋盘格中没有空的格子了,一种情况是棋盘格中没有可以移动的格子了. 首先,完成isgameover()方法的逻辑. function isgameover() { if (nospace(board) && nomove(board)) { gameover(); } } 其次,完成棋盘格中没有空的格子. function nospace(board) { for (var i = 0; i < 4; i++

重写2048游戏

在慕客网上看到一个叫2048的游戏,作者讲的不错.听听很激动,看着很多网友留言,遇到各种问题,于是打算自己写一遍.试玩了一遍别人写好的2048.感觉逻辑还算容易理解.一种写下来,还是遇到了不少问题,但是冷静的想想,很快就找出问题,并解决了.最后,终于完成了自己的2048私人定制版. 下面是最终成果: 写完之后,其实代码一点都不难,会用jquery就可以了. 下面我自己的代码贴一下: index.html <!DOCTYPE html> <html> <head> <

对弈类游戏的人工智能(5)--2048游戏AI的解读

前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对应上. 于是有了想法, 想把它作为一个实例来进行解读, 从而对之前偏理论的文章做个总结. 承接上四篇博文: (1). 评估函数+博弈树算法 (2). 学习算法 (3). 博弈树优化 (4). 游戏AI的落地 可能有些人会疑惑? 2048并非对弈类类型? 传统的博弈树模型是否能应用于此? 客官莫急, 让我们来一