需要运用Jquery，响应式2048.
CSS代码：
header{
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}
header h1{
font-family: Arial;
font-size: 40px;
font-weight: bold;
margin: 10px auto;
}
header #newButtom{
display: block;
margin: 20px auto;
width: 100px;
background-color: #8f7a66;
padding: 10px 10px;
font-family: Arial;
color: white;
border-radius: 10px;
text-decoration: none;
}
header #newButtom:hover{
background-color:#9f8b77;
}
header p{
font-family: Arial;
font-size: 30px;
margin: 10px auto;
}
#gril_container{width: 460px;
height: 460px;
padding: 20px;
margin: 20px auto;
background-color: #bbada0;
border-radius: 10px;
position: relative;
}
.gril_cell{
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
}
.number_cell{
font-family: Arial;
font-weight: bold;
font-size: 60px;
line-height: 100px;
text-align: center;
position: absolute;
}
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048游戏制作</title>
<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">
</head>
<body>
<header>
<h1>King</h1>
<a href="javascript:newgame()" id="newButtom">New Game</a>
<p>score:<span id="score">0</span></p>
</header>
<div id="gril_container">
<div class="gril_cell" id="gril_cell_0_0"></div>
<div class="gril_cell" id="gril_cell_0_1"></div>
<div class="gril_cell" id="gril_cell_0_2"></div>
<div class="gril_cell" id="gril_cell_0_3"></div>
<div class="gril_cell" id="gril_cell_1_0"></div>
<div class="gril_cell" id="gril_cell_1_1"></div>
<div class="gril_cell" id="gril_cell_1_2"></div>
<div class="gril_cell" id="gril_cell_1_3"></div>
<div class="gril_cell" id="gril_cell_2_0"></div>
<div class="gril_cell" id="gril_cell_2_1"></div>
<div class="gril_cell" id="gril_cell_2_2"></div>
<div class="gril_cell" id="gril_cell_2_3"></div>
<div class="gril_cell" id="gril_cell_3_0"></div>
<div class="gril_cell" id="gril_cell_3_1"></div>
<div class="gril_cell" id="gril_cell_3_2"></div>
<div class="gril_cell" id="gril_cell_3_3"></div>
</div>
Jquery代码：
var board=new Array();
var score=0;
var hansConfilcte=new Array();
var privates=new Object();
var startX=0;
var startY=0;
var endX=0;
var endY=0;
$(document).ready(function($) {
perpareForMobil();
newgame();
});
function perpareForMobil(){
if(documentWidth>500){
grildContainWidth=500;
cellSpace=20;
cellSideLength=100;
}
$(‘#gril_container‘).css(‘width‘,grildContainWidth-2*cellSpace);
$(‘#gril_container‘).css(‘height‘,grildContainWidth-2*cellSpace);
$(‘#gril_container‘).css(‘padding‘,cellSpace);
$(‘#gril_container‘).css(‘border-radius‘,0.02*grildContainWidth);
$(‘.gril_cell‘).css(‘width‘,cellSideLength);
$(‘.gril_cell‘).css(‘height‘,cellSideLength);
$(‘.gril_cell‘).css(‘border-radius‘,0.02*cellSideLength);
}
function newgame(){
//初始化棋盘格
init();
//随机生成两个格子的数字，用2或者4
gernarateOneNumber();
gernarateOneNumber();
}
function gernarateOneNumber(){
if(nospace(board)){
return false;
}
var times=0;
//随机一个位置
var randx=parseInt(Math.floor(Math.random()*4));
var randy=parseInt(Math.floor(Math.random()*4));
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 randNumber=Math.random() <0.5 ? 2 : 4;
//在随机位置显示随机数字
board[randx][randy]=randNumber;
showNumberwithAnimation(randx,randy,randNumber);
return true;
}
//PC端键盘
$(document).keydown(function(event) {
switch(event.keyCode){
//left
case 37 :
event.preventDefault();
if(moveLeft()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
break;
//top
case 38 :
event.preventDefault();
if(moveTop()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
break;
//right
case 39 :
event.preventDefault();
if(moveRight()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
break;
//down
case 40 :
event.preventDefault();
if(moveDown()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
break;
default:
break;
}
});
//移动端触摸
document.addEventListener(‘touchstart‘,function(event){
startX=event.touches[0].pageX;
startY=event.touches[0].pageY;
})
document.addEventListener("touchmove",function(event){
event.preventDefault();
})
document.addEventListener(‘touchend‘,function(event){
endX=event.changedTouches[0].pageX;
endY=event.changedTouches[0].pageY;
var deltaX=startX-endX;
var deltaY=startY-endY;
//x
if(Math.abs(deltaX)<0.3*documentWidth&&Math.abs(deltaY)<0.3*documentWidth){
return;
}
if(Math.abs(deltaX)>=Math.abs(deltaY)){
//向右滑动
if(deltaX<0){
if(moveRight()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
}
//向左滑动
else{
if(moveLeft()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
}
}
//y
else{
//向下滑动
if(deltaY<0){
if(moveDown()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
}
//向上滑动
else{
if(moveTop()){
setTimeout("gernarateOneNumber()",210);
setTimeout("isGameOver(board)",300);
}
}
}
})
//左移操作
function moveLeft(){
if(!canLeft(board)){
return false;
}
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)){
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)&&!hansConfilcte[i][k]){
showmoveAnimation(i,j,i,k);
board[i][k]+=board[i][j];
board[i][j]=0;
score+=board[i][k];
updateScore(score);
hansConfilcte[i][k]=true;
continue;
}
}
}
}
}
setTimeout("updataBoardView()",200);
return true;
}
//上移操作
function moveTop(){
if(!canTop(board)){
return false;
}
for(var i=1;i<4;i++){
for(var j=0;j<4;j++){
if(board[i][j]!=0){
for(var k=0;k<i;k++){
if(board[k][j]==0&&noBlockHorital(j,k,i,board)){
showmoveAnimation(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
continue;
}
else if(board[k][j]==board[i][j]&&noBlockHorital(j,k,i,board)&&!hansConfilcte[k][j]){
showmoveAnimation(i,j,k,j);
board[k][j]+=board[i][j];
board[i][j]=0;
score+=board[k][j];
updateScore(score);
hansConfilcte[k][j]=true;
continue;
}
}
}
}
}
setTimeout("updataBoardView()",200);
return true;
}
//右移操作
function moveRight(){
if(!canRight(board)){
return false;
}
for(var i=0;i<4;i++){
for(var j=2;j>-1;j--){
if(board[i][j]!=0){
for(var k=3;k>j;k--){
if(board[i][k]==0&&noBlockHorizontal(i,j,k,board)){
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)&&!hansConfilcte[i][k]){
showmoveAnimation(i,j,i,k);
board[i][k]+=board[i][j];
board[i][j]=0;
score+=board[i][k];
updateScore(score);
hansConfilcte[i][k]=true;
continue;
}
}
}
}
}
setTimeout("updataBoardView()",200);
return true;
}
//下移操作
function moveDown(){
if(!canDown(board)){
return false;
}
for(var i=2;i>-1;i--){
for(var j=0;j<4;j++){
if(board[i][j]!=0){
for(var k=3;k>i;k--){
if(board[k][j]==0&&noBlockHorital(j,i,k,board)){
showmoveAnimation(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
continue;
}
else if(board[k][j]==board[i][j]&&noBlockHorital(j,i,k,board)&&!hansConfilcte[k][j]){
showmoveAnimation(i,j,k,j);
board[k][j]+=board[i][j];
board[i][j]=0;
score+=board[k][j];
updateScore(score);
hansConfilcte[k][j]=true;
continue;
}
}
}
}
}
setTimeout("updataBoardView()",200);
return true;
}
//判断是否可左移
function canLeft(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]==board[i][j-1]){
return true;
}
}
}
}
return false;
}
//判断是否可上移
function canTop(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][j]==board[i-1][j]){
return true;
}
}
}
}
return false;
}
//判断是否可右移
function canRight(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]==board[i][j+1]){
return true;
}
}
}
}
return false;
}
//判断是否可下移
function canDown(board){
for(var i=2;i>-1;i--){
for(var j=0;j<4;j++){
if(board[i][j]!=0){
if(board[i+1][j]==0||board[i][j]==board[i+1][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 noBlockHorital(row,col1,col2,board){
for(var i=col1+1;i<col2;i++){
if(board[i][row]!=0){
return false;
}
}
return true;
}
//判断游戏是否结束
function isGameOver(board){
if(nospace(board)&&nomove(board)){
gameover();
}
}
function gameover(){
alert("GameOver!!!!");
}
//移动动画
function showmoveAnimation(fx,fy,tx,ty){
var numberCell=$("#number_cell_"+fx+"_"+fy);
numberCell.animate({top: getPosTop(tx,ty), left: getPosLeft(tx,ty)}, 200);
}
//判断是否能继续移动
function nomove(board){
if(canDown(board)||canRight(board)||canLeft(board)||canTop(board)){
return false;
}
return true;
}
//生成随机数字的动画函数
function showNumberwithAnimation(i,j,randNumber){
var numberCell=$(‘#number_cell_‘+i+"_"+j);
numberCell.css("background-color",getBoardBackColor(randNumber));
numberCell.css("color",getBoardColor(randNumber));
numberCell.text(privates["x"+randNumber]);
numberCell.animate({width: cellSideLength, height: cellSideLength,top:getPosTop(i,j),left:getPosLeft(i,j)}, 50)
}
//判断是否还有空间
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 init(){
privates={
x2:"兵",
x4:"炮",
x8:"車",
x16:"马",
x32:"象",
x64:"士",
x128:"将",
x256:"帅",
x512:"王",
x1024:"皇",
x2048:"帝",
}
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
var grilcell=$("#gril_cell_"+i+"_"+j);
grilcell.css("top",getPosTop(i,j));
grilcell.css("left",getPosLeft(i,j));
}
}
for(var i=0;i<4;i++){
board[i]=new Array();
hansConfilcte[i]=new Array();
for(var j=0;j<4;j++){
board[i][j]=0;
hansConfilcte[i][j]=false;
}
}
updataBoardView();
score=0;
}
//加分函数
function updateScore(score){
$(‘#score‘).text(score);
}
function updataBoardView(){
$(".number_cell").remove();
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
$("#gril_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","0");
theNumberCell.css("height","0");
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",getBoardBackColor(board[i][j]));
theNumberCell.css("color",getBoardColor(board[i][j]));
theNumberCell.text(privates["x"+board[i][j]]);
}
hansConfilcte[i][j]=false;
}
}
$(‘.number_cell‘).css(‘line-height‘,cellSideLength+"px");
$(‘.number_cell‘).css(‘font-size‘,0.6*cellSideLength+"px");
}
function getBoardBackColor(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 "#f67e5f";break;
case 64 :return "#edcf72";break;
case 128 :return "#edcc61";break;
case 256 :return "#9c0";break;
case 512 :return "#33b5e5";break;
case 1024 :return "#09c";break;
case 2048 :return "#93c";break;
}
return "black";
}
function getBoardColor(number){
if(number<=4){
return "#776e65";
}
else{
return "white";
}
}
documentWidth=window.screen.availWidth;
grildContainWidth=documentWidth*0.92;
cellSideLength=0.18*documentWidth;
cellSpace=0.04*documentWidth;
function getPosTop(i,j){
return cellSpace+(cellSpace+cellSideLength)*i;
}
function getPosLeft(i,j){
return cellSpace+(cellSpace+cellSideLength)*j;
}