网页版《2048游戏》教程 - 游戏初始化

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

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

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

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

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

网页版《2048游戏》教程 - 游戏初始化,布布扣,bubuko.com