js+css 写出 简单2048游戏
Posted 薇依
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js+css 写出 简单2048游戏相关的知识，希望对你有一定的参考价值。
新手写的，可能不是很完善，欢迎修改及探讨
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2048游戏</title> 6 <style> 7 .container{ 8 width: 600px; 9 height: 600px; 10 border: 2px solid #000; 11 background-color: white; 12 margin: auto; 13 } 14 15 .header{ 16 font: bold 40px arial; 17 margin-left: 80px; 18 } 19 .header span, #gameOver span{ 20 color: red; 21 } 22 23 #gameBody{ 24 width: 450px; 25 height: 450px; 26 margin-left: 80px; 27 padding: 5px 0 0 5px; 28 border-radius: 10px; 29 background-color: #bbada0; 30 } 31 32 .cell{ 33 width: 100px; 34 height: 100px; 35 margin: 5px; 36 background-color: #ccc0b3; 37 border-radius: 5px; 38 float: left; 39 font: 50px/100px arial; 40 text-align: center; 41 } 42 43 .n2{background-color: #eee3da} 44 .n4{background-color: #ede0c8} 45 .n8{background-color: #f2b179} 46 .n16{background-color: #f59563} 47 .n32{background-color: #f67c5f} 48 .n64{background-color: #f65e3b} 49 .n128{background-color: #edcf72} 50 .n256{background-color: #edcc61} 51 .n512{background-color: #9c0} 52 .n1024{background-color: #33b5e5} 53 .n2048{background-color: #09c} 54 .n4096{background-color: #a6c} 55 .n8192{background-color: #93c} 56 .n2,.n4{color: #776e65} 57 .n1024,.n2048,.n4096,.n8192{font-size: 40px} 58 59 60 #gameOver{ 61 display: none; 62 position: absolute; 63 top: 0; 64 left: 0; 65 right: 0; 66 bottom: 0; 67 background:rgba(55,55,55,0.5); 68 } 69 70 #gameOver p{ 71 width: 300px; 72 height: 200px; 73 position: absolute; 74 top: 50%; 75 left: 50%; 76 margin: -100px 0 0 -150px; 77 text-align: center; 78 border-radius: 10px; 79 border: 1px solid #edcf72; 80 font: bold 40px/65px arial; 81 background: #fff; 82 } 83 84 #gameOver .btn{ 85 padding: 10px; 86 color:#fff; 87 background: #9f8d77; 88 border-radius: 6px; 89 text-decoration: none; 90 } 91 </style> 92 </head> 93 <body> 94 <div class="container"> 95 <p class="header">SCORE:<span id="score">0</span></p> 96 <div id="gameBody"> 97 <div class="cell" id="cell-00"></div> 98 <div class="cell" id="cell-01"></div> 99 <div class="cell" id="cell-02"></div> 100 <div class="cell" id="cell-03"></div> 101 <div class="cell" id="cell-10"></div> 102 <div class="cell" id="cell-11"></div> 103 <div class="cell" id="cell-12"></div> 104 <div class="cell" id="cell-13"></div> 105 <div class="cell" id="cell-20"></div> 106 <div class="cell" id="cell-21"></div> 107 <div class="cell" id="cell-22"></div> 108 <div class="cell" id="cell-23"></div> 109 <div class="cell" id="cell-30"></div> 110 <div class="cell" id="cell-31"></div> 111 <div class="cell" id="cell-32"></div> 112 <div class="cell" id="cell-33"></div> 113 </div> 114 <div id="gameOver"> 115 <p> 116 GAME OVER<br> 117 SCORE:<span id="final">0</span><br> 118 <a href="javascript:game.start();" class="btn">TRY AGAIN!</a> 119 </p> 120 </div> 121 </div> 122 123 <script> 124 //创建对象：属性+方法 125 var game = { 126 //数组，保存数据 127 data:[], 128 //游戏得分：0 129 score:0, 130 //设置游戏状态：1-开始，0-结束 131 state:1, 132 //游戏状态：开始 133 RUNNING:1, 134 //游戏状态：结束 135 GAMEOVER:0, 136 137 //游戏开始start()方法 138 start:function(){ 139 //设置游戏状态为开始 140 this.state=this.RUNNING; 141 //初始化游戏得分为0 142 this.score=0; 143 //创建一个二维数组 144 for(var r = 0; r < 4; r++){ 145 //创建一个一维数组， 146 var datacell = []; 147 //将一维数组值初始化为0 148 for(var c = 0;c < 4; c++){ 149 datacell[c] = 0; 150 } 151 //将一维数组的值循环赋给数组data[],成功创建一个二维数组 152 this.data[r] = datacell; 153 } 154 155 //调用函数随机生成两个数 156 this.randomNum(); 157 this.randomNum(); 158 //刷新页面，显示div的值 159 this.updateView(); 160 }, 161 162 //随机生成两个数4或2 163 randomNum:function(){ 164 while(true){ 165 var r=Math.floor(Math.random()*this.data.length); 166 var c=Math.floor(Math.random()*this.data.length); 167 if(this.data[r][c]==0){ 168 //随机生成2和4的概率相等 169 this.data[r][c]=Math.random()<0.5?2:4; 170 break; 171 } 172 } 173 }, 174 175 updateView:function(){ 176 for(var r=0;r<this.data.length;r++){ 177 for(var c=0;c<this.data.length;c++){ 178 //判断数组中的数据，为0则不做任何操作，保持原来数据和类名不变 179 //动态获取标签的id：要求取id名时与数组下角标相对应 180 if(this.data[r][c]==0){ 181 document.getElementById("cell-"+r+c).innerHTML=""; 182 document.getElementById("cell-"+r+c).className="cell"; 183 }else{ 184 //不为0，则将数组中数据显示在对应的div格子中 185 document.getElementById("cell-"+r+c).innerHTML= this.data[r][c]; 186 //保持原来类名不变，并追加对应div类名（动态） 187 document.getElementById("cell-"+r+c).className="cell n" + this.data[r][c]; 188 189 } 190 } 191 } 192 //将分数显示在界面上方 193 document.getElementById("score").innerHTML=this.score; 194 var gameOver=document.getElementById("gameOver"); 195 if(this.state==this.GAMEOVER){ 196 //如果状态为GAMEOVER（即0，表示游戏结束，显示结束界面，并将最后分数显示在结束界面 197 gameOver.style.display="block"; 198 document.getElementById("final").innerHTML=this.score; 199 }else{ 200 //如果状态为1，表示游戏还未结束，隐藏结束界面 201 gameOver.style.display="none"; 202 } 203 }, 204 205 //向左移动所有行 206 moveLeft:function(){ 207 //判断字符串是否移动 208 //做移动操作前先将数组转换为字符串保存 209 var before=String(this.data); 210 //遍历行 211 for(var r=0;r<this.data.length;r++){ 212 this.moveLeftRow(r); 213 } 214 //做移动操作后先将数组转换为字符串保存 215 var after=String(this.data); 216 //将移动操作前后的数组(字符串)作比较，如果不相等，即发生改变，则随机生成一个数 217 if(before!=after){ 218 this.randomNum(); 219 //随机生成一个数后，判断游戏是否结束，设置游戏状态 220 if(this.isGameOver()){ 221 this.state=this.GAMEOVER; 222 } 223 //游戏未结束刷新页面，再显示随机生成数 224 this.updateView(); 225 } 226 }, 227 228 //判断并向左移动指定行中的每个元素 229 moveLeftRow:function(r){ 230 //0开始，遍历r行中每一个元素 231 for(var c=0;c<this.data.length-1;c++){ 232 //获得当前元素下一个不为0的元素的下标nextc 233 var nextc=this.getNextRow(r,c) 234 //如果nextc=-1，说明右侧没有元素了，退出循环 235 if(nextc==-1) { 236 break; 237 }else if(this.data[r][c]==0){ //如果自己==0 则将下一个位置放入当前位置，下一个位置设置为零 238 this.data[r][c]=this.data[r][nextc]; 239 this.data[r][nextc]=0; 240 //重新检查 241 c--; 242 }else if(this.data[r][c]==this.data[r][nextc]){// 如果当前位置的值==nextc的位置的值，将当前位置*=2;下一个位置设置为0 243 this.data[r][c]*=2; 244 //将当前值累加到score属性上 245 this.score+=this.data[r][c]; 246 this.data[r][nextc]=0; 247 } 248 } 249 }, 250 251 //找当前位置右侧，下一个不为0的数 252 getNextRow:function(r,c){ 253 //从c+1 遍历row行中剩余元素， 254 for(var i=c+1;i<this.data.length;i++){ 255 //如果出现不为0的值，返回它的列数 256 if(this.data[r][i]!=0) { 257 return i; 258 } 259 } 260 //循环退出返回-1 261 return -1; 262 }, 263 264 265 //向右移动所有行 266 moveRight:function(){ 267 var before=String(this.data); 268 for(var r=0;r<this.data.length;r++){ 269 this.moveRightRow(r); 270 } 271 var after=String(this.data); 272 if(before!=after){ 273 this.randomNum(); 274 if(this.isGameOver()){ 275 this.state=this.GAMEOVER; 276 } 277 this.updateView(); 278 } 279 }, 280 281 moveRightRow:function(r){ 282 for(var c=this.data.length-1;c>0;c--){ 283 var prec=this.getPreRow(r,c) 284 if(prec==-1){ 285 break; 286 }else if(this.data[r][c]==0){ 287 this.data[r][c]=this.data[r][prec]; 288 this.data[r][prec]=0; 289 c++; 290 }else if(this.data[r][c]==this.data[r][prec]){ 291 this.data[r][c]*=2; 292 this.score+=this.data[r][c]; 293 this.data[r][prec]=0; 294 } 295 } 296 }, 297 298 getPreRow:function(r,c){ 299 for(var i=c-1;i>=0;i--){ 300 if(this.data[r][i]!=0) return i; 301 } 302 return -1; 303 }, 304 305 moveUp:function(){ 306 var before=String(this.data); 307 for(var c=0;c<this.data.length;c++){ 308 this.moveUpCol(c); 309 } 310 var after=String(this.data); 311 if(before!=after){ 312 this.randomNum(); 313 if(this.isGameOver()){ 314 this.state=this.GAMEOVER; 315 } 316 this.updateView(); 317 } 318 }, 319 320 //向上移动所有列 321 moveUpCol:function(c){ 322 for(var r=0;r<this.data.length-1;r++){ 323 var nextr=this.getNextCol(r,c) 324 if(nextr==-1) {break; 325 }else if(this.data[r][c]==0){ 326 this.data[r][c]=this.data[nextr][c]; 327 this.data[nextr][c]=0; 328 r--; 329 }else if(this.data[r][c]==this.data[nextr][c]){ 330 this.data[r][c]*=2; 331 this.score+=this.data[r][c]; 332 this.data[nextr][c]=0; 333 } 334 } 335 }, 336 337 getNextCol:function(r,c){ 338 for(var i=r+1;i<this.data.length;i++){ 339 if(this.data[i][c]!=0) return i; 340 } 341 return -1; 342 }, 343 344 //向下移动所有列 345 moveDown:function(){ 346 var before=String(this.data); 347 for(var c=0;c<this.data.length;c++){ 348 this.moveDownCol(c); 349 } 350 var after=String(this.data); 351 if(before!=after){ 352 this.randomNum(); 353 if(this.isGameOver()){ 354 this.state=this.GAMEOVER; 355 } 356 this.updateView(); 357 } 358 }, 359 360 moveDownCol:function(c){ 361 for(var r=this.data.length-1;r>0;r--){ 362 var prer=this.getPreCol(r,c) 363 if(prer==-1) { 364 break; 365 } 366 else if(this.data[r][c]==0){ 367 this.data[r][c]=this.data[prer][c]; 368 this.data[prer][c]=0; 369 r++; 370 }else if(this.data[r][c]==this.data[prer][c]){ 371 this.data[r][c]*=2; 372 this.score+=this.data[r][c]; 373 this.data[prer][c]=0; 374 } 375 } 376 }, 377 378 getPreCol:function(r,c){ 379 for(var i=r-1;i>=0;i--){ 380 if(this.data[i][c]!=0) return i; 381 } 382 return -1; 383 }, 384 385 isGameOver:function(){ 386 //游戏结束条件： 387 //1.数组中所有数据均不为0； 388 //2.数组中每一行数据相邻位置值不相等 389 //3.数组中每一列数据相邻位置值不相等 390 for(var c=0;c<this.data.l以上是关于js+css 写出 简单2048游戏的主要内容，如果未能解决你的问题，请参考以下文章