2048小游戏的实现（PC版）

游戏逻辑

游戏分为两类：一种是基于时间流逝的游戏，一种是基于玩家响应的游戏，2048属于后者，2048是基于用户在电脑上，监听用户按下的上下左右来进行一系列的逻辑，然后实现页面上的变化
keaibaobao

代码的实现

首先是页面的设计，需要有一个标题2048还有score，还有下面的移动方格，方格的底子可以直接写出来，但是由于有数字的格子是会变化的，则需要用js控制动态生成
实现动态生成的部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 theNumberCell=$('#number-cell-'+i+'-'+j);
            if(board[i][j]==0){
                theNumberCell.css('width','0px');
                theNumberCell.css('height','0px');
                theNumberCell.css('top',getPosTop(i,j)+50);
                theNumberCell.css('left',getPosLeft(i,j)+50);
            }
            else{
                theNumberCell.css('width','100px');
                theNumberCell.css('height','100px');
                theNumberCell.css('top',getPosTop(i,j));
                theNumberCell.css('left',getPosLeft(i,j));
                theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));
                theNumberCell.text(board[i][j]);                
            }
        }
    }
}
前端JavaScript

more >>