揭秘：如何制作一款网页版2048小游戏

其实揭秘：如何制作一款网页版2048小游戏的问题并不复杂，但是又很多的朋友都不太了解，因此呢，今天小编就来为大家分享揭秘：如何制作一款网页版2048小游戏的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

Game2048js文件：

(function(window, document, $) {

function Game2048(opt) {

var prefix = opt.prefix, len = opt.len, size = opt.size, margin = opt.margin;

var score = 0;

var winNum = 2048;

var isGameOver = true;

var board = new Board(len);

var view = new View(prefix, len, size, margin);

view.init();

board.onGenerate = function(e) {

view.addNum(e.x, e.y, e.num);

};

board.onMove = function(e) {

if (e.to.num >= winNum) {

isGameOver = true;

setTimeout(function() { view.win(); }, 300);

}

if (e.to.num >e.from.num) {

score += e.to.num;

view.updateScore(score);

}

view.move(e.from, e.to);

};

board.onMoveComplete = function(e) {

if (!board.canMove()) {

isGameOver = true;

setTimeout(function() { view.over(score); }, 300);

}

if (e.moved) {

setTimeout(function(){ board.generate(); }, 200);

}

};

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

if (isGameOver) {

return false;

}

switch (e.which) {

case 37: board.moveLeft(); break;

case 38: board.moveUp(); break;

case 39: board.moveRight(); break;

case 40: board.moveDown(); break;

}

});

function start() {

score = 0;

view.updateScore(0);

view.cleanNum();

board.init();

board.generate();

board.generate();

isGameOver = false;

}

$('#' + prefix + '_restart').click(start);

start();

};

// 数据处理

function Board(len) {

this.len = len;

this.arr = [];

}

