大致介绍

终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点，基本的思路都差不多。

这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

思路

这个小游戏可以抽象化分为3层

◆最底下的一层是基本的样式(可见的)

◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作(不可见的)

◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的

我们通过最底下的一层显示最基本的12个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式

基本结构与样式

基本的结构和样式都挺简单，直接看代码

结构：

样式：

body{

background-color: #008694;

font: 12px/20px "黑体" ,arial;

}

#header {

display: block;

margin: 0 auto;

width: 500px;

text-align: center;

}

#header h1 {

font-family: Arial;

font-size: 40px;

font-weight: bold;

}

#timer {

z-index: 4;

font-size: 24px;

color: #fa3c3c;

font-weight: 700;

text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)

}

#container{

width: 302px;

height: 402px;

margin: 50px auto;

background-color: #55d769;

border: 5px solid #000;

position: relative;

}

.grid {

width: 100px;

height: 100px;

background-color: #fff;

border: 1px solid #000;

position: absolute;

}

.block {

width: 100px;

height: 100px;

border: 1px solid #000;

font-family: Arial;

font-weight: bold;

font-size: 20px;

color: #fff;

text-align: center;

position: absolute;

}

.coBlock{

background-color: #000;

}

.gameover {

display: block;

margin: 0 auto;

width: 300px;

text-align: center;

vertical-align: middle;

position: absolute;

}

.gameover p {

font-family: Arial;

font-size: 50px;

color: white;

margin: 50px auto;

margin-top: 150px;

}

.gameover span {

font-family: Arial;

font-size: 50px;

color: white;

margin: 50px auto;

}

.restartGame {

display: block;

margin: 20px auto;

width: 180px;

padding: 10px 10px;

background-color: #8f7a66;

font-family: Arial;

font-size: 30px;

color: white;

border-radius: 10px;

text-decoration: none;

}

.restartGame:hover {

background-color: #9f8b77;

}

这里并没有设置每个格子的位置，位置由js代码来设置，以及第二层的二维数组、第三层的显示层都由js来设置，这里和 jQuery编写网页版2048小游戏并没有什么大的区别

代码：

function init(){

timerRan = 0.000;

keyDown = true;

for(var i=0;i<4;i++){

board[i] = [];

for(var j=0;j<3;j++){

board[i][j] = [];

var grid = $('#grid-'+ i +'-'+ j);

grid.css({

'top':getPosTop(i,j),

'left':getPosLeft(i,j)

});

$('#container').append('

var block = $('#block-'+ i +'-'+ j);

block.css({

'top':getPosTop(i,j),

'left':getPosLeft(i,j)

});

board[i][j] = 0;

}

}

function getPosTop(i,j){

return i*100;

}

function getPosLeft(i,j){

return j*100;

}

初始化

游戏开始时，要在每一行随机的位置显示一个黑色的方块，并且在最下面的那一行的黑色方块上要有提示信息

代码：

for(var i=0;i<4;i++){

var randj = parseInt(Math.floor(Math.random() * 3));

if(i >0 && board[i-1][randj] == 1){

randj = parseInt(Math.floor(Math.random() * 3));

}

$('#block-'+ i +'-'+ randj).addClass('coBlock');

board[i][randj] = 1;

}

$('#block-3-0').text('按J开始游戏');

$('#block-3-1').text('按K开始游戏');

$('#block-3-2').text('按L开始游戏');

基本操作

我们通过switch循环，来根据用户不同的输入进行不同的操作

代码：

$(document).keydown(function(event) {

switch(event.keyCode){

case 74:

if(board[3][0] == 1 && keyDown){

timeRan();

clearText();

moveDown();

}else{

isgameover();

}

break;

case 75:

if(board[3][1] == 1 && keyDown){

timeRan();

clearText();

moveDown();

}else{

isgameover();

}

break;

case 76:

if(board[3][2] == 1 && keyDown){

timeRan();

clearText();

moveDown();

}else{

isgameover();

}

break;

}

});

在这里设置 keyDown 这个全局变量的目的是为了防止用户在游戏结束时，继续按键。

timeRan()这个函数是显示游戏时间的

代码：

function timeRan(){

clearTimeout(timer);

timerRan += 0.001;

$('#timer').text(timerRan.toString().slice(0,5));

timer = setTimeout(function(){

timeRan();

},1);

}

clearText()这个函数是在游戏开始后，将最下面一行的提示信息去掉

代码：

function clearText(){

$("#block-3-0").text("");

$("#block-3-1").text("");

$("#block-3-2").text("");

}

moveDown()这个函数是方块移动的最主要函数，因为方块要向下移动，所以我们要从最下面开始遍历二维数组，如果该格子是黑色的并且是最下面一行的，就只是简单的把该格子的颜色变回白色，如果该格子是黑色的并且是第一行至第三行的，这个格子变为白色，并且它的正下方的一个格子变为黑色，最后，在第一行的随机位置上显示一个黑色的格子

代码：

function moveDown(){

for(var i=3;i>=0;i--){

for(var j=2;j>=0;j--){

if(board[i][j] == 1){

if(i == 3){

$('#block-'+ i +'-'+ j).removeClass('coBlock');

board[i][j] = 0;

}else{

$('#block-'+ i +'-'+ j).removeClass('coBlock');

board[i][j] = 0;

$('#block-'+ (i+1) +'-'+ j).addClass('coBlock');

board[i+1][j] = 1;

}

}

}

}

var randj = parseInt(Math.floor(Math.random() * 3));

$('#block-0-'+ randj).addClass('coBlock');

board[0][randj] = 1;

}

isgameover()是显示游戏结束样式的函数，比较简单

代码：

function isgameover(){

keyDown = false;

clearTimeout(timer);

$('#container').append('

');

var gameover = $("#gameover");

gameover.css("width", "300px");

gameover.css("height", "400px");

gameover.css("background-color", "rgba(0, 0, 0, 0.5)");

}

function restartGame(){

$('#timer').text('0.000');

$('#gameover').remove();

$('.block').remove();

init();

}

总结

这个小游戏，如果学会了之前的 jQuery编写网页版2048小游戏，就会觉得这个挺简单的，基本的思想和方法都大同小异，如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！