网页版《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); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。