Board.prototype = {

// 事件

onGenerate: function() {},

onMove: function() {},

onMoveComplete: function() {},

// 创建数组

init: function() {

for (var arr = [], x = 0, len = this.len; x< len; ++x) {

arr[x] = [];

for (var y = 0; y< len; ++y) {

arr[x][y] = 0;

}

}

this.arr = arr;

},

// 在随机位置增加一个随机数

generate: function() {

var empty = [];

for (var x = 0, arr = this.arr, len = arr.length; x< len; ++x) {

for (var y = 0; y< len; ++y) {

if (arr[x][y] === 0) {

empty.push({x: x, y: y});

}

}

}

if (empty.length< 1) {

return false;

}

var pos = empty[Math.floor((Math.random() * empty.length))];

this.arr[pos.x][pos.y] = Math.random()< 0.5 ? 2 : 4;

this.onGenerate({x: pos.x, y: pos.y, num: this.arr[pos.x][pos.y]});

},

// 左移

moveLeft: function() {

var canMove = false;

// 从上到下，从左到右

for (var x = 0, len = this.arr.length; x< len; ++x) {

for (var y = 0, arr = this.arr[x]; y< len; ++y) {

// 从 y + 1 位置开始，向右查找

for (var next = y + 1; next< len; ++next) {

// 如果 next 单元格是 0，找下一个不是吗 0 的单元格

if (arr[next] === 0) {

continue;

}

// 如果 y 数字是 0，则将 next 移动到 y 位置，然后将 y 减 1 重新查找

if (arr[y] === 0) {

arr[y] = arr[next];

this.onMove({from: {x: x, y: next, num: arr[next]}, to: {x: x, y: y, num: arr[y]}});

arr[next] = 0;

canMove = true;

--y;

// 如果 y 与 next 单元格数字相等，则将 next 移动并合并给 y

} else if (arr[y] === arr[next]) {

arr[y] += arr[next];

this.onMove({from: {x: x, y: next, num: arr[next]}, to: {x: x, y: y, num: arr[y]}});

arr[next] = 0;

canMove = true;

}

break;

}

}

}

this.onMoveComplete({moved: canMove});

},

moveRight: function() {

var moved = false;

for (var x = 0, len = this.arr.length; x< len; ++x) {

for (var y = len - 1, arr = this.arr[x]; y >= 0; --y) {

for (var prev = y - 1; prev >= 0; --prev) {

if (arr[prev] === 0) {

continue;

}

if (arr[y] === 0) {

arr[y] = arr[prev];

this.onMove({from: {x: x, y: prev, num: arr[prev]}, to: {x: x, y: y, num: arr[y]}});

arr[prev] = 0;

moved = true;

++y;

} else if (arr[y] === arr[prev]) {

arr[y] += arr[prev];

this.onMove({from: {x: x, y: prev, num: arr[prev]}, to: {x: x, y: y, num: arr[y]}});

arr[prev] = 0;

moved = true;

}

break;

}

}

}

this.onMoveComplete({moved: moved});

},

moveUp: function() {

var canMove = false;

for (var arr = this.arr, len = arr.length, y = 0; y< len; ++y) {

for (var x = 0; x< len; ++x) {

for (var next = x + 1; next< len; ++next) {

if (arr[next][y] === 0) {

continue;

}

if (arr[x][y] === 0) {

arr[x][y] = arr[next][y];

this.onMove({from: {x: next, y: y, num: arr[next][y]}, to: {x: x, y: y, num: arr[x][y]}});

arr[next][y] = 0;

canMove = true;

--x;

} else if (arr[x][y] === arr[next][y]) {

arr[x][y] += arr[next][y];

this.onMove({from: {x: next, y: y, num: arr[next][y]}, to: {x: x, y: y, num: arr[x][y]}});

arr[next][y] = 0;

canMove = true;

}

break;

}

}

}

this.onMoveComplete({moved: canMove});

},

moveDown: function() {

var canMove = false;

for (var arr = this.arr, len = arr.length, y = 0; y< len; ++y) {

for (var x = len - 1; x >= 0; --x) {

for (var prev = x - 1; prev >= 0; --prev) {

if (arr[prev][y] === 0) {

continue;

}

if (arr[x][y] === 0) {

arr[x][y] = arr[prev][y];

this.onMove({from: {x: prev, y: y, num: arr[prev][y]}, to: {x: x, y: y, num: arr[x][y]}});

arr[prev][y] = 0;

canMove = true;

++x;

} else if (arr[x][y] === arr[prev][y]) {

arr[x][y] += arr[prev][y];

this.onMove({from: {x: prev, y: y, num: arr[prev][y]}, to: {x: x, y: y, num: arr[x][y]}});

arr[prev][y] = 0;

canMove = true;

}

break;

}

}

}

this.onMoveComplete({moved: canMove});

},

canMove: function() {

for (var x = 0, arr = this.arr, len = arr.length; x< len; ++x) {

for (var y = 0; y< len; ++y) {

if (arr[x][y] === 0) {

return true;

}

var curr = arr[x][y], right = arr[x][y + 1];

var down = arr[x + 1] ? arr[x + 1][y] : null;

if (right === curr || down === curr) {

return true;

}

}

}

return false;

}

};

// 视图处理

function View(prefix, len, size, margin) {

this.prefix = prefix;

this.len = len; // 单元格单边的数量（实际数量 len * len）

this.size = size; // 每个单元格的边长

this.margin = margin; // 每个单元格的间距

this.score = $('#' + prefix + '_score');

this.container = $('#' + prefix + '_container');

var containerSize = len * size + margin * (len + 1);

this.container.css({width:containerSize , height: containerSize});

this.nums = {};

}

View.prototype = {

// 计算位置

getPos: function(n) {

return this.margin + n * (this.size + this.margin);

},

init: function() {

for (var x = 0, len = this.len; x< len; ++x) {

for (var y = 0; y< len; ++y) {

var $cell = $('

');

$cell.css({

width: this.size + 'px', height: this.size + 'px',

top: this.getPos(x), left: this.getPos(y)

}).appendTo(this.container);

}

}

},

addNum: function(x, y, num) {

var $num = $('