架构属于您自己的WebApp-2048游戏_html2048技术架构-优快云博客

本文链接：https://blog.youkuaiyun.com/sunyuan_software/article/details/45955657

作者详细介绍了如何利用HTML、CSS和JavaScript技术，完整实现了一个2048网页游戏，包括代码结构设计、样式表创建以及核心逻辑实现，通过分析、设计、实现三个步骤，展示了一款互动游戏的开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我利用了周六，周日两天的时间，完完整整地写出一个2048的web游戏，其中所涉及的技术：Html+css+javascript。演示地址：

http://jyuan.sinaapp.com/games/2048/

首先，我们拿到这样一个任务，肯定是要玩一下2048这个游戏的。并不是单纯地玩，要想一下这个游戏的布局，思路等等 2048这个游戏是这样的：根据你的交互而进行下一步动作，这是什么意思呢？就是这个游戏的是否进行是根据你的按键来判断的，你所按的键分别是：上下左右。每一个格子移动的时候会做判断，例如向左移动：左边是没有数字的格子还是有数字的格子，这个数字是与当前移动的格子数字相等还是不相等，然后找到在哪个格子上显示对应的数，游戏的大概流程就是这样。

接着我们按照分析→设计→实现的思路：把我们的代码结构设计一下：首先我们需要一个index.html文件：里面存放着主页的布局：生成两个4*4的格子布局，第一个是没有数字的，宽高确定的能显示的；第二个是动态显示的，即是一开始不给它设置宽高，当用户移动的时候再动态显示出来。第二，需要一个样式表文件:2048.css。

接着重点是js文件，这里我们分为了三个不同功能的文件:①main2048.js:保存主体动作代码②shownumberAnimation.js：这个是包含数字出现和移动的动画代码
③support2048.js：这个是提供一些判断是否能够移动的代码。

接着，我们来看看代码的具体实现
index.html

<!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,user-scalable=no" />
        <title>2048</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/2048.css"/>
        <script type="text/javascript" src="js/shownumberAnimation.js"></script>
        <script type="text/javascript" src="js/support2048.js"></script>
        <script type="text/javascript" src="js/main2048.js"></script>
    </head>
    <body>
        <header><h1>2048</h1>
        <a href="javascript:newGame();" id="newGameButton">NewGame</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>

2048.css

header{
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
header h1{
    font-family: "微软雅黑";
    font-size: 40px;
    font-weight: bold;
}
header #newGameButton{
    display: block;
    width:100px;
    margin: 20px auto;
    background-color: #c00;
    border-radius:10px;
    color: wheat;
    text-decoration: none;
    text-align: center;
}
header p{
    text-align: center;
}
#grid-container{
    width: 460px;
    height: 460px;
    padding: 20px;
    margin: 20px auto;
    border-radius:10px ;
    background-color:#bbada0 ;
    position: relative;
}
.grid-cell{
    width: 100px;
    height: 100px;
    background-color: #ccc0b3;
    border-radius: 6px;
    position: absolute;
}
.number-cell{
    position: absolute;
    text-align: center;
    border-radius:6px ;
    line-height: 100px;
    font-weight: bold;
    font-family:arial;
}

main2048.js

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(){
    newGame();
    //自适应
    forMobile();
});
function newGame(){
    //初始化布局
    init();


    //随机生成数字
    generateOnenumber();
    generateOnenumber();
    score=0;

}
function forMobile(){

    $('#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 init(){
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            var gridcell=$("#grid-cell-"+i+"-"+j);
            gridcell.css('top',getTop(i));
            gridcell.css('left',getLeft(j));
        }
    }
    for(i=0;i<4;i++){
        board[i]=new Array();
        hasConflicted[i]=new Array();
        for(j=0;j<4;j++){
            board[i][j]=0;
            hasConflicted[i][j]=false;
        }
    }
    updateboardView();
}

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 numbercell=$("#number-cell-"+i+"-"+j)
            if(board[i][j]==0){
                numbercell.css("width",'0');
                numbercell.css("height",'0');
                numbercell.css("top",getTop(i)+cellSideLength/2);
                numbercell.css("left",getLeft(j)+cellSideLength/2);
            }
            else{
                numbercell.css("width",cellSideLength);
                numbercell.css("height",cellSideLength);
                numbercell.css("top",getTop(i));
                numbercell.css("left",getLeft(j));
                numbercell.css("background-color",getNumberCellBgcolor(board[i][j]));
                numbercell.css("color",getNumberCellColor(board[i][j]));
                numbercell.text(rank(board[i][j]));
            }
            hasConflicted[i][j]=false;
        }
        $('.number-cell').css('line-height',cellSideLength+'px');
        $('.number-cell').css('font-size',0.2*cellSideLength+'px');
}

