标签：style blog http java color get
还是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
标签：style blog http java color get
原文地址：http://www.cnblogs.com/qqrrm/p/3798248.html
