<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
header{display:block; margin:0 auto; width:100%; text-align:center;}
header h1{font-size:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
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:20px auto; background-color:#bbada0; border-radius:10px; position:relative;}
.grid-cell{width:100px; height:100px; border-radius:6px; color:white; background-color:#ccc0b3; position:absolute; font-family:Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center;} .gameover{display:block; margin:0 auto; width:500px; text-align:center; vertical-align:middle; position:absolute;} .gameover p {
font-family: Arial;
font-size: 50px;
color: white;
margin: 20px auto; margin-top: 150px;
} .gameover span {
font-family: Arial;
font-size: 50px;
color: white;
margin: 20px auto;
} #restartgamebutton {
display: block;
margin: 20px auto; width: 180px;
padding: 10px 10px;
background-color: #8f7a66; font-family: Arial;
font-size: 30px;
color: white; border-radius: 10px; text-decoration: none;
} #restartgamebutton:hover {
background-color: #9f8b77;
} #showGameover{width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none; font-size:36px; position:absolute;} </style> <script> window.onload = function (){
//newgame();
var showScore = document.getElementById('score');
score = 0;
init();
generateOneNumber();
generateOneNumber(); window.onkeydown = function (e){
var e = e || window.event; switch(e.keyCode){
case 37:
if(canMoveLeft(board)){
moveLeft();
generateOneNumber();
isgameover();
}
break;
case 38:
if(canMoveUp(board)){
moveUp();
generateOneNumber();
isgameover();
}
break;
case 39:
if(canMoveRight(board)){
moveRight();
generateOneNumber();
isgameover();
}
break;
case 40:
if(canMoveDown(board)){
moveDown();
generateOneNumber();
isgameover();
}
break;
default :
break;
}
};
}; function generateOneNumber() {
if(!nospace(board)){
var randx = parseInt(Math.floor(Math.random() * 4));
var randy = parseInt(Math.floor(Math.random() * 4));
while (true) {
if (board[randx][randy] == 0) {
break;
}
var randx = parseInt(Math.floor(Math.random() * 4));
var randy = parseInt(Math.floor(Math.random() * 4));
}
var randNumber = Math.random() < 0.5 ? 2 : 4;
board[randx][randy] = randNumber;
var gridCell = document.getElementById('grid-cell-'+randx+'-'+randy);
gridCell.innerHTML = randNumber;
//
}
else {
gameover();
}
} function newgame() {
window.location.reload(); } var board = new Array();
function init(){
for(var i=0;i<4;i++){
board[i] = new Array();
for(var j=0;j<4;j++){
board[i][j] = 0; var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.style.top = (20+i*120)+'px';
gridCell.style.left = (20+j*120)+'px';
}
}
} 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;
}
} 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 moveLeft() {
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
for (var k = j-1; k > -1; k--) {
if(board[i][k] == 0 || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = 0;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);
gridCellk.innerHTML = board[i][k];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
gridCell.style.backgroundColor = '#ccc0b3';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[i][k];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
j = k;
//
}
else {
break; //跳出 var k 的for循环
} }
}
}
}
} 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 - 1][j] == board[i][j]) {return true; }
}
}
}
return false;
} function moveUp() {
for (var j = 0; j < 4; j++) {
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
for (var k = i-1; k > -1; k--) {
if(board[k][j] == 0 || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = 0;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);
gridCellk.innerHTML = board[k][j];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
gridCell.style.backgroundColor = '#ccc0b3';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[k][j];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
i = k;
//
}
else {
break; //跳出 var k 的for循环
} }
}
}
}
} function canMoveRight(board) {
for (var i = 0; i < 4; i++) {
for (var j = 2; j > -1; j--) {
if (board[i][j] != 0) {
if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]) {return true; }
}
}
}
return false;
} function moveRight() {
for (var i = 0; i < 4; i++) {
for (var j = 2; j > -1; j--) {
if (board[i][j] != 0) {
for (var k = j+1; k < 4; k++) {
if(board[i][k] == 0 || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = 0;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);
gridCellk.innerHTML = board[i][k];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
gridCell.style.backgroundColor = '#ccc0b3';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[i][k];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
j = k;
//
}
else {
break; //跳出 var k 的for循环
} }
}
}
}
} function canMoveDown(board) {
for (var j = 0; j < 4; j++) {
for (var i = 2; i > -1; i--) {
if (board[i][j] != 0) {
if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {return true; }
}
}
}
return false;
} function moveDown() {
for (var j = 0; j < 4; j++) {
for (var i = 2; i > -1; i--) {
if (board[i][j] != 0) {
for (var k = i+1; k < 4; k++) {
if(board[k][j] == 0 || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = 0;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);
gridCellk.innerHTML = board[k][j];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
gridCell.style.backgroundColor = '#ccc0b3';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[k][j];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
i = k;
//
}
else {
break; //跳出 var k 的for循环
} }
}
}
}
} function isgameover() {
if (nospace(board) && nomove(board)) {
gameover();
}
} function nomove(board) {
if (canMoveDown(board) ||
canMoveLeft(board) ||
canMoveRight(board) ||
canMoveUp(board)) {
return false;
}
return true;
} function bounce(obj,top){
clearInterval(obj.timer);
var nSpeed = 0;
var acceleration = 9;
var Flag = 0; obj.timer = setInterval(function (){
nSpeed += acceleration;
nSpeed *= 0.93; if(obj.offsetTop + nSpeed >= top){
obj.style.top = top + 'px';
nSpeed *= -1;
}else{
if(Math.abs(nSpeed) < 4 && Math.abs(top-obj.offsetTop)<1){
clearInterval(obj.timer);
}
else{
obj.style.top = obj.offsetTop + nSpeed + 'px';
}
} },30);
} function gameover() {
//alert("gameover!");
var gameover = document.createElement('div');
gameover.id = 'showGameover';
gameover.innerHTML = 'GAME OVER';
var gridContainer = document.getElementById('grid-container');
gridContainer.appendChild(gameover);
var showGameover = document.getElementById('showGameover');
showGameover.style.left = (gridContainer.offsetWidth - showGameover.offsetWidth ) / 2 + 'px'; bounce(showGameover,200);
} </script> </head> <body>
<header>
<!--<h1> 2048 </h1>-->
<a href="javascript:newgame();" id="newgamebutton"> New Game </a> <p> score: <span id="score">0</span></p> <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>
</header>
</body>
</html>