前段时间有个很火的游戏叫2048，刚好趁着暑假想练习前端，顺带就把它作为练习项目做成Web Applications
该游戏基于HTML5+JS+CSS
文件结构：
index.html 游戏界面展示
index.css 主界面的CSS样式，16方格采用绝对布局的方式
main.js 游戏的主要逻辑
show.js 游戏的一些动画效果
support.js 底层支撑
jquery.js
页面做了响应式布局，游戏效果如下：
代码如下：
index.hml
New Game 2048 2048
New GameScore:0
index.css
@charset "utf-8";/* CSS Document */header{ display:block; margin:0 auto; width:100%; text-align:center;}header h1{ font-family:Arial, Helvetica, sans-serif; font-size:40px; font-weight:bold;}header #newGameButton{ display:block; margin:20px auto; padding:10px 10px; width:100px; background-color:#930; font-family:Arial, Helvetica, sans-serif; color:#FFF; border-radius:10px; text-decoration:none;}header #newGameButton:hover{ background-color:#963;}header p{ font-family:Arial, Helvetica, sans-serif; font-size:25px; margin:10px auto;}#grid-container{ width:460px; height:460px; padding:20px; margin:10px auto; background-color:#930; border-radius:10px; position:relative;}.grid-cell{ width:100px; height:100px; background-color:#96F; border-radius:6px; position:absolute;}.number-cell{ font-family:Arial, Helvetica, sans-serif; border-radius:6px; font-size:60px; line-height:100px; font-weight:bold; text-align:center; position:absolute;} main.js
// JavaScript Documentvar board=new Array();var score=0;sx=0;sy=0;ex=0;ey=0;$(document).ready(function(e) { newGame();});function newGame(){ //初始化游戏 forMobile(); init(); //随机生成2个数 getOneNumber(); getOneNumber(); } function init(){ for(var i=0;i<4;i++){ //遍历div for(var j=0;j<4;j++){ var gridCell=$("#grid-cell-"+i+"-"+j); gridCell.css("top",getTop(i,j)); gridCell.css("left",getLeft(i,j)); } } //board一维转二维 for(var i=0;i<4;i++){ board[i]=new Array(); for(var j=0;j<4;j++){ board[i][j]=0; } } updateBoardView(); score=0; } function forMobile(){ if( documentWidth > 500 ){ gridContainerWidth = 500; cellSpace = 20; cellSideLength = 100; } $('#grid-container').css('width',gridContainerWidth - 2*cellSpace); $('#grid-container').css('height',gridContainerWidth - 2*cellSpace); $('#grid-container').css('padding', cellSpace); $('#grid-container').css('border-radius',0.02*gridContainerWidth); $('.grid-cell').css('width',cellSideLength); $('.grid-cell').css('height',cellSideLength); $('.grid-cell').css('border-radius',0.02*cellSideLength);} function getOneNumber(){ //noSpace没空间返回true if(noSpace(board)){ return false; }else{ // 随机一个位置 var x=parseInt(Math.floor(Math.random()*4)); var y=parseInt(Math.floor(Math.random()*4)); var flag=0; while(flag<40){ if(board[x][y]==0)break; var x=parseInt(Math.floor(Math.random()*4)); var y=parseInt(Math.floor(Math.random()*4)); flag++; } if(flag==40){ for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ if(board[i][j]==0){ x=i; y=j; } } } } //随机生成一个数(2or4) var number=Math.random()<0.5?2:4; //在随机的位置显示生成的随机数 board[x][y]=number; showNumber(x,y,number); return true; } } function updateBoardView(){ //显示数字 $(".number-cell").remove(); for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ $("#grid-container").append(' '); var numberCell=$("#number-cell-"+i+"-"+j); //若数字为0则不显示 if(board[i][j]==0){ numberCell.css("width","0px"); numberCell.css("height","0px"); numberCell.css('top',getTop(i,j) + cellSideLength/2 ); numberCell.css('left',getLeft(i,j) + cellSideLength/2 ); }else{ numberCell.css('width',cellSideLength); numberCell.css('height',cellSideLength); numberCell.css("top",getTop(i,j)); numberCell.css("left",getLeft(i,j)); //填充div的背景颜色和前景颜色 numberCell.css("background-color",getNumberBackgroundColor(board[i][j])); numberCell.css("color",getNumberColor(board[i][j])); numberCell.text(board[i][j]); } } } $('.number-cell').css('line-height',cellSideLength+'px'); $('.number-cell').css('font-size',0.6*cellSideLength+'px'); } function isOver(){ if(noSpace(board)&&noMove(board)){ //alert(111); gameOver(); } } function gameOver(){ alert("游戏结束！"); } //监听键盘事件$(document).keydown(function(event){ switch(event.keyCode){ case 37://left if(moveLeft()){ event.preventDefault(); setTimeout("getOneNumber()",200); isOver(); } break; case 38://up if(moveUp()){ event.preventDefault(); setTimeout("getOneNumber()",200); isOver(); } break; case 39://right if(moveRight()){ event.preventDefault(); setTimeout("getOneNumber()",200); isOver(); } break; case 40://down if(moveDown()){ //alert(1); event.preventDefault(); setTimeout("getOneNumber()",200); isOver(); } break; default: break; } }); document.addEventListener('touchstart',function(event){ //回调函数，返回信息存在event sx=event.touches[0].pageX; sy=event.touches[0].pageY; }); document.addEventListener('touchend',function(event){ ex=event.changedTouches[0].pageX; ey=event.changedTouches[0].pageY; dx=ex-sx; dy=ey-sy; if(Math.abs(dx) =Math.abs(dy)){ //x if(dx>0){ //右 if(moveRight()){ setTimeout("getOneNumber()",200); isOver(); } }else{ //左 if(moveLeft()){ setTimeout("getOneNumber()",200); isOver(); } } }else{ //y if(dy>0){ //下 if(moveDown()){ setTimeout("getOneNumber()",200); isOver(); } }else{ //上 if(moveUp()){ setTimeout("getOneNumber()",200); isOver(); } } } }); document.addEventListener('touchmove',function(event){ event.preventDefault();//安卓4.0以上会有触碰bug }); function moveLeft(){ if(!canMoveLeft(board))return false; for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(board[i][j]!=0){ for(var k=0;k =0;j--){ //除最右列以外，遍历所有 for(var k=3;k>j;k--){ if(board[i][k]==0&&noBlockH(i,k,j,board)){ showMoveAnimation( i , j , i , k ); board[i][k]=board[i][j]; board[i][j]=0; continue; }else if(board[i][k]==board[i][j]&&noBlockH(i,k,j,board)){ showMoveAnimation( i , j , i , k ); board[i][k]+=board[i][j]; board[i][j]=0; score+=board[i][k]; updateScore(score); continue; } } } } setTimeout("updateBoardView()",200); return true; } function moveUp(){ if(!canMoveUp(board))return false; //能移动，怎么移 for(var j=0;j<4;j++){ for(var i=1;i<4;i++){ for(var k=0;k =0;i--){ for(var k=3;k>i;k--){ if( board[k][j] == 0 && noBlockV( j , i , k , board ) ){ showMoveAnimation( i , j , k , j ); board[k][j] = board[i][j]; board[i][j] = 0; continue; }else if( board[k][j] == board[i][j] && noBlockV( j , i , k , board ) ){ showMoveAnimation( i , j , k , j ); board[k][j]+= board[i][j]; board[i][j] = 0; score+=board[i][k]; updateScore(score); continue; } } } } setTimeout("updateBoardView()",200); return true;}
show.js
// JavaScript Documentfunction showNumber(x,y,number){ var numberCell=$("#number-cell-"+x+"-"+y); //填充文字的颜色 numberCell.css('background-color',getNumberBackgroundColor(number)); numberCell.css('color',getNumberColor(number)); numberCell.text(number); numberCell.animate({ width:cellSideLength+"px", height:cellSideLength+"px", top:getTop(x,y), left:getLeft(x,y) },60) } function showMoveAnimation(fromx,fromy,tox,toy){ var numberCell = $('#number-cell-' + fromx + '-' + fromy ); numberCell.animate({ top:getTop( tox , toy ), left:getLeft( tox , toy ) },200); }function updateScore(score){ $("#score").html(score+''); }
support.js
// JavaScript DocumentdocumentWidth = window.screen.availWidth;gridContainerWidth = 0.92 * documentWidth;cellSideLength = 0.18 * documentWidth;cellSpace = 0.04*documentWidth;function getTop(i,j){ return cellSpace + i*( cellSpace + cellSideLength ); } function getLeft(i,j){ return cellSpace + j*( cellSpace + cellSideLength ); } function getNumberBackgroundColor( number ){ switch( number ){ case 2:return "#eee4da";break; case 4:return "#ede0c8";break; case 8:return "#f2b179";break; case 16:return "#f59563";break; case 32:return "#f67c5f";break; case 64:return "#f65e3b";break; case 128:return "#edcf72";break; case 256:return "#edcc61";break; case 512:return "#9c0";break; case 1024:return "#33b5e5";break; case 2048:return "#09c";break; case 4096:return "#a6c";break; case 8192:return "#93c";break; } return "black";}function getNumberColor( number ){ if( number <= 4 ) return "#776e65"; return "white";} function noBlockH(row,k,j,board){ //row行，从k列到j列 for(var i=k+1;i =0;j--){ if(board[i][j]!=0){ if(board[i][j+1]==0||board[i][j]==board[i][j+1]){ return true; } } } } return false; } function canMoveUp(board){ for(var j=0;j<4;j++){ for(var i=1;i<4;i++){ if(board[i][j]!=0){ if(board[i-1][j]==0||board[i][j]==board[i-1][j]){ return true; } } } } return false; } function canMoveDown(board){ for(var j=0;j<4;j++){ for(var i=2;i>=0;i--){ if(board[i][j]!=0){ if(board[i+1][j]==0||board[i][j]==board[i+1][j]){ return true; } } } } return false; } function noMove(board){ if( canMoveLeft(board)|| canMoveRight(board)|| canMoveUp(board)||canMoveDown(board)){ return false; } alert(112); return true; } function noSpace(board){ //没空间，是返回true，否返回false for( var i = 0 ; i < 4 ; i ++ ){ for( var j = 0 ; j < 4 ; j ++ ){ if(board[i][j]==0){ return false; } } } //循环终止于return 不能放在上面的if判断语句 return true; }