Web 版2048

时间：2015-02-10 15:04:01 阅读：431 评论：0 收藏：0 [点我收藏+]

标签：

最近在园子里看到 javascript 面向对象制作坦克大战这么一篇博客，看完后深受启发，刚好那时热衷于2048游戏，所以就将坦克大战游戏改版成了Web版的2048游戏

效果图

技术分享

1.2048Game.hml

 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     <title>2048Game</title>
 5     <script src="JS/Common.js" type="text/javascript"></script>
 6     <script src="JS/Play.js" type="text/javascript"></script>
 7     <style type="text/css">
 8         .div0 {
 9             background-color: #C6BEAD;
10         }
11 
12         .div2, .div4 {
13             background-color: #FFFFFF;
14             font-size: 30px;
15         }
16 
17         .div8, .div16 {
18             background-color: #EFB27B;
19             font-size: 30px;
20             color:white;
21         }
22 
23         .div32, .div64 {
24             background-color: #F77D63;
25             font-size: 30px;
26             color:white;
27         }
28 
29         .div128, .div256 {
30             background-color: #E8F951;
31             font-size: 25px;
32             color:white;
33         }
34 
35         .div512, .div1024 {
36             background-color: #EFC652;
37             font-size: 25px;
38             color:white;
39         }
40         
41         .div2048, .div4096,.div8192,.div16384 {
42             background-color: #FF3D3A;
43             font-size: 25px;
44             color:white;
45         }
46 
47         #divMap
48             {
49                 position:absolute;background:#000; 
50                 border:10px outset #C65D05;
51                 width:540px;height:540px;
52             }
53         /*.mapBorder{position:absolute;left:0;top:0;z-index:9999;width:520px;height:520px;}*/
54         .mapBorder{
55             width: 450px;
56                     height: 450px;
57                     border-radius: 10px 10px;
58                     background-color: #B5AA9C;
59                     margin-left:auto;
60                     margin-right:auto;}
61         .mapBorder span{
62             width:100px;
63             height:100px;
64             overflow:hidden;
65             /*display:block;*/ 
66             float:left;
67             border-radius: 10px 10px;
68             text-align:center;
69             line-height:100px;
70             font-family:Arial;
71             font-weight:900;
72         }
73     </style>
74     <script type="text/javascript">
75         window.onload = function () {
76             // 调用游戏装载对象
77             var loader = new GameLoader();
78             loader.Begin();
79         }
80 
81         function ReStartClick() {
82             document.location.reload();
83         }
84     </script>
85 </head>
86 <body>
87     <div style="width: 450px; height:30px; margin-left: auto; margin-right: auto; ">
88         <input type="button" id="btnReStart" name="1111" value="ReStart" onclick="ReStartClick()" />
89         <span>　　Score:</span><span id="Score" style="color:red; font-size:24px; font-weight:bolder">0</span>
90     </div>
91     <div id="main">
92 
93     </div>
94 </body>
95 </html>

2048Game.htm

2.Common.js

 1 var UtilityClass = {
 2     // 创建dom元素到parentNode中，可指定id，className
 3     CreateE: function (type, id, className, parentNode) {
 4         var J = document.createElement(type);
 5         if (id) { J.id = id };
 6         if (className) { J.className = className };
 7         return parentNode.appendChild(J);
 8     },  // 移除元素
 9     RemoveE: function (obj, parentNode) {
10         parentNode.removeChild(obj);
11     },
12     GetFunctionName: function (context, argumentCallee) {
13         for (var i in context) {
14             if (context[i] == argumentCallee) { return i };
15         }
16         return "";
17     },  // 绑定事件，返回func方法，this为传入的obj
18     BindFunction: function (obj, func) {
19         return function () {
20             func.apply(obj, arguments);
21         };
22     }
23 };

Common.js

