前段时间，看了一个视频，用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></h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>
score:<span id="score"></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></h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>
score:<span id="score"></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: 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 = ;
var top = ;
$(document).ready(function(e){
newgame();
}); function newgame(){
//初始化棋盘格
init();
//在随机两个各自声称的数字
generateOneNumber();
generateOneNumber();
} function init(){
for(var i = ;i<;i++){
for(var j = ;j<;j++){
var gridCell = $("#grid-cell-"+i+"-"+j);
gridCell.css("top",getPosTop(i,j));
gridCell.css("left",getPosLeft(i,j));
}
} for(var i = ; i<;i++){
board[i] = new Array();
for(var j = ;j<;j++){
board[i][j] = ;
}
} updateBoardView();//通知前端对board二位数组进行设定。
} function updateBoardView(){
$(".number-cell").remove();
for(var i = ;i<;i++){
for ( var j = ; j < ; j++) {
$("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
var theNumberCell = $('#number-cell-'+i+'-'+j);
if(board[i][j] == ){
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()*));
var randy = parseInt(Math.floor(Math.random()*));
while(true){
if (board[randx][randy] == )
break;
randx = parseInt(Math.floor(Math.random()*));
randy = parseInt(Math.floor(Math.random()*));
}
//随机一个数字
var randNumber = Math.random()<0.5 ? : ;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
} //事件响应循环
$(document).keydown(function(event){
switch (event.keyCode) {
case ://left
if(moveLeft()){
//setTimeout("generateOneNumber()",210);
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();//300毫秒
}
break;
case ://up
if(moveUp()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break;
case ://right
if(moveRight()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break;
case ://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 = ;i<;i++)
for(var j = ;j<;j++){//第一列的数字不可能向左移动
if(board[i][j] !=){
//(i,j)左侧的元素
for(var k = ;k<j;k++){
//落脚位置的是否为空 && 中间没有障碍物
if(board[i][k] == && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
board[i][k] = board[i][j];
board[i][j] = ;
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] = ; continue;
}
}
}
}
setTimeout("updateBoardView()",);
return true;
}
support2048.js
function getPosTop(i, j) {
return + i * ;
}
function getPosLeft(i, j) {
return + j * ;
}
function getNumberBackgroundColor(number) {
switch (number) {
case :
return "#eee4da";
break;
case :
return "#eee4da";
break;
case :
return "#f26179";
break;
case :
return "#f59563";
break;
case :
return "#f67c5f";
break;
case :
return "#f65e36";
break;
case :
return "#edcf72";
break;
case :
return "#edcc61";
break;
case :
return "#9c0";
break;
case :
return "#3365a5";
break;
case :
return "#09c";
break;
case :
return "#a6bc";
break;
case :
return "#93c";
break;
}
return "black";
}
function getNumberColor(number) {
if (number <= ){
return "#776e65";
}
return "white";
}
//在随机生成数字的时候判断16宫格中是否还有空间
function nospace(board) {
for ( var i = ; i < ; i++)
for ( var j = ; j < ; j++)
if (board[i][j] == )
return false;
return true;
}
//实现功能判断
function canMoveLeft( board ){
for(var i = ;i<;i++)
for(var j = ;j<;j++)
if( board[i][j] != )
if( board[i][j-] == || board[i][j-] == board[i][j])
return true;
return false;
}//判断水平方向是否有障碍物
function noBlockHorizontal(row, col1, col2, board){
for(var i = col1 + ; i<col2; i++)
if(board[row][i]!=)
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)
}, );
}
function showMoveAnimation(fromx, fromy, tox, toy){
var numberCell = $('#number-cell-'+fromx +'-'+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},);
}
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)
}, );
}
function showMoveAnimation(fromx, fromy, tox, toy){
var numberCell = $('#number-cell-'+fromx +'-'+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},);
}
在功能代码上只做了向左滑动，向右，向上，向下的功能代码基本一致。读者可以自行编写。
如果有需要在上传完整项目代码。