2048记录反查(javascript)

还是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),布布扣,bubuko.com

2048记录反查(javascript)

上一篇:C语言通用双向循环链表操作函数集


下一篇:求线性方程组的解