国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一個自制的2048小游戲(一)

lentrue / 2053人閱讀

摘要：導語本次將會從頭到尾講一個游戲的制作過程，中間也會穿插自己的理解一項目結構除了和文件外，分了，以及引入。我們將兩個方法寫在中是格子之間的距離，是一個小格子的寬度定位完成后我們進行的是數組的初始化，初始化為一個的二維數組，值為。

導語 
本次將會從頭到尾講一個2048游戲的制作過程，中間也會穿插自己的理解
一.項目結構

除了html和css文件外，分了main.js,support.js,showanimation.js，以及引入jquery。

html文件




    
    
    
    2048
    


    

        
我的2048

        NewGame
        
score:0

css文件

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    font-size:12px;
    line-height:120%;
    text-align:center;
    color:#333;
    padding:20px;
    font:12px/1.5 "微軟雅黑",tahoma,arial,"Hiragino Sans GB",宋體,sans-serif;
}
table{    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;
    font-weight:normal;
}
img{border:none;}
ol,ul{list-style:none;}
input, select,textarea{
    vertical-align:middle;
    outline:none;
}
textarea{resize:none;}
a{
    color:#333;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
/*清浮*/
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.clearfix{zoom:1}

/********************************************/
body{
    background:#978E81;
}
header{
    display:block;
    margin:0 auto;
    width:100%;     /*為了兼容移動端*/
    text-align:center;
}
header h1{
    font-family:Arial;
    font-size:30px;
    font-weight:bold;
}
header #newGameBtn{
    display: block;
    margin:10px auto;
    width:100px;
    padding:5px 10px;
    background-color:#8f7a66;
    font-family:Arial;
    color:white;
    border-radius:10px;
    text-decoration:none;
}
header #newGameBtn:hover{
    background-color:#9f8b77;
}
header p{
    font-family:Arial;
    font-size:25px;
    margin:10px auto;

}
#grid-container{
    width:460px;
    height:460px;
    padding:20px;
    margin:30px auto;
    background-color: #bbada0;
    border-radius:10px;
    position:relative;
}
.grid-cell{
    width:100px;
    height:100px;
    border-radius:12px;
    background-color:#ccc0b3;
    position:absolute;

}
.number-cell{
    border-radius:4px;
    font-family:Arial;
    font-weight:bold;
    font-size:60px;
    line-height:100px;
    text-align:center;
    position:absolute;
}
二.游戲邏輯循序漸進，初始化

首先毫無疑問，需要先初始化游戲，渲染方塊之類的。
我們聲明兩個變量。

var board=new Array();  //存儲游戲的數據
var score=0;    //得分

然后定義一個newGame函數,并且等document加載完后調用它

$(document).ready(function(){
    newGame();
})
function newGame(){
    //為移動端初始化寬度
    prepareForMobile();
    //初始化棋盤格
    init();
    //在隨機兩個格子生成數字
    generateOneNumber();
    generateOneNumber();
}

先忽略那個兼容移動端的，我們根據游戲的邏輯，在newGame里面寫了兩件事，一個是初始化，一個是隨機在格子中生成一個數字，一開始要有兩個，所以這個方法調用兩遍。下面是init里的內容

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),
                "left":getPosLeft(i,j)
            });
        }
    }
    //初始化board數組
    for(var i=0;i<4;i++){
        board[i]=new Array();
        for(var j=0;j<4;j++){
            board[i][j]=0;

        }
    }
    //有操作,更新界面
    updateBoardView();

    score=0;
    $("#score").text(score);
}

在init初始化里面，我們先做的是給16個背景小方塊，因為在css文件里面我們只寫了定位方式absolute。
通過遍歷得到每個格子，css()方法給他們設置定位。我們將getPosTop,getPosLeft兩個方法寫在support.js中

//20是格子之間的距離，100是一個小格子的寬度
function getPosTop(i,j){
    var top=20+i*(100+20);
    return top;
}
function getPosLeft(i,j){
    var left=20+j*(100+20);
    return left;
}

定位完成后我們進行的是board數組的初始化，初始化為一個4*4的二維數組，值為false。board初始化完成后我們則根據board來將游戲界面更新。因為后續我們會經常使用到根據board數組更新游戲畫面,所以將其寫成一個updateBoardView()方便調用

updateBoardView()函數
因為有注釋，所以簡單說一下。我們是動態加載有數字的方塊的，每次更新先將所有的數字方塊全部移除，在弄個循環創建它們，并且創建的同時用css設置樣式。設置樣式時先判斷這個位置的board是不是0,為零的話則將寬高設置為0，并將它們的top,left設置在背景方格的中間（這里是為了后面的animate動畫是從中間變化）。對于board中有值的，則需要多設置他們的background-color和color。最后將值顯示在html中，即theNumberCell.text(board[i][j])

//更新棋盤上顯示的方塊
function updateBoardView(){
    //如果有number-cell后先刪除
    $(".number-cell").remove();
    //遍歷格子，改變樣式
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            $("#grid-container").append("
")
            var theNumberCell=$("#number-cell-"+i+"-"+j);

            if(board[i][j]==0){
                theNumberCell.css({
                    "width":"0px",
                    "height":"0px",
                    "top":getPosTop(i,j)+50,/*這里是為了把它放中間，動畫才好看*/
                    "left":getPosLeft(i,j)+50
                });
            }else{
                theNumberCell.css({
                    "width":100+"px",
                    "height":100+"px,
                    "top":getPosTop(i,j),
                    "left":getPosLeft(i,j),
                    "background-color":getNumberBackgroundColor(board[i][j]),
                    "color":getNumberColor(board[i][j])
                });
                theNumberCell.text(board[i][j]);
            }
        }
        $(".number-cell").css({
            "line-height":cellSideLength+"px",
            "font-size":0.6*cellSideLength+"px"
        })
    }
}

