下面我给大家分享一下如何制作网页版2048小游戏。

!DOCTYPE html

html

头

元字符集='UTF-8'

title网页版2048游戏/标题

风格

/* 游戏板*/

正文{font-family:Arial;text-align:center;}

.game{margin:0 auto;/*margin-top:40px;*/text-align:center;display:inline-block;}

.game-score{font-size:20px;margin:20px auto;}

.游戏容器{背景颜色：#bbada0;边框半径：10px;position:relative;}

.game-cell{边框半径：6px;背景颜色：#ccc0b3;position:absolute;}

.game-num{width:0px;height:0px;border-radius:6px;font-weight:bold;font-size:40px;color:#fff;text-align:center;position:absolute;}

.game-num-2{background:#eee4da;color:#776e65;}

.game-num-4{background:#ede0c8;color:#776e65;}

.game-num-8{background:#f2b179;}

.game-num-16{background:#f59563;}

.game-num-32{background:#f67c5f;}

.game-num-64{background:#f65e3b;}

.game-num-128{background:#edcf72;font-size:35px;}

.game-num-256{background:#edcc61;font-size:35px;}

.game-num-512{背景：#9c0;字体大小：35px;}

.game-num-1024{background:#33b5e5;font-size:30px;}

.game-num-2048{background:#09c;font-size:30px;}

/*游戏结束*/

.游戏结束{width:100%;height:100%;position:absolute;border-radius:10px;box-sizing:border-box;z-index:1;display:table;background:rgba(123,102,85,0.5)}

.game-over-info{display:table-cell;vertical-align:middle}

.游戏结束p{font-size:45px;color:#fff;margin:20px auto;}

.游戏结束跨度{cursor:pointer;background-color:rgba(103,82,65,0.6);display:block;margin:20px auto;width:180px;padding:10px 10px;font-size:25px;color:#f7f2 e5;border-radius :10px;边框：1px实心#978271;transition:all 。 2秒}

.游戏结束span:hover{背景颜色：rgba(103,82,65,0.7);color:#fff}

.game-隐藏{display:none;}

/风格

/头

身体

div id='游戏' 类='游戏'

div class='game-score' 分数：span id='game_score'0/span/div

div id='game_container' class='game-container'

div id='game_over' class='game-over game-hide'

div class='游戏结束信息'

div id='game_over_info'/div

span id='game_restart'重新启动/span

/div

/div

/div

/div

脚本src='js/jquery-1.12.4.min.js'/script

脚本src='js/Game2048.js'/script

脚本

Game2048({prefix: '游戏', len: 4, size: 100, margin: 20});

/脚本

/身体

/html

Game2048js 文件：

（函数（窗口，文档，$）{

函数Game2048(opt) {

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

变量分数=0；

var winNum=2048;

var isGameOver=true;

var board=new Board(len);

var view=new View(前缀、长度、大小、边距);

视图.init();

board.onGenerate=函数(e) {

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

};

board.onMove=函数(e) {

if (e.to.num=winNum) {

isGameOver=true;

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

}

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

分数+=e.to.num;

view.updateScore(分数);

}

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

};

board.onMoveComplete=函数(e) {

if (!board.canMove()) {

isGameOver=true;

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

}

if (e.moved) {

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

}

};

$(文档).keydown(函数(e) {

如果（isGameOver）{

返回假；

}

开关（e.which）{

案例37: board.moveLeft();休息；

案例38: board.moveUp();休息；

案例39: board.moveRight();休息；

案例40: board.moveDown();休息；

}

});

函数开始（）{

分数=0；

view.updateScore(0);

view.cleanNum();

板.init();

board.generate();

board.generate();

isGameOver=false;

}

$('#' + 前缀+ '_restart').click(start);

开始（）;

};

//数据处理

功能板（len）{

this.len=len;

this.arr=[];

}

Board.prototype={

//事件

onGenerate: 函数（）{}，

onMove: 函数() {},

onMoveComplete: 函数（）{}，

//创建数组

init: 函数() {

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

arr[x]=[];

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

arr[x][y]=0;

}

}

这个.arr=arr;

},

//在随机位置添加随机数

生成：函数（）{

var 空=[];

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) {

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

}

}

}

if (空。长度1) {

返回假；

}

var pos=空[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: 函数() {

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) {

//如果下一个单元格为0，则查找下一个不为0的单元格

if (arr[下一个]===0) {

继续；

}

//如果y 数为0，则移动到y 位置的下一个位置，然后将y 减1 并再次搜索

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

arr[y]=arr[下一个];

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

arr[下一个]=0;

可以移动=真；

--y；

//如果y 等于下一个单元格编号，则移动下一个并将其合并到y 中

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

arr[y] +=arr[下一个];

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

arr[下一个]=0;

可以移动=真；

}

休息；

}

}

}

this.onMoveComplete({moved: canMove});

},

moveRight: 函数() {

var 移动=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[上一个]===0) {

继续；

}

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

arr[y]=arr[上一个];

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

arr[上一个]=0;

移动=真；

++y；

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

arr[y] +=arr[上一个];

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

arr[上一个]=0;

移动=真；

}

休息；

}

}

}

this.onMoveComplete({moved: 移动});

},

moveUp: 函数() {

var canMove=false;

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

for (var x=0; x 长度； ++x) {

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

if (arr[下一个][y]===0) {

继续；

}

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

arr[x][y]=arr[下一个][y];

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

arr[下一个][y]=0;

可以移动=真；

--x；

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

arr[x][y] +=arr[下一个][y];

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

arr[下一个][y]=0;

可以移动=真；

}

休息；

}

}

}

this.onMoveComplete({moved: canMove});

},

moveDown: 函数() {

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[上一个][y]===0) {

继续；

}

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

arr[x][y]=arr[上一个][y];

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

arr[上一个][y]=0;

可以移动=真；

++x；

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

arr[x][y] +=arr[上一个][y];

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

arr[上一个][y]=0;

可以移动=真；

}

休息；

}

}

}