3.Play.js

  1 GameLoader = function () {
  2     this._mapContainer = document.getElementById("mian");
  3     this._rowCount = 4;
  4     this._colCount = 4;
  5     this._battleField = [];
  6 }
  7 
  8 GameLoader.prototype = {
  9     Begin: function () {
 10         // 加载地图
 11         this.Load();
 12         // 添加按键事件
 13         var warpper = UtilityClass.BindFunction(this, this.OnKeyDown);
 14         window.onkeydown = warpper;
 15     }
 16     , Load: function () {
 17         var ww = document.getElementById("main");
 18         var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", ww);
 19         for (var i = 0; i < this._rowCount; i++) {
 20             for (var j = 0; j < this._colCount; j++) {
 21                 var kk = UtilityClass.CreateE("span", "", "div0", mapBorder);
 22                 kk.style.marginLeft = ‘10px‘;
 23                 kk.style.marginTop = ‘10px‘;
 24                 this._battleField[this._rowCount * i + j] = kk;
 25             }
 26         }
 27         this.NewNumber();
 28         this.NewNumber();
 29 
 30     }
 31     , OnKeyDown: function (e) {
 32         var isNewNumber = false;
 33         switch ((window.event || e).keyCode) {
 34             case 37:
 35                 isNewNumber = this.MoverLeft(true);
 36                 break;     //左
 37             case 38:
 38                 isNewNumber = this.MoverUp(true);
 39                 break;     //上
 40             case 39:
 41                 isNewNumber = this.MoverRight(true);
 42                 break;     //右
 43             case 40:
 44                 isNewNumber = this.MoverDown(true);
 45                 break;     //下
 46         }
 47         if (isNewNumber) {
 48             this.NewNumber();
 49         } else {
 50             if (this.IsFailure()) {
 51                 alert("继续加油！");
 52             }
 53         }
 54     }
 55     , MoverUp: function (isMover) {
 56         var isNewNumber = false;
 57         for (var j = 0; j < this._colCount; j++) {
 58             var count = 0;
 59             for (var i = 1; i < this._rowCount; i++) {
 60                 if (this._battleField[i * this._rowCount + j].innerText) {
 61                     for (count; count < i; count++) {
 62                         if (this._battleField[count * this._rowCount + j].innerText) {
 63                             if (this._battleField[count * this._rowCount + j].innerText == this._battleField[i * this._rowCount + j].innerText) {
 64                                 isNewNumber = true;
 65                                 if (!isMover)
 66                                     return isNewNumber;
 67                                 var innerText = parseInt(this._battleField[count * this._rowCount + j].innerText) + parseInt(this._battleField[i * this._rowCount + j].innerText);
 68                                 this._battleField[count * this._rowCount + j].innerText = innerText;
 69                                 this._battleField[count * this._rowCount + j].className = ‘div‘ + this._battleField[count * this._rowCount + j].innerText;
 70                                 this._battleField[i * this._rowCount + j].innerText = "";
 71                                 this._battleField[i * this._rowCount + j].className = ‘div0‘;
 72                                 this.AddScore(innerText);
 73                                 count++;
 74                                 break;
 75                             }
 76                         } else {
 77                             isNewNumber = true;
 78                             if (!isMover)
 79                                 return isNewNumber;
 80                             this._battleField[count * this._rowCount + j].innerText = this._battleField[i * this._rowCount + j].innerText;
 81                             this._battleField[count * this._rowCount + j].className = ‘div‘ + this._battleField[count * this._rowCount + j].innerText;
 82                             this._battleField[i * this._rowCount + j].innerText = "";
 83                             this._battleField[i * this._rowCount + j].className = ‘div0‘;
 84                             break;
 85                         }
 86                     }
 87                 }
 88             }
 89         }
 90         return isNewNumber;
 91     }
 92     , MoverDown: function (isMover) {
 93         var isNewNumber = false;
 94         for (var j = 0; j < this._colCount; j++) {
 95             var count = this._rowCount - 1;
 96             for (var i = this._rowCount - 2; i >= 0; i--) {
 97                 if (this._battleField[i * this._rowCount + j].innerText) {
 98                     for (count; count > i; count--) {
 99                         if (this._battleField[count * this._rowCount + j].innerText) {
100                             if (this._battleField[count * this._rowCount + j].innerText == this._battleField[i * this._rowCount + j].innerText) {
101                                 isNewNumber = true;
102                                 if (!isMover)
103                                     return isNewNumber;
104                                 var innerText = parseInt(this._battleField[count * this._rowCount + j].innerText) + parseInt(this._battleField[i * this._rowCount + j].innerText);
105                                 this._battleField[count * this._rowCount + j].innerText = innerText;
106                                 this._battleField[count * this._rowCount + j].className = ‘div‘ + this._battleField[count * this._rowCount + j].innerText;
107                                 this._battleField[i * this._rowCount + j].innerText = "";
108                                 this._battleField[i * this._rowCount + j].className = ‘div0‘;
109                                 this.AddScore(innerText);
110                                 count--;
111                                 break;
112                             }
113                         } else {
114                             isNewNumber = true;
115                             if (!isMover)
116                                 return isNewNumber;
117                             this._battleField[count * this._rowCount + j].innerText = this._battleField[i * this._rowCount + j].innerText;
118                             this._battleField[count * this._rowCount + j].className = ‘div‘ + this._battleField[count * this._rowCount + j].innerText;
119                             this._battleField[i * this._rowCount + j].innerText = "";
120                             this._battleField[i * this._rowCount + j].className = ‘div0‘;
121                             break;
122                         }
123                     }
124                 }
125             }
126         }
127         return isNewNumber;
128     }
129     , MoverLeft: function (isMover) {
130         var isNewNumber = false;
131         for (var j = 0; j < this._rowCount; j++) {
132             var count = 0;
133             for (var i = 1; i < this._colCount; i++) {
134                 if (this._battleField[j * this._rowCount + i].innerText) {
135                     for (count; count < i; count++) {
136                         if (this._battleField[j * this._rowCount + count].innerText) {
137                             if (this._battleField[j * this._rowCount + count].innerText == this._battleField[j * this._rowCount + i].innerText) {
138                                 isNewNumber = true;
139                                 if (!isMover)
140                                     return isNewNumber;
141                                 var innerText = parseInt(this._battleField[j * this._rowCount + count].innerText) + parseInt(this._battleField[j * this._rowCount + i].innerText);
142                                 this._battleField[j * this._rowCount + count].innerText = innerText;
143                                 this._battleField[j * this._rowCount + count].className = ‘div‘ + this._battleField[j * this._rowCount + count].innerText;
144                                 this._battleField[j * this._rowCount + i].innerText = "";
145                                 this._battleField[j * this._rowCount + i].className = ‘div0‘;
146                                 this.AddScore(innerText);
147                                 count++;
148                                 break;
149                             }
150                         } else {
151                             isNewNumber = true;
152                             if (!isMover)
153                                 return isNewNumber;
154                             this._battleField[j * this._rowCount + count].innerText = this._battleField[j * this._rowCount + i].innerText;
155                             this._battleField[j * this._rowCount + count].className = ‘div‘ + this._battleField[j * this._rowCount + count].innerText;
156                             this._battleField[j * this._rowCount + i].innerText = "";
157                             this._battleField[j * this._rowCount + i].className = ‘div0‘;
158                             break;
159                         }
160                     }
161                 }
162             }
163         }
164         return isNewNumber;
165     }
166     , MoverRight: function (isMover) {
167         var isNewNumber = false;
168         for (var j = 0; j < this._rowCount; j++) {
169             var count = this._colCount - 1;
170             for (var i = this._colCount - 2; i >= 0; i--) {
171                 if (this._battleField[j * this._rowCount + i].innerText) {
172                     for (count; count > i; count--) {
173                         if (this._battleField[j * this._rowCount + count].innerText) {
174                             if (this._battleField[j * this._rowCount + count].innerText == this._battleField[j * this._rowCount + i].innerText) {
175                                 isNewNumber = true;
176                                 if (!isMover)
177                                     return isNewNumber;
178                                 var innerText = parseInt(this._battleField[j * this._rowCount + count].innerText) + parseInt(this._battleField[j * this._rowCount + i].innerText);
179                                 this._battleField[j * this._rowCount + count].innerText = innerText;
180                                 this._battleField[j * this._rowCount + count].className = ‘div‘ + this._battleField[j * this._rowCount + count].innerText;
181                                 this._battleField[j * this._rowCount + i].innerText = "";
182                                 this._battleField[j * this._rowCount + i].className = ‘div0‘;
183                                 this.AddScore(innerText);
184                                 count--;
185                                 break;
186                             }
187                         } else {
188                             isNewNumber = true;
189                             if (!isMover)
190                                 return isNewNumber;
191                             this._battleField[j * this._rowCount + count].innerText = this._battleField[j * this._rowCount + i].innerText;
192                             this._battleField[j * this._rowCount + count].className = ‘div‘ + this._battleField[j * this._rowCount + count].innerText;
193                             this._battleField[j * this._rowCount + i].innerText = "";
194                             this._battleField[j * this._rowCount + i].className = ‘div0‘;
195                             break;
196                         }
197                     }
198                 }
199             }
200         }
201         return isNewNumber;
202     }
203     , AddScore: function (score) {
204         var ww = document.getElementById("Score");
205         var oldScore = ww.innerText;
206         ww.innerText = parseInt(oldScore) + parseInt(score);
207     }
208     , NewNumber: function () {
209         var item = [];
210         var j = 0;
211         for (var i = 0; i < this._battleField.length; i++) {
212             if (this._battleField[i].innerText <= 0) {
213                 item[j] = i;
214                 j++;
215             }
216         }
217         var text = Math.random() * 100 > 60 ? 4 : 2;
218         var tt = item[Math.floor(Math.random() * (j - 1))];
219         this._battleField[tt].innerText = text;
220         this._battleField[tt].className = ‘div‘ + text;
221     }
222     , IsFailure: function () {
223         for (var i = 0; i < this._battleField.length; i++) {
224             if (this._battleField[i].innerText <= 0) {
225                 return false;
226             }
227         }
228         if (this.MoverUp(false)) {
229             return false;
230         }
231         else if (this.MoverDown(false)) {
232             return false;
233         }
234         else if (this.MoverLeft(false)) {
235             return false;
236         }
237         else if (this.MoverRight(false)) {
238             return false;
239         }
240         return true;
241     }
242 }

Play.js

代码下载地址链接：http://pan.baidu.com/s/1jGmpqf0 密码：0p2s

Web 版2048

标签：

原文地址：http://www.cnblogs.com/zhangqibao/p/4283850.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行