首页 > 代码库 > 2048记录反查(javascript)
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。