用javascript实现2048的小游戏
前段时间，看了一个视频，用javascript实现的2048小游戏，发现不难，都是一些基出的语法和简单逻辑。
整个2048游戏没有很多的数据，所有，实现起来还是很有成就感的。
先上图，简直就和原版游戏一样一样的。
下面分享一下整个2048游戏的代码逻辑：
首先，搭建游戏框架
其次，开始我们的代码编写
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>网页版2048</title> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="support2048.js"></script> <script type="text/javascript" src="showanimation2048.js"></script> <script type="text/javascript" src="main2048.js"></script> </head> <body> <header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">New Game</a> <p> score:<span id="score">0</span> </p> </header> <div id="grid-container"> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>网页版2048</title> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="support2048.js"></script> <script type="text/javascript" src="showanimation2048.js"></script> <script type="text/javascript" src="main2048.js"></script> </head> <body> <header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">New Game</a> <p> score:<span id="score">0</span> </p> </header> <div id="grid-container"> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div> </body> </html>
index.css
@CHARSET "UTF-8"; header{ display:block; margin:0 auto; width:500px; text-align:center; } header h1{ font-family:Arial, Helvetica, sans-serif; font-size:60px; font-weight:bold; } header #newgamebutton{ width:100px; padding:10px; background:#8f7a66; font-family:Arial, Helvetica, sans-serif; color:white; border-radius:10px; text-decoration:none; } header #newgamebutton:hover{ background:#9f8b77; } header p{ font-family:Arial, Helvetica, sans-serif; font-size:25px; margin:20px auto; } #grid-container{ width:460px; height:460px; padding:20px; margin:50px auto; background:#bbada0; border-radius:10px; position:relative; } .grid-cell{ width:100px; height:100px; border-radius:6px; background:#ccc0b3; position:absolute; } .number-cell{ width:100px; height:100px; border-radius:6px; line-height:100px; font:Arial, Helvetica, sans-serif; font-size:60px; font-weight:bold; text-align: center; position:absolute; }
main2048.js
var board = new Array(); var score = 0; var top = 240; $(document).ready(function(e){ newgame(); }); function newgame(){ //初始化棋盘格 init(); //在随机两个各自声称的数字 generateOneNumber(); generateOneNumber(); } function init(){ for(var i = 0;i<4;i++){ for(var j = 0;j<4;j++){ var gridCell = $("#grid-cell-"+i+"-"+j); gridCell.css("top",getPosTop(i,j)); gridCell.css("left",getPosLeft(i,j)); } } for(var i = 0; i<4;i++){ board[i] = new Array(); for(var j = 0;j<4;j++){ board[i][j] = 0; } } updateBoardView();//通知前端对board二位数组进行设定。 } function updateBoardView(){ $(".number-cell").remove(); for(var i = 0;i<4;i++){ for ( var j = 0; j < 4; j++) { $("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>'); var theNumberCell = $('#number-cell-'+i+'-'+j); if(board[i][j] == 0){ theNumberCell.css('width','0px'); theNumberCell.css('height','0px'); theNumberCell.css('top',getPosTop(i,j)); theNumberCell.css('left',getPosLeft(i,j)); }else{ theNumberCell.css('width','100px'); theNumberCell.css('hegiht','100px'); theNumberCell.css('top',getPosTop(i,j)); theNumberCell.css('left',getPosLeft(i,j)); //NumberCell覆盖 theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));//返回背景色 theNumberCell.css('color',getNumberColor(board[i][j]));//返回前景色 theNumberCell.text(board[i][j]); } } } } function generateOneNumber(){ if (nospace(board)) return false; //随机一个位置 var randx = parseInt(Math.floor(Math.random()*4)); var randy = parseInt(Math.floor(Math.random()*4)); while(true){ if (board[randx][randy] == 0) break; randx = parseInt(Math.floor(Math.random()*4)); randy = parseInt(Math.floor(Math.random()*4)); } //随机一个数字 var randNumber = Math.random()<0.5 ?2 : 4; //在随机位置显示随机数字 board[randx][randy] = randNumber; showNumberWithAnimation(randx,randy,randNumber); return true; } //事件响应循环 $(document).keydown(function(event){ switch (event.keyCode) { case 37://left if(moveLeft()){ //setTimeout("generateOneNumber()",210); generateOneNumber();//每次新增一个数字就可能出现游戏结束 isgameover();//300毫秒 } break; case 38://up if(moveUp()){ generateOneNumber();//每次新增一个数字就可能出现游戏结束 isgameover(); } break; case 39://right if(moveRight()){ generateOneNumber();//每次新增一个数字就可能出现游戏结束 isgameover(); } break; case 40://down if(moveDown()){ generateOneNumber();//每次新增一个数字就可能出现游戏结束 isgameover(); } break; } }); function isgameover(){ if(nospace(board)&&nomove(board)) gameover(); } function gameover(){ alert("gameover"); } function moveLeft(){//更多地细节信息 //判断格子是否能够向左移动 if( !canMoveLeft(board)) return false; //真正的moveLeft函数//标准 for(var i = 0;i<4;i++) for(var j = 1;j<4;j++){//第一列的数字不可能向左移动 if(board[i][j] !=0){ //(i,j)左侧的元素 for(var k = 0;k<j;k++){ //落脚位置的是否为空 && 中间没有障碍物 if(board[i][k] == 0 && noBlockHorizontal(i , k, j, board)){ //move showMoveAnimation(i, j,i,k); board[i][k] = board[i][j]; board[i][j] = 0; continue; } //落脚位置的数字和本来的数字相等 && 中间没有障碍物 else if(board[i][k] == board[i][j] && noBlockHorizontal(i , k, j, board)){ //move showMoveAnimation(i, j,i,k); //add board[i][k] += board[i][j]; board[i][j] = 0; continue; } } } } setTimeout("updateBoardView()",200); return true; }
support2048.js
function getPosTop(i, j) { return 20 + i * 120; } function getPosLeft(i, j) { return 20 + j * 120; } function getNumberBackgroundColor(number) { switch (number) { case 2: return "#eee4da"; break; case 4: return "#eee4da"; break; case 8: return "#f26179"; break; case 16: return "#f59563"; break; case 32: return "#f67c5f"; break; case 64: return "#f65e36"; break; case 128: return "#edcf72"; break; case 256: return "#edcc61"; break; case 512: return "#9c0"; break; case 1024: return "#3365a5"; break; case 2048: return "#09c"; break; case 4096: return "#a6bc"; break; case 8192: return "#93c"; break; } return "black"; } function getNumberColor(number) { if (number <= 4){ return "#776e65"; } return "white"; } //在随机生成数字的时候判断16宫格中是否还有空间 function nospace(board) { for ( var i = 0; i < 4; i++) for ( var j = 0; j < 4; j++) if (board[i][j] == 0) return false; return true; } //实现功能判断 function canMoveLeft( board ){ for(var i = 0;i<4;i++) for(var j = 0;j<4;j++) if( board[i][j] !=0 ) if( board[i][j-1] == 0 || board[i][j-1] == board[i][j]) return true; return false; }//判断水平方向是否有障碍物 function noBlockHorizontal(row, col1, col2, board){ for(var i = col1 + 1; i<col2; i++) if(board[row][i]!=0) return false; return true; }//最后收尾 function nomove(board){ if(canMoveLeft(board)|| canMoveRight(board)) return false; return true; }
showanimation2048.js
function showNumberWithAnimation(i, j, randNumber) { var numberCell = $('#number-cell-' + i + '-' + j); numberCell.css("background-color", getNumberBackgroundColor(randNumber)); numberCell.css("color", getNumberColor(randNumber)); numberCell.text(randNumber); numberCell.animate({ width : "100px", height : "100px", top : getPosTop(i, j), left : getPosLeft(i, j) }, 50); } function showMoveAnimation(fromx, fromy, tox, toy){ var numberCell = $('#number-cell-'+fromx +'-'+fromy); numberCell.animate({top:getPosTop(tox,toy), left:getPosLeft(tox,toy)},200); }
function showNumberWithAnimation(i, j, randNumber) { var numberCell = $('#number-cell-' + i + '-' + j); numberCell.css("background-color", getNumberBackgroundColor(randNumber)); numberCell.css("color", getNumberColor(randNumber)); numberCell.text(randNumber); numberCell.animate({ width : "100px", height : "100px", top : getPosTop(i, j), left : getPosLeft(i, j) }, 50); } function showMoveAnimation(fromx, fromy, tox, toy){ var numberCell = $('#number-cell-'+fromx +'-'+fromy); numberCell.animate({top:getPosTop(tox,toy), left:getPosLeft(tox,toy)},200); }
在功能代码上只做了向左滑动，向右，向上，向下的功能代码基本一致。读者可以自行编写。
如果有需要在上传完整项目代码。