还是2048的记录反查，原先我写过一个，请看地址2048记录反查(ruby)，不过是ruby版的。近期对js很感兴趣，一直在学习，所以就想顺便写一个js版的吧，至少方便发布到网页上。
就去网上找了随便找了网页版的2048，感谢黄岩同学，在他的框架下，参考ruby版的，写出了html的2048记录反查。
其实js里面的坑还是很多的，掉进去n次，太丢人就不说了，总之最后还是写出来了。
源码在下面，我也随便发布到了github，地址是 http://qqrrm.github.io/2048.html
其实有目的性的做点东西也挺好的。近期工作很忙，用上班的空闲时间3周才完成，回头看很简单，但是就像吃包子一样，你总不能说吃3个包子饱了，前两个就没用了吧。
再次感谢做出2048的 Gabriele Cirulli以及被我抄袭了框架的黄岩。
over。
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <!--原框架作者信息<title>2048网页版(html+css+js) By:黄岩</title> -->
5 <title>2048记录反查网页版(html+css+js) By:pyp</title>
6 <style type="text/css">
7
8 #div {
9 width: 318px;
10 height: 400px;
11 background-color: #f0f0f0;
12 margin: auto;
13 }
14
15 .box1 {
16 font-size: 24px;
17 text-align: center;
18 line-height: 72px;
19 width: 72px;
20 height: 72px;
21 float: left;
22 background-color: #CDC2B3;
23 position: relative;
24 }
25
26 #score {
27 left: 10px;
28 top: 70px;
29 position: relative;
30 float: left;
31 }
32
33 </style>
34
35
36
37 <script language="javascript" type="text/javascript">
38
39 var bg;
40 var oBox;//元素
41 var result = new Array();
42 var h = new Array(); //根据2的n次方对应的可能得分数组
43
44
45 function total(n) { //假设全部的数都是2，2的n次方得到的分数，比如n=10，2**10=1024得到的纪录分数
46 if(n == 2)
47 return 4 ;
48 else
49 return 2 * total(n - 1) + Math.pow(2, n);
50 }
51
52
53 function total_plus(n) { //随机2或4，比例9:1，获得的分数。
54 var j = 0;
55 var sum = Math.pow(2, n) / 2;
56 for(var i = 0; i < sum; i++) {
57 if (Math.random() > 0.9)
58 j += 1;
59 }
60 if(total(n) > j * 4)
61 return total(n) - j * 4;
62 else
63 return 0;
64 }
65
66
67 function max_n(score){
68 for(var i = 2 ; i < 17; i++){
69 if( h[i] > score ){
70 return i - 1;
71 }
72 else if ( h[i] === score){
73 return i
74 }
75 }
76 }
77
78
79 function divmod(x, y){ //ruby中的函数，就是进行div，形成结果和余数的数组
80 var a, b;
81 var temp = new Array();
82
83 if(x > y){
84 a = Math.floor(x / y);
85 b = x - y * a;
86 }
87
88 temp.push(a);
89 temp.push(b);
90 return temp;
91 }
92
93
94 function score_to_n(score){ //通过得分递归获得拆分组合结果
95
96 var max = max_n(score);
97 var div = new Array();
98
99 if(h[max] == score){
100 result.push(max);
101 return result;
102 }
103
104 if (h[max] == 0){
105 return result;
106 }
107
108 div = divmod(score, h[max]);
109
110 for(var i = 0; i < div[0]; i++){
111 result.push(max);
112 }
113
114 score_to_n(div[1]);
115 return result;
116 }
117
118 function initGame(){//游戏初始化
119
120 bg = new Array();
121
122 for(var i = 0; i < 4; i++){
123 bg[i] = new Array();
124 for(var j = 0; j < 4; j++){
125 bg[i][j] = 0;
126 }
127 }
128 }
129
130
131 function paintGame(){//游戏绘图
132
133 var i, str="";
134
135 for(var m = 0;m < 4; m++){
136 for(var n = 0;n < 4; n++){
137
138 i = m * 4 + n + 1;
139
140 oBox[i].innerHTML = bg[m][n];
141
142 switch(bg[m][n]){
143 case 0:str="#CDC2B3";break;
144 case 2:str="#eee4da";break;
145 case 4:str="#ede0c8";break;
146 case 8:str="#f2b179";break;
147 case 16:str="#f59563";break;
148 case 32:str="#f67c5f";break;
149 case 64:str="#f65e3b";break;
150 case 128:str="#edcf72";break;
151 case 256:str="#edcc61";break;
152 case 512:str="#edc850";break;
153 case 1024:str="#edc53f";break;
154 case 2048:str="#edc22e";break;
155
156 default:str="#ffc22e";
157 }
158 oBox[i].style.background = str;
159 }
160 }
161 }
162
163 function btn(){ //按钮事件
164
165 var temp = new Array();
166 var score = document.getElementById("score_value").value;
167
168 if ((score > 950000) || (score % 1 !== 0))
169 alert("大哥大姐，别耍我啊");
170 else {
171 initGame();
172
173 for(var i = 2; i < 17; i++){ //生成得分数组
174 h[i] = total_plus(i);
175 }
176
177 temp = score_to_n(score);
178
179 bg[3][3] = (temp[0]===undefined) ? 2 : Math.pow(2, temp[0]); //个人习惯右下角最大，接着按大小蛇形排序，我玩2048就是这样的规律玩的
180 bg[3][2] = (temp[1]===undefined) ? 2 : Math.pow(2, temp[1]);
181 bg[3][1] = (temp[2]===undefined) ? 2 : Math.pow(2, temp[2]);
182 bg[3][0] = (temp[3]===undefined) ? 2 : Math.pow(2, temp[3]);
183 bg[2][0] = (temp[4]===undefined) ? 2 : Math.pow(2, temp[4]);
184 bg[2][1] = (temp[5]===undefined) ? 2 : Math.pow(2, temp[5]);
185 bg[2][2] = (temp[6]===undefined) ? 2 : Math.pow(2, temp[6]);
186 bg[2][3] = (temp[7]===undefined) ? 2 : Math.pow(2, temp[7]);
187 bg[1][3] = (temp[8]===undefined) ? 2 : Math.pow(2, temp[8]);
188 bg[1][2] = (temp[9]===undefined) ? 2 : Math.pow(2, temp[9]);
189 bg[1][1] = (temp[10]===undefined) ? 2 : Math.pow(2, temp[10]);
190 bg[1][0] = (temp[11]===undefined) ? 2 : Math.pow(2, temp[11]);
191 bg[0][0] = (temp[12]===undefined) ? 2 : Math.pow(2, temp[12]);
192 bg[0][1] = (temp[13]===undefined) ? 2 : Math.pow(2, temp[13]);
193 bg[0][2] = (temp[14]===undefined) ? 2 : Math.pow(2, temp[14]);
194 bg[0][3] = (temp[15]===undefined) ? 2 : Math.pow(2, temp[15]);
195
196 paintGame();
197 temp.length = 0;
198 }
199 };
200
201
202 window.onload=function(){
203 var j, k = 0;
204
205 oBox = document.getElementsByTagName(‘div‘);
206
207 for(var i = 1;i < 17;i++){
208 k = (i-1)%4;
209 oBox[i].style.left=((k+1)*6)+‘px‘;
210 j = (i-1)/4;
211 oBox[i].style.top=((j+1)*6-2*k)+‘px‘;
212 }
213
214 };
215
216 </script>
217 </head>
218
219 <body>
220 <div id="div">
221
222 <div class="box1"></div>
223 <div class="box1"></div>
224 <div class="box1"></div>
225 <div class="box1"></div>
226 <div class="box1"></div>
227 <div class="box1"></div>
228 <div class="box1"></div>
229 <div class="box1"></div>
230 <div class="box1"></div>
231 <div class="box1"></div>
232 <div class="box1"></div>
233 <div class="box1"></div>
234 <div class="box1"></div>
235 <div class="box1"></div>
236 <div class="box1"></div>
237 <div class="box1"></div>
238
239 <div id="score">
240 <input type="text" id="score_value" value="58640" />
241 <input type="button" value="记录反查" onclick="btn()" />
242 </div>
243
244 </div>
245 </body>
246 </html>
2048记录反查(javascript)
时间： 2024-08-30 06:01:19