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

引言

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

游戏初始化

1、初始化棋盘格

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

$(function () {
    newgame();
});

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

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

var board = new Array();
function init() {
    //i表示4乘4的格子中的行
		for (var i = 0; i < 4; i++) {
    		board[i] = new Array();
    		//j表示4乘4的格子中的列
    		for (var j = 0; j < 4; j++) {
    			//将每个格子的值初始化为0
    			board[i][j] = 0;
    			//通过双重遍历获取每个格子元素
    			var gridCell = $("#grid-cell-" + i + "-" + j);
        		//通过getPosTop()方法设置每个格子距顶端的距离
    			gridCell.css("top", getPosTop(i, j));
    			//通过getPosLeft()方法设置每个格子距左端的距离
        		gridCell.css("left", getPosLeft(i, j));
        }
    }
}

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

2、初始化数字格

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

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);
            //如果棋盘格的值为0的话,设置数字格为高宽都为0
            if (board[i][j] == 0) {
                numberCell.css("width", "0px");
                numberCell.css("height", "0px");
                numberCell.css("top", getPosTop(i, j) + 100);
                numberCell.css("left", getPosLeft(i, j) + 100);
            } 
            //如果棋盘格的值不为0的话,设置数字格为高宽为75并设置背景色和前景色及数字值
            else {
                numberCell.css("width", "100px");
                numberCell.css("height", "100px");
                numberCell.css("top", getPosTop(i, j));
                numberCell.css("left", getPosLeft(i, j));
                numberCell.css("background-color", getNumberBackgroundColor(board[i][j]));
                numberCell.css("color", getNumberColor(board[i][j]));
                numberCell.text(board[i][j]);
                 }
            }
    }
    //设置数字值的字体样式
    $(".number-cell").css("line-height", "100px");
    $(".number-cell").css("font-size", "60px");
}

    我们还需要在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工具来查看是否初始化成功。

3、随机生成数字

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

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

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

    第二步随机一个格子

function generateOneNumber() {
    //随机一个x坐标的位置
    var randx = parseInt(Math.floor(Math.random() * 4));
    //随机一个y坐标的位置
    var randy = parseInt(Math.floor(Math.random() * 4));
    //定义一个死循环,完成生成随机空格子
    while (true) {
        //如果当前格子的值为0,满足条件
    	if (board[randx][randy] == 0) {
            break;
        }
    	//否则重新随机一个位置
        var randx = parseInt(Math.floor(Math.random() * 4));
        var randy = parseInt(Math.floor(Math.random() * 4));
    }
}

    第三步随机一个数字

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()方法来设置数字的前景色

function getNumberBackgroundColor(number) {
    switch (number) {
        case 2:return "#eee4da";break;
        case 4:return "#ede0c8";break;
        case 8:return "#f2b179";break;
        case 16:return "#f59563";break;
        case 32:return "#f67c5f";break;
        case 64:return "#f65e3b";break;
        case 128:return "#edcf72";break;
        case 256:return "#edcc61";break;
        case 512:return "#9c0";break;
        case 1024:return "#33b5e5";break;
        case 2048:return "#09c";break;
        case 4096:return "#a6c";break;
        case 8192:return "#93c";break;
    }
}

function getNumberColor(number) {
    if (number <= 4) {
        return "#776e65"
    }
    return "white";
}

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

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

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

结语

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