function generateOnenumber(){
    //首先判断有没有空间可用
    if(nospace(board)){
        return false;
    }
    //生成随机位置
    var randomx=parseInt(Math.floor(Math.random()*4));
    var randomy=parseInt(Math.floor(Math.random()*4));
    var times=0;
    while(times<50){
        if(board[randomx][randomy]==0)
            break;
        else{
             randomx=parseInt(Math.floor(Math.random()*4));
             randomy=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){
                    randomx=i;
                     randomy=j;
                }       
            }

    }

    //生成随机数字
    var randomnum=Math.random()<0.5?2:4;
    //在随机位置上显示随机数字
    board[randomx][randomy]=randomnum;
    showNumberwithAnimation(randomx,randomy,randomnum);
    return true;
}
$(document).keydown(function(event){
    switch(event.keyCode){
        case 37:  
            if(moveLeft()){
                setTimeout('generateOnenumber()',210);
                setTimeout("isGameOver()",300);
            }
                break;//左按键
        case 38:  
        if(moveUp()){
                setTimeout('generateOnenumber()',210);
                setTimeout("isGameOver()",300);
            }break;//上按键
        case 39:  
        if(moveRight()){
                setTimeout('generateOnenumber()',210);
                setTimeout("isGameOver()",300);
            }break;//右按键
        case 40:  
        if(moveDown()){
            setTimeout('generateOnenumber()',210);
            setTimeout("isGameOver()",300);
            }break;//下按键
    }

})
//触控交互
document.addEventListener('touchstart',function(event){
    event.preventDefault();
    startx=event.touches[0].pageX;
    starty=event.touches[0].pageY;
});
document.addEventListener('touchend',function(event){
    event.preventDefault();
    endx=event.changedTouches[0].pageX;
    endy=event.changedTouches[0].pageY;
    var deltax=endx-startx;
    var deltay=endy-starty;
    //判断方向
    if(Math.abs(deltax)>=Math.abs(deltay)){
        if(deltax>0){
            //moveRight
            if(moveRight()){
                setTimeout('generateOnenumber()',210);
                setTimeout("isGameOver()",300);
        }
        }
        else{
            //moveLeft
            if(moveLeft()){
                setTimeout('generateOnenumber()',210);
                setTimeout("isGameOver()",300);
            }
        }

    }
    else{
        if(deltay>0){
            //moveDown
        if(moveDown()){
            setTimeout('generateOnenumber()',210);
            setTimeout("isGameOver()",300);
        }
        }
        else{
            //moveUp
            if(moveUp()){
                setTimeout('generateOnenumber()',210);
                setTimeout("isGameOver()",300);
        }

    }
}});
function isGameOver(){
    if(nospace(board)&&nomove(board)){
        alert("GameOver");
        newGame();
    }
}
function moveLeft(){
    if(!canMoveLeft(board))
        return false;
        //moveleft
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            if(board[i][j]!=0){
                for(var k=0;k<j;k++){
                    if(board[i][k]==0 &&noBlockHorizonta(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]&&noBlockHorizonta(i,k,j,board)&&!hasConflicted[i][k]){
                        //move
                        board[i][k]+=board[i][j];
                        showMoveAnimation(i,j,i,k);
                        board[i][j]=0;
                        //add
                        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 i=1;i<4;i++){
        for(var j=0;i<4;j++){
            if(board[i][j]!=0){
                for(var k=0;k<i;k++){
                    if(board[k][j]==0 &&noBlockVertical(i,j,k,board)){
                        //move
                        showMoveAnimaiton(i,j,k,j);
                        board[k][j]=board[i][j];
                        board[i][j]=0;
                        continue;   
                    }
                    else if(board[k][j]==board[i][j]&& noBlockVertical(i,j,k,board)){
                        //move
                        showMoveAnimaiton(i,j,k,j);
                        board[k][j]+=board[i][j];
                        board[i][j]=0;
                        continue;
                    }
                }
            }
        }
    }

    setTimeout('updateboardView()',200);
    return true;*/
    //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;
                        score+=board[k][j];
                        updatescore(score);
                        hasConflicted[k][j]=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 &&noBlockHorizonta(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]&&noBlockHorizonta(i,j,k,board)&& !hasConflicted[i][k]){
                        //move
                        board[i][k]+=board[i][j];
                        showMoveAnimation(i,j,i,k);
                        board[i][j]=0;
                        score+=board[i][k];
                        updatescore(score);
                        hasConflicted[i][k]=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);
                        board[k][j]+=board[i][j];
                        board[i][j]=0;
                        score+=board[k][j];
                        updatescore(score);
                        hasConflicted[k][j]=true;
                        continue;   
                    }
                }
            }
        }
    }

    setTimeout('updateboardView()',200);
    return true;
}