數字方塊的背景色與前景色的獲取
我們將這兩個函數寫在support.js中,就使用了一個switch，簡單明了，不多解釋

function getNumberBackgroundColor(number){
    var color="black";
    switch(number){
        case 2:
            color="#eee4da";
            break;
        case 4:
            color="#ede0c8";
            break;
        case 8:
            color="#f2b179";
            break;
        case 16:
            color="#f59563";
            break;
        case 32:
            color="#f67c5f";
            break;
        case 64:
            color="#f65e3b";
            break;
        case 128:
            color="#edcf72";
            break;
        case 256:
            color="#edcc61";
            break;
        case 512:
            color="#9c0";
            break;
        case 1024:
            color="#33b5e5";
            break;
        case 2048:
            color="#09c";
            break;
    }
    return color;
}
function getNumberColor(number){
    if(number<=4){
        return "#776e50";
    }
    return "white";
}
三.初始化最后一步：generateOneNumber()

要想在格子上隨機生成一個數字，首先我們需要先確定還有空格子可以生成,沒有的話直接返回，所以先判斷

//先看有無空格
    if(nospace(board)){
        return false;
    }

將nospace(board)寫在support.js中

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;
}

接著要隨機生成一個坐標,并且判斷這個點是不是為空，不為空則繼續隨機生成。實在是找不到了，就遍歷格子，選第一個為空的格子

//隨機生成一個位置
    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]==0){
            break;
        }
        //重復
        var randx=parseInt(Math.floor(Math.random()*4));
        var 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;
                }
            }
        }
    }

然后隨機生成個2或4 var randNumber=Math.random()<0.65?2:4;
最后將這個數字格子用動畫表現出來，并更新board數組

    showNumberWithAnimation(randx,randy,randNumber);
    board[randx][randy]=randNumber;

最后，我們將showNumberWithAnimation()寫在showanimation.js中。
主要是通過jq的animate實現動畫效果。

function showNumberWithAnimation(i,j,randNumber){
    var numberCell=$("#number-cell-"+i+"-"+j);

    numberCell.css({
        "background-color":getNumberBackgroundColor(randNumber),
        "color":getNumberColor(randNumber)
    });
    
    numberCell.animate({
        width:100,
        height:100,
        top:getPosTop(i,j),
        left:getPosLeft(i,j)
    },50);
    numberCell.text(randNumber);
}

至此，我們的游戲的初始化就完成了，在瀏覽器里運行一下吧

因為一篇寫完的話太長，所以先寫到這里，后續的請看接下來的文章，謝謝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116505.html

相關文章

  • 一個自制的2048小游戲(一)

    摘要：導語本次將會從頭到尾講一個游戲的制作過程，中間也會穿插自己的理解一項目結構除了和文件外，分了，以及引入。我們將兩個方法寫在中是格子之間的距離，是一個小格子的寬度定位完成后我們進行的是數組的初始化，初始化為一個的二維數組，值為。 導語 本次將會從頭到尾講一個2048游戲的制作過程，中間也會穿插自己的理解 一.項目結構 除了html和css文件外，分了main.js,support.js,...

    CHENGKANG 評論0 收藏0

  • 一個自制的2048小游戲(一)

    摘要：導語本次將會從頭到尾講一個游戲的制作過程，中間也會穿插自己的理解一項目結構除了和文件外，分了，以及引入。我們將兩個方法寫在中是格子之間的距離，是一個小格子的寬度定位完成后我們進行的是數組的初始化，初始化為一個的二維數組，值為。 導語 本次將會從頭到尾講一個2048游戲的制作過程，中間也會穿插自己的理解 一.項目結構 除了html和css文件外，分了main.js,support.js,...

    alexnevsky 評論0 收藏0

  • 一個自制的2048小游戲（2）

    摘要：所以我們在全局寫一個鍵盤的事件監聽函數。一個是移動后應該立馬檢測游戲有沒有結束，如果四個方向都不能移動的話，游戲就應該了。 先聲明哈：我做的這個也是跟著被人學習的，寫文章是為了復習思路，還有鞏固一下。總而言之呢，就是為了多理解思路，多折騰代碼。 咳咳，上次我們已經將游戲的初始化全部完成了，包括游戲過程中需要的updataBoardView(); generateOneNumber();...

    dcr309duan 評論0 收藏0

  • 一個自制的2048小游戲（2）

    摘要：所以我們在全局寫一個鍵盤的事件監聽函數。一個是移動后應該立馬檢測游戲有沒有結束，如果四個方向都不能移動的話，游戲就應該了。 先聲明哈：我做的這個也是跟著被人學習的，寫文章是為了復習思路，還有鞏固一下。總而言之呢，就是為了多理解思路，多折騰代碼。 咳咳，上次我們已經將游戲的初始化全部完成了，包括游戲過程中需要的updataBoardView(); generateOneNumber();...

    zhangqh 評論0 收藏0

發表評論

0條評論

lentrue

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<