最近在园子里看到 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
时间： 2024-11-04 23:26:35