利用JavaScript实现的2048游戏

来源:互联网 时间:1970-01-01

利用JavaScript实现的2048游戏,有需要的朋友可以参考下。


1. 项目演示地址:http://cighao.github.io/2048-game/
2. 源码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>2048 Game</title> <style> table{ border-spacing:2; text-align:center; width:300px; height:300px; } td{ width:25%; height:25%; text-align:center; } </style> <script> var table = new Array(new Array(),new Array(),new Array(),new Array(),new Array()); // 5*5 array(except 0th) var is_moved = false ; // is there any data be moved function get_score(){ // get the score var max = 0; var i,j; for(i=1;i<=4;i++) for(j=1;j<=4;j++){ if(table[i][j]>max) max = table[i][j]; } return max; } function left(){ // left and combination var i,j,k; var cur = new Array(); for(i=1;i<=4;i++){ k=1; for(j=1;j<=4;j++){ if(table[i][j]!=0){ cur[k++] = table[i][j]; } } while(k<=4) cur[k++] = 0; for(j=1;j<=3;j++){ //combination if(cur[j]==cur[j+1]){ cur[j] = cur[j]+cur[j+1]; k=j+1; while(k<=3){ cur[k] = cur[k+1]; k++; } cur[4]=0; } } if(table[i][1]!=cur[1]||table[i][2]!=cur[2]||table[i][3]!=cur[3]||table[i][4]!=cur[4]) is_moved = true; // some datas are moved for(j=1;j<=4;j++) table[i][j] = cur[j]; } } function right(){ //right and combination var i,j,k; var cur = new Array(); for(i=1;i<=4;i++){ k=4; for(j=4;j>=1;j--){ if(table[i][j]!=0) cur[k--] = table[i][j]; } while(k>=1) cur[k--] = 0; for(j=4;j>=2;j--){ //combination if(cur[j]==cur[j-1]){ cur[j] = cur[j]+cur[j-1]; k=j-1; while(k>=2){ cur[k] = cur[k-1]; k--; } cur[1] = 0; } } if(table[i][1]!=cur[1]||table[i][2]!=cur[2]||table[i][3]!=cur[3]||table[i][4]!=cur[4]) is_moved = true; // some datas are moved for(j=1;j<=4;j++) table[i][j] = cur[j]; } } function up(){ //up and combination var i,j,k; var cur = new Array(); for(j=1;j<=4;j++){ k=1; for(i=1;i<=4;i++){ if(table[i][j]!=0) cur[k++] = table[i][j]; } while(k<=4) cur[k++] = 0; for(i=1;i<=3;i++){ //combination if(cur[i]==cur[i+1]){ cur[i] = cur[i]+cur[i+1]; k=i+1; while(k<=3){ cur[k] = cur[k+1]; k++; } cur[4]=0; } } if(table[1][j]!=cur[1]||table[2][j]!=cur[2]||table[3][j]!=cur[3]||table[4][j]!=cur[4]) is_moved = true; // some datas are moved for(i=1;i<=4;i++) table[i][j] = cur[i]; } } function down(){ //down and combination var i,j,k; var cur = new Array(); for(j=1;j<=4;j++){ k=4; for(i=4;i>=1;i--){ if(table[i][j]!=0) cur[k--] = table[i][j]; } while(k>=1) cur[k--] = 0; for(i=4;i>=2;i--){ //combination if(cur[i]==cur[i-1]){ cur[i] = cur[i]+cur[i-1]; k=i-1; while(k>=2){ cur[k] = cur[k-1]; k--; } cur[1] = 0; } } if(table[1][j]!=cur[1]||table[2][j]!=cur[2]||table[3][j]!=cur[3]||table[4][j]!=cur[4]) is_moved = true; // some datas are moved for(i=1;i<=4;i++) table[i][j] = cur[i]; } } function is_over(){ //judge the game is over or not var i,j; for(i=1;i<=4;i++) //is there any empty position for(j=1;j<=4;j++) if(table[i][j]==0) return false; for(i=1;i<=4;i++) // is there any datas can be combinated for(j=1;j<=3;j++) if(table[i][j]==table[i][j+1]) return false; for(j=1;j<=4;j++) for(i=1;i<=3;i++) if(table[i][j]==table[i+1][j]) return false; return true; } function is_win(){ //judge the game is win or not if(get_score()==2048) return true; return false; } function init(){ //init var i,j; for(i=1;i<=4;i++) for(j=1;j<=4;j++) table[i][j]=0; } function display_table(){ // var i,j,cur; for(i=1;i<=4;i++) for(j=1;j<=4;j++){ cur = String(i)+String(j); if(table[i][j]==0) document.getElementById(cur).innerHTML = " "; else{ document.getElementById(cur).innerHTML = table[i][j]; } } } function display_score(){ // display score var score = get_score(); document.getElementById("score").innerHTML = "score:"+score; } function display(){ //display display_table(); display_score(); } function produce_new_number(){ // produce a new number randomly var num=0; // the number of empty position var i,j; var value; // the value of the new number for(i=1;i<=4;i++) for(j=1;j<=4;j++) if(table[i][j]==0) num++; var p = Math.round(Math.random()*num)+1; // the position of new number if(Math.random()<=0.5) // the new number is 2 or 4 value = 2; else value = 4; num=0; for(i=1;i<=4;i++) // update table with new number for(j=1;j<=4;j++){ if(table[i][j]==0){ num++; if(num==p){ table[i][j] = value; break; } } } } function over(){ // when the game is over alert("the game is over"); location.reload(); //refresh } function run(){ //deal with the event when you press button var key = window.event.keyCode; //var key = window.event.keyCode||e.which; switch(key){ case 37: left(); break; // left is pressed; case 38: up(); break; // up is pressed; case 39: right(); break; // right is pressed; case 40: down();// down is pressed; } if(is_moved){ produce_new_number(); is_moved = false; } display(); if(is_over()) over(); } window.onload = function (){ window.onkeyup = run; init(); produce_new_number(); display(); } </script> </head> <body> <div id="score"> </div> <div> <table border="2" align="center" width="300" height="300"> <tr> <td id="11"> </td> <td id="12"> </td> <td id="13"> </td> <td id="14"> </td> </tr> <tr> <td id="21"> </td> <td id="22"> </td> <td id="23"> </td> <td id="24"> </td> </tr> <tr> <td id="31"> </td> <td id="32"> </td> <td id="33"> </td> <td id="34"> </td> </tr> <tr> <td id="41"> </td> <td id="42"> </td> <td id="43"> </td> <td id="44"> </td> </tr> </table> </div> <div id="rule"> <p class="rule">玩法:</p> <p class="rule">1.用键盘上下左右键控制数字走向</p> <p class="rule">2.当点击了一个方向时,格子中的数字会全部往那个方向移动,直到不能再移动,如果有相同的数字则会合并</p> <p class="rule">3.当格子内的最大数字达到2048时获胜</p> <p class="rule">注意:</p> <p class="rule">1.请使用IE,google浏览器</p> </div> </body></html>


版权声明:本文为博主原创文章,未经博主允许不得转载。



相关阅读:
Top