this.onMoveComplete({moved: canMove});

},

canMove: 函数() {

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) {

返回真；

}

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

var down=arr[x + 1] ？ arr[x + 1][y] : 空；

if (右===curr || 下===curr) {

返回真；

}

}

}

返回假；

}

};

//视图处理

函数视图（前缀，长度，大小，边距）{

this.prefix=前缀；

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

this.size=大小； //每个单元格的边长

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

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

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

var 容器大小=len * 大小+ 边距* (len + 1);

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

this.nums={};

}

View.prototype={

//计算位置

getPos: 函数（n）{

返回this.margin + n * (this.size + this.margin);

},

init: 函数() {

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

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

var $cell=$('div class='' + this.prefix + '-cell'/div');

$cell.css({

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

顶部： this.getPos(x), 左侧： this.getPos(y)

}).appendTo(this.container);

}

}

},

addNum: 函数（x，y，num）{

var $num=$('div class='' + this.prefix + '-num' + this.prefix + '-num-' + num + ' '');

$num.text(num).css({

top: this.getPos(x) + parseInt(this.size/2),

left: this.getPos(y) + parseInt(this.size/2)

}).appendTo(this.container).animate({

width: this.size + 'px',

height: this.size + 'px',

lineHeight: this.size + 'px',

top: this.getPos(x),

left: this.getPos(y)

}, 100);

this.nums[x + '-' + y]=$num;

},

move: 函数（从，到）{

var fromIndex=from.x + '-' + from.y, toIndex=to.x + '-' + to.y;

var clean=this.nums[toIndex];

this.nums[toIndex]=this.nums[fromIndex];

删除this.nums[fromIndex];

var prefix=this.prefix + '-num-';

var pos={top: this.getPos(to.x), left: this.getPos(to.y)};

this.nums[toIndex].finish().animate(pos, 200, function() {

if (to.num from.num) {

清理.删除();

$(this).text(to.num).removeClass(prefix + from.num).addClass(prefix + to.num);

}

});

},

updateScore: 函数（分数）{

this.score.text(分数);

},

win: 函数() {

$('#' + this.prefix + '_over_info').html('pYou won/p');

$('#' + this.prefix + '_over').removeClass(this.prefix + '-hide');

},

over: 函数（分数）{

$('#' + this.prefix + '_over_info').html('pthis 分数/pp' + 分数+ '/p');

$('#' + this.prefix + '_over').removeClass(this.prefix + '-hide');

},

cleanNum: 函数() {

this.nums={};

$('#' + this.prefix + '_over').addClass(this.prefix + '-hide');

$('.' + this.prefix + '-num').remove();

}

};

窗口['Game2048']=Game2048;