<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-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>Modified by 揚州灬炒飯</p>
<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 hasConflicted = new Array();
var startx = 0;
var starty = 0;
var endx = 0;
var endy = 0;
$(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] = -1;
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] == -1 ){
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] ==-1 )
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] == -1 ){
randx = i;
randy = j;
}
}
}
//隨機一個數字
var randNumber = Math.random() < 0.5 ? 0 : 1;
//在隨機位置顯示隨機數字
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 ){
//move right
if( moveRight() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}
else{
//move left
if( moveLeft() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}
}
else{
if( deltay > 0 ){
//move down
if( moveDown() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}
else{
//move up
if( moveUp() ){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}
}
});
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] != -1 ){
for( var k = 0 ; k < j ; k ++ ){
if( board[i][k] == -1 && noBlockHorizontal( i , k , j , board ) ){
//move
showMoveAnimation( i , j , i , k );
board[i][k] = board[i][j];
board[i][j] = -1;
continue;
}
else{
if( board[i][k] ==0&& board[i][j]==0 && noBlockHorizontal( i , k , j , board ) && !hasConflicted[i][k] ){
//move
showMoveAnimation( i , j , i , k );
//add
board[i][k] = board[i][j]=-1;
hasConflicted[i][k] = true;
continue;
}
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] = -1;
//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] != -1 ){
for( var k = 3 ; k > j ; k -- ){
if( board[i][k] == -1 && noBlockHorizontal( i , j , k , board ) ){
//move
showMoveAnimation( i , j , i , k );
board[i][k] = board[i][j];
board[i][j] = -1;
continue;
}
else{
if( board[i][k] ==0&& board[i][j]==0 && noBlockHorizontal( i , j , k , board ) && !hasConflicted[i][k] ){
//move
showMoveAnimation( i , j , i , k);
//add
board[i][k] = board[i][j]=-1;
hasConflicted[i][k] = true;
continue;
}
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] = -1;
//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] != -1 ){
for( var k = 0 ; k < i ; k ++ ){
if( board[k][j] == -1 && noBlockVertical( j , k , i , board ) ){
//move
showMoveAnimation( i , j , k , j );
board[k][j] = board[i][j];
board[i][j] = -1;
continue;
}
else{
if( board[k][j] ==0&& board[i][j]==0 && noBlockVertical( j , k , i , board ) && !hasConflicted[k][j] ){
//move
showMoveAnimation( i , j , k , j );
//add
board[k][j]= board[i][j]=-1;
hasConflicted[k][j] = true;
continue;
}
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] = -1;
//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] != -1 ){
for( var k = 3 ; k > i ; k -- ){
if( board[k][j] == -1 && noBlockVertical( j , i , k , board ) ){
//move
showMoveAnimation( i , j , k , j );
board[k][j] = board[i][j];
board[i][j] = -1;
continue;
}
else {
if( board[k][j] ==0&& board[i][j]==0 && noBlockVertical( j , i , k , board ) && !hasConflicted[k][j] ) {
//move
showMoveAnimation(i, j, k, j);
//add
board[k][j] = board[i][j]=-1;
hasConflicted[k][j] = true;
continue;
}
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] = -1;
//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 )
},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 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 0:return "#eee4da";break;
case 1:return "#ede0c8";break;
case 2:return "#f2b179";break;
case 4:return "#f59563";break;
case 8:return "#f67c5f";break;
case 16:return "#f65e3b";break;
case 32:return "#edcf72";break;
case 64:return "#edcc61";break;
case 128:return "#9c0";break;
case 256:return "#33b5e5";break;
case 512:return "#09c";break;
case 1024:return "#a6c";break;
case 2048:return "#93c";break;
}
return "black";
}
function getNumberColor( number ){
if( number <= 1 )
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] == -1 )
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] != -1 )
if( board[i][j-1] == -1 || board[i][j-1] == board[i][j] )
return true;
return false;
}
function canMoveRight( board ){
for( var i = 0 ; i < 4 ; i ++ )
for( var j = 2; j >= 0 ; j -- )
if( board[i][j] != -1 )
if( board[i][j+1] == -1 || board[i][j+1] == board[i][j] )
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] != -1 )
if( board[i-1][j] == -1 || board[i-1][j] == board[i][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] != -1 )
if( board[i+1][j] == -1 || 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] != -1 )
return false;
return true;
}
function noBlockVertical( col , row1 , row2 , board ){
for( var i = row1 + 1 ; i < row2 ; i ++ )
if( board[i][col] != -1 )
return false;
return true;
}
function nomove( board ){
if( canMoveLeft( board ) ||
canMoveRight( board ) ||
canMoveUp( board ) ||
canMoveDown( board ) )
return false;
return true;
}
