网页版2048实战--游戏初始化

妖狐艹你老母 2022-06-10 13:42 378阅读 0赞

# 引言 #

接上一篇博客，本篇博客将会继续介绍网页版2048的游戏初始化部分。

# 游戏初始化 #

## 1、初始化棋盘格 ##

我们在main.js文件中，创建newgame()方法用于开始新的游戏。而开始新游戏需要完成两件事情，一是初始化棋盘格，一个是在随机两个格子生成两个数字。

$(function () {
        newgame();
    });
    
    function newgame() {
        //初始化棋盘格
        init();
        //在随机两个格子生成数字
        generateOneNumber();
        generateOneNumber();
    }

我们通过编写init()方法来完成棋盘格的初始化工作。棋盘格是一个4乘4的16方格，所以我们需要创建一个二位数组来表示。

完成以上步骤，我们就将棋盘格的初始化工作完成了

## 2、初始化数字格 ##

仅仅初始化棋盘格是不够的，我们还需要一个4乘4的格子来显示数字。而用来显示数字的格子应该在棋盘格的基础上的，所以初始化数字格的updateBoardView()应该在初始化棋盘格的init()方法最后来执行。

我们还需要在2048.css样式文件中，为number-cell数字格设置一些样式。

.number-cell {
        border-radius: 6px;
    
        font-family: Arial;
        font-weight: bold;
        font-size: 60px;
        line-height: 100px;
        text-align: center;
    
        position: absolute;
    }

数字格被初始化完毕之后，我们在页面效果上是看不到的。所以，我们要使用火狐浏览器的Firebug工具来查看是否初始化成功。

![SouthEast][]

## 3、随机生成数字 ##

数字格初始化完成之后，我们需要做的就是在两个随机的数字格中生成两个随机的数字即可。这个需求我利用generateOneNumber()方法来完成，完成这个方法需要进行四步完成：

第一步判断当前的格子是否是空的，如果不为空则返回false，否则返回true

function generateOneNumber() {
        if (nospace(board)) {
            return false;
        }
        return true;
    }

第二步随机一个格子

第三步随机一个数字

function generateOneNumber() {
    		//随机一个数字
        var randNumber = Math.random() < 0.5 ? 2 : 4;
    }

第四步在随机格子中显示随机数字

function generateOneNumber() {
    		//在随机位置显示随机数字
        board[randx][randy] = randNumber;
        //实现随机数字显示的动画
        ShowNumberWithAnimation(randx, randy, randNumber);
    }

## 4、初始化基础的逻辑 ##

在初始化棋盘格和数字格时，我们使用了getPosTop()方法和getPosLeft()方法来完成距顶端和距左端的距离设置

function getPosTop(i, j) {
        return 20 + i * 120;
    }
    function getPosLeft(i, j) {
    return 20 + j * 120;
    }

在初始化数字格时，我们使用了getNumberBackgroundColor()方法来设置数字的背景色，使用getNumberColor()方法来设置数字的前景色

在生成随机数字时，我们使用nospace()方法来判断当前格子是否为空。

## 5、初始化动画逻辑 ##

在生成随机数字时，我们使用ShowNumberWithAnimation()方法来完成随机数字显示的动画逻辑。

function ShowNumberWithAnimation(i, j, randNumber) {
        //获取当前的数字格
    	var numberCell = $("#number-cell-" + i + "-" + j);
    	//设置当前的数字格的背景色和前景色及数字值
        numberCell.css("background-color", getNumberBackgroundColor(randNumber));
        numberCell.css("color", getNumberColor(randNumber));
        numberCell.text(randNumber);
        //设置当前的数字格的显示动画
        numberCell.animate({
            width: "100px",
            height: "100px",
            top: getPosTop(i, j),
            left: getPosLeft(i, j)
        }, 50);
    }

# 结语 #

今天的介绍就到这里了，在下一篇博客中会介绍游戏的逻辑，请关注后续的更新~

[SouthEast]: /images/20220610/2cd85e2ca0ab4227a8fbfadb1bc0a9d6.png