<!DOCTYPE html>
<html>
<head>
<meta charset="UTP-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>2048</title>
<link rel="stylesheet" type="text/css" href="2048.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>
/**
* Created by liuyubobobo on 14-4-11.
* my site: http://www.liuyubobobo.com
*/
header{
display:block;
margin:0 auto;
width:100%;
text-align:center;
}
header h1{
font-family:Arial;
font-size:40px;
font-weight:bold;
margin:0 auto;
}
header #newgamebutton{
display:block;
margin:10px auto;
width:100px;
padding:10px 10px;
background-color:#8f7a66;
font-family:Arial;
color:white;
border-radius:10px;
text-decoration:none;
}
header #newgamebutton:hover{
background-color:#9f8b77;
}
header p{
font-family:Arial;
font-size:25px;
margin:10px auto;
}
#grid-container{
width:460px;
height:460px;
padding:20px;
margin:10px auto;
background-color:#bbada0;
border-radius: 10px;
position: relative;
}
.grid-cell{
width:100px;
height:100px;
border-radius: 6px;
background-color:#ccc0b3;
position: absolute;
}
.number-cell{
border-radius: 6px;
font-family: Arial;
font-weight:bold;
font-size:60px;
line-height:100px;
text-align:center;
position:absolute;
}
/**
* Created by liuyubobobo on 14-4-11.
* my site: http://www.liuyubobobo.com
*/
var board = new Array();
var score = 0;
var startx=0;
var starty=0;
var endx=0;
var endy=0;
var hasConflicted = new Array();
$(document).ready(function(){
prepareForMobile();
newgame();
});
function prepareForMobile(){
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 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();
hasConflicted[i] = new Array();
for( var j = 0 ; j < 4 ; j ++ ){
board[i][j] = 0;
hasConflicted[i][j] = false;
}
}
updateBoardView();
score = 0;
}
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) + cellSideLength/2 );
theNumberCell.css('left',getPosLeft(i,j) + cellSideLength/2 );
}
else{
theNumberCell.css('width',cellSideLength);
theNumberCell.css('height',cellSideLength);
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
theNumberCell.css('background-color',getNumberBackgroundColor( board[i][j] ) );
theNumberCell.css('color',getNumberColor( board[i][j] ) );
theNumberCell.text( board[i][j] );
}
hasConflicted[i][j] = false;
}
$('.number-cell').css('line-height',cellSideLength+'px');
$('.number-cell').css('font-size',0.6*cellSideLength+'px');
}
function generateOneNumber(){
if( nospace( board ) )
return false;
//隨機一個位置
var randx = parseInt( Math.floor( Math.random() * 4 ) );
var randy = parseInt( Math.floor( Math.random() * 4 ) );
/*
var times = 0;
while( times < 50 ){
if( board[randx][randy] == 0 )
break;
randx = parseInt( Math.floor( Math.random() * 4 ) );
randy = parseInt( Math.floor( Math.random() * 4 ) );
times ++;
}
if( times == 50 ){
for( var i = 0 ; i < 4 ; i ++ )
for( var j = 0 ; j < 4 ; j ++ ){
if( board[i][j] == 0 ){
randx = i;
randy = j;
}
}
}*/
var count=0;
var temporary=new Array();
for(var i=0;i<4;i++)
for(var j=0;j<4;j++)
{
if(board[i][j]==0)
{
temporary[count]=i*4+j;
count++;
}
}
var pos= parseInt( Math.floor( Math.random() * count ) );
randx=Math.floor(temporary[pos]/4);
randy=Math.floor(temporary[pos]%4);
//隨機一個數字
var randNumber = Math.random() < 0.5 ? 2 : 4;
//在隨機位置顯示隨機數字
board[randx][randy] = randNumber;
showNumberWithAnimation( randx , randy , randNumber );
return true;
}
$(document).keydown( function( event ){
//event.preventDefault();
switch( event.keyCode ){
case 37: //left
if( moveLeft() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 38: //up
if( moveUp() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 39: //right
if( moveRight() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 40: //down
if( moveDown() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
default: //default
break;
}
});
document.addEventListener('touchstart',function(event)
{
startx=event.touches[0].pageX;
starty=event.touches[0].pageY;
}
);
document.addEventListener('touchend',function(event)
{
endx=event.changedTouches[0].pageX;
endy=event.changedTouches[0].pageY;
var deltax=endx-startx;
var deltay=endy-starty;
if(Math.abs(deltax)<0.3*documentWidth&&Math.abs(deltay)<0.3*documentWidth)
return;
if(Math.abs(deltax)>=Math.abs(deltay))
{
if(deltax>0)//right
{
if(moveRight())
{
generateOneNumber();
isGameOver();
}
}else//left
{
if(moveLeft())
{
setTimeout("generateOneNumber()",210);
setTimeout("isGameOver()",300);
}
}
}
else
{
if(deltay>0)//down
{
if(moveDown())
{
generateOneNumber();
isGameOver();
}
}else//up
{
if(moveUp())
{
generateOneNumber();
isGameOver();
}
}
}
}
);
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 ){
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 ) && !hasConflicted[i][k] ){
//move
showMoveAnimation( i , j , i , k );
//add
board[i][k] += board[i][j];
board[i][j] = 0;
//add score
score += board[i][k];
updateScore( score );
hasConflicted[i][k] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveRight(){
if( !canMoveRight( board ) )
return false;
//moveRight
for( var i = 0 ; i < 4 ; i ++ )
for( var j = 2 ; j >= 0 ; j -- ){
if( board[i][j] != 0 ){
for( var k = 3 ; k > j ; k -- ){
if( board[i][k] == 0 && noBlockHorizontal( i , j , k , 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 , j , k , board ) && !hasConflicted[i][k] ){
//move
showMoveAnimation( i , j , i , k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;
//add score
score += board[i][k];
updateScore( score );
hasConflicted[i][k] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveUp(){
if( !canMoveUp( board ) )
return false;
//moveUp
for( var j = 0 ; j < 4 ; j ++ )
for( var i = 1 ; i < 4 ; i ++ ){
if( board[i][j] != 0 ){
for( var k = 0 ; k < i ; k ++ ){
if( board[k][j] == 0 && noBlockVertical( j , k , i , board ) ){
//move
showMoveAnimation( i , j , k , j );
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board[i][j] && noBlockVertical( j , k , i , board ) && !hasConflicted[k][j] ){
//move
showMoveAnimation( i , j , k , j );
//add
board[k][j] += board[i][j];
board[i][j] = 0;
//add score
score += board[k][j];
updateScore( score );
hasConflicted[k][j] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveDown(){
if( !canMoveDown( board ) )
return false;
//moveDown
for( var j = 0 ; j < 4 ; j ++ )
for( var i = 2 ; i >= 0 ; i -- ){
if( board[i][j] != 0 ){
for( var k = 3 ; k > i ; k -- ){
if( board[k][j] == 0 && noBlockVertical( j , i , k , board ) ){
//move
showMoveAnimation( i , j , k , j );
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board[i][j] && noBlockVertical( j , i , k , board ) && !hasConflicted[k][j] ){
//move
showMoveAnimation( i , j , k , j );
//add
board[k][j] += board[i][j];
board[i][j] = 0;
//add score
score += board[k][j];
updateScore( score );
hasConflicted[k][j] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
/**
* Created by liuyubobobo on 14-4-11.
* my site: http://www.liuyubobobo.com
*/
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:cellSideLength,
height:cellSideLength,
top:getPosTop( i , j ),
left:getPosLeft( i , j )
},500);
}
function showMoveAnimation(fromx ,fromy,tox,toy)
{
var numberCell=$('#number-cell-'+fromx+'-'+fromy);
numberCell.animate(
{
top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)
},200);
}
function updateScore(score)
{
$('#score').text(score);
}
/**
* Created by liuyubobobo on 14-4-11.
* my site: http://www.liuyubobobo.com
*/
documentWidth=window.screen.availWidth;
gridContainerWidth=0.92*documentWidth;
cellSideLength=0.18*documentWidth;
cellSpace=0.04*documentWidth;
function getPosTop( i , j ){
return cellSpace + i*(cellSpace+cellSideLength);
}
function getPosLeft( 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 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=1;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 canMoveRight(board)
{
for(var i=0;i<4;i++)
for(var j=0;j<3;j++)
{
if(board[i][j]!=0)
if(board[i][j+1]==0||board[i][j+1]==board[i][j])
return true;
}
return false;
}
function canMoveUp(board)
{
for(var i=1;i<4;i++)
for(var j=0;j<4;j++)
{
if(board[i][j]!=0)
if(board[i-1][j]==0||board[i-1][j]==board[i][j])
return true;
}
return false;
}
function canMoveDown(board)
{
for(var i=0;i<3;i++)
for(var j=0;j<4;j++)
{
if(board[i][j]!=0)
if(board[i+1][j]==0||board[i+1][j]==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 noBlockVertical(col,row1,row2,board)
{
for(var i=row1+1;i<row2;i++)
{
if(board[i][col]!=0)
return false;
}
return true;
}
function nomove(board)
{
if(canMoveLeft(board)||
canMoveRight(board)||
canMoveDown(board)||
canMoveRight(board))
return false;
return true;
}
