架構屬於您自己的WebApp-2048遊戲

我利用了週六,週日兩天的時間,完完整整地寫出一個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 "最強王者";
}

其實最重要的是分析→設計→實現這三個步驟想明白了,就迎刃而解了。

本文作者: By:羅堅元 http://blog.csdn.net/sunyuan_software

發佈了29 篇原創文章 · 獲贊 15 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章