shownumberAnimation.js

function showNumberwithAnimation(i,j,number){
    var numbercell=$("#number-cell-"+i+"-"+j);
    numbercell.css("background-color",getNumberCellBgcolor(number));
    numbercell.css("color",getNumberCellColor(number));
    numbercell.text(rank(number));
    numbercell.animate(
        {
            width:cellSideLength,
            height:cellSideLength,
            top:getTop(i),
            left:getLeft(j)     
        },300);

}
function showMoveAnimation(fromi,fromj,tox,toy){
    var numbercell=$("#number-cell-"+fromi+"-"+fromj);
    numbercell.animate(
        {
            top:getTop(tox),
            left:getLeft(toy)
        }
    ,200);

}
function updatescore(score){
    $('#score').text(score);
}

support2048.js

documentWidth=window.screen.availWidth;
if(documentWidth>500){
        gridContainerWidth=500;
        cellSideLength=100;
        cellSpace=20;
    }else{
gridContainerWidth=0.92*documentWidth;
cellSideLength=0.18*documentWidth;
cellSpace=0.04*documentWidth;}
function getTop(i){
    return cellSpace+(cellSideLength+cellSpace)*i;
}
function getLeft(j){
    return cellSpace+(cellSideLength+cellSpace)*j;
}
function getNumberCellBgcolor(number){
    switch(number){
        case 2: return '#EEE9BF';break;
        case 4:return '#EEC900';break;
        case 8:return '#EEE9BF';break;
        case 16:return '#EE3A8C';break;
        case 32:return '#EEE9BF';break;
        case 64:return '#CDAD00';break;
        case 128:return '#EE1289';break;
        case 256:return '#AEEEEE';break;
        case 512:return '#8B0000';break;
    }
    return "#EEE9BF";
}
function getNumberCellColor(number){
    if(number==4){
        return '#EE1289';
    }
    return 'black';
}
function nospace(borad){
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            if(borad[i][j]==0)
                return false;
        }
    }
    return true;
}
function canMoveLeft(board){
    for(var i=0;i<4;i++){
        for(var j=1;j<=3;j++){
            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-1][j]==0 ||(board[i-1][j] == 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+1]==0 ||(board[i][j+1]==board[i][j])){
                return true;
            }
        }
    }
    return false;
}
function canMoveDown(board){
    for(var i=0;i<=3;i++){
        for(var j=0;j<3;j++){
            if(board[j+1][i]==0 ||(board[j+1][i]==board[j][i])){
                return true;
            }
        }
    }
    return false;
}
function noBlockHorizonta(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(canMoveDown(board)||canMoveLeft(board)||canMoveRight(board)||canMoveUp(board)){
        return false;
    }
    return true;
}
function rank(number){
switch(number){
        case 2: return '青铜';break;
        case 4:return '白银';break;
        case 8:return '黄金';break;
        case 16:return '白金';break;
        case 32:return '钻石';break;
        case 64:return '超凡大师';break;
        case 128:return '最强王者';break;

    }
    return "最强王者";
}