html:
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset = & # 34UTF-8 & # 34；& gt
& lttitle & gt2048游戏网页版
& ltstyle & gt
/*游戏棋盘*/
body { font-family:Arial；文本对齐:居中；}
。游戏{ margin:0 auto；/*边距-top:40px；*/text-align:居中；显示:内嵌-块；}
。游戏分数{ font-size:20px；边距:20px自动；}
。游戏容器{ background-color:# bbada 0；边框半径:10px位置:相对；}
。game-cell { border-radius:6px；背景色:# ccc0b3位置:绝对；}
。game-num { width:0px；高度:0px边框-半径:6px字体粗细:粗体；字体大小:40px颜色:# fff文本对齐:居中；位置:绝对；}
。game-num-2 {背景:# eee4da颜色:# 776e65}
。game-num-4 {背景:# ede0c8颜色:# 776e65}
。game-num-8 {背景:# f2b179}
。game-num-16 {背景:# f59563}
。game-num-32 {背景:# f 67 C5 f；}
。game-num-64 {背景:# f 65 e 3 b；}
。game-num-128 {背景:# edcf72字体大小:35px}
。game-num-256 {背景:# edcc61字体大小:35px}
。game-num-512 {背景:# 9c0字体大小:35px}
。game-num-1024 {背景:# 33b5e5字体大小:30px}
。游戏编号2048 {背景:# 09c字体大小:30px}
/*游戏结束*/
。游戏结束{宽度:100%；身高:100%；位置:绝对；边框半径:10px框大小:边框-框；z指数:1；显示:表格；背景:rgba(123，102，85，0.5)}
。游戏结束信息{ display:table-cell；垂直对齐:中间}
。游戏结束p { font-size:45px；颜色:# fff边距:20px自动；}
。游戏结束跨度{ cursor:pointer；背景色:rgba(103，82，65，0.6)；显示:块；边距:20px自动；宽度:180px填充:10px 10px字体大小:25px颜色:# f7f2e5边框半径:10px边框:1px solid # 978271过渡:所有. 2s}
。游戏结束跨度:hover { background-color:rgba(103，82，65，0.7)；颜色:#fff}
。游戏隐藏{显示:无；}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv id = & # 34游戏& # 34；class = & # 34游戏& # 34；& gt
& ltdiv class = & # 34游戏得分& # 34；& gt分数:
& ltdiv id = & # 34游戏_容器& # 34；class = & # 34游戏容器& # 34；& gt
& ltdiv id = & # 34游戏结束& # 34；class = & # 34游戏结束游戏隐藏& # 34；& gt
& ltdiv class = & # 34信息游戏& # 34；& gt
& ltdiv id = & # 34game _ over _ info & # 34& gt& lt/div & gt；
& ltspan id = & # 34游戏_重启& # 34；& gt重新开始
& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& lt脚本src = & # 34js/jquery-1 . 12 . 4 . min . js & # 34；& gt& lt/script & gt；
& lt脚本src = & # 34js/game 2048 . js & # 34；& gt& lt/script & gt；
& lt脚本& gt
game 2048({前缀:& # 39；游戏& # 39；，len: 4，size: 100，margin:20 })；
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；
Game2048js文件:
(函数(窗口，文档，$) {
功能游戏2048(可选){
var prefix = opt.prefix，len = opt.len，size = opt.size，margin = opt.margin
var分值= 0；
var winNum = 2048
var isGameOver = true
var板=新板(len)；
var view = new View(前缀、长度、大小、边距)；
view . init()；
board.onGenerate = function(e) {
view.addNum(e.x，e.y，e . num)；
};
board.onMove = function(e) {
如果(e . to . num & gt；= winNum) {
isGameOver = true
setTimeout(function(){ view . win()；}, 300);
}
如果(e . to . num & gt；e.from.num) {
score+= e . to . num；
view.updateScore(分数)；
}
view.move(e.from，e . to)；
};
board . onmovecomplete = function(e){
如果(！board.canMove()) {
isGameOver = true
setTimeout(function(){ view . over(score))；}, 300);
}
如果(移动){
setTimeout(function(){ board . generate()；}, 200);
}
};
$(文档)。按键(功能(e) {
if (isGameOver) {
返回false
}
开关(例如)
案例37:board . move left()；打破；
案例38:board . move up()；打破；
案例39:board . moveright()；打破；
案例四十:board . move down()；打破；
}
});
函数start() {
得分= 0；
view . update score(0)；
view . clean num()；
board . init()；
board . generate()；
board . generate()；
isGameOver = false
}
$('#'+前缀+& # 39；_重启& # 39；).点击(开始)；
start()；
};
//数据处理
功能板(透镜){
this.len = len
this . arr =[]；
}
Board.prototype = {
//事件
onGenerate: function() {}，
onMove: function() {}，
onMoveComplete: function() {}，
//创建一个数组
init:函数(){
for (var arr = []，x = 0，len = this.lenx & ltlen++x) {
arr[x]=[]；
for(var y = 0；y & ltlen++y) {
arr[x][y]= 0；
}
}
this.arr = arr
},
//在随机位置添加一个随机数。
生成:函数(){
var empty =[]；
for (var x = 0，arr = this.arr，len = arr.lengthx & ltlen++x) {
for(var y = 0；y & ltlen++y) {
if (arr[x][y] === 0) {
empty.push({x: x，y:y })；
}
}
}
if(empty . length & lt；1) {
返回false
}
var pos = empty[math . floor((math . random()* empty . length))]；
this . arr[pos . x][pos . y]= math . random()& lt；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 & ltlen++x) {
for (var y = 0，arr = this . arr[x]；y & ltlen++y) {
//从y+1位置开始，向右看。
for(var next = y+1；下一个& ltlen++下一步){
//如果下一个单元格为0，则查找下一个不为0的单元格。
if (arr[next] === 0) {
继续；
}
//如果Y数为0，则移动到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等于下一个单元格编号，则移动并合并到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
}
打破；
}
}
}
this . onmovecomplete({ moved:can move })；
},
moveRight: function() {
var moved = false
for (var x = 0，len = this . arr . length；x & ltlen++x) {
for (var y = len – 1，arr = this . arr[x]；y & gt= 0;- y) {
for(var prev = y-1；prev & gt= 0;-上一页){
if (arr[prev] === 0) {
继续；
}
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
}
打破；
}
}
}
this . onmovecomplete({ moved:moved })；
},
moveUp: function() {
var canMove = false
for (var arr = this.arr，len = arr.length，y = 0；y & ltlen++y) {
for(var x = 0；x & ltlen++x) {
for(var next = x+1；下一个& ltlen++下一步){
if (arr[next][y] === 0) {
继续；
}
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
}
打破；
}
}
}
this . onmovecomplete({ moved:can move })；
},
moveDown: function() {
var canMove = false
for (var arr = this.arr，len = arr.length，y = 0；y & ltlen++y) {
for(var x = len-1；x & gt= 0;- x) {
for(var prev = x-1；prev & gt= 0;-上一页){
if (arr[prev][y] === 0) {
继续；
}
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
}
打破；
}
}
}
this . onmovecomplete({ moved:can move })；
},
canMove: function() {
for (var x = 0，arr = this.arr，len = arr.lengthx & ltlen++x) {
for(var y = 0；y & ltlen++y) {
if (arr[x][y] === 0) {
返回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) {
返回true
}
}
}
返回false
}
};
//视图处理
函数视图(前缀、长度、大小、边距){
this.prefix =前缀；
this.len = len//一边的单元格数量(实际数量len * len)
this.size = size//每个单元格的边长
this.margin =保证金；//每个单元格的间距
this . score = $(& # 39；#'+前缀+& # 39；_ score & # 39);
this . container = $(& # 39；#'+前缀+& # 39；_ container & # 39);
var container size = len * size+margin *(len+1)；
this . container . CSS({ width:container size，height:container size })；
this . nums = { }；
}
View.prototype = {
//计算位置
getPos:函数(n) {
返回this . margin+n *(this . size+this . margin)；
},
init:函数(){
for (var x = 0，len = this.lenx & ltlen++x) {
for(var y = 0；y & ltlen++y) {
var $ cell = $(& # 39；& ltdiv class = & # 34'+this . prefix+& # 39；-cell & # 34；& gt& lt/div & gt；');
$cell.css({
宽度:this . size+& # 39；px & # 39，身高:this . size+& # 39；px & # 39,
上:this.getPos(x)，左:this.getPos(y)
}).appendTo(this . container)；
}
}
},
addNum: function(x，y，num) {
var $ num = $(& # 39；& ltdiv class = & # 34'+this . prefix+& # 39；-num & # 39；+this . prefix+& # 39；-num-& # 39；+num+& # 39；"& gt');
$num.text(数字)。css({
top:this . get pos(x)+parse int(this . size/2)，
left:this . get pos(y)+parse int(this . size/2)
}).appendTo(this.container)。动画({
宽度:this . size+& # 39；px & # 39,
身高:this . size+& # 39；px & # 39,
line height:this . size+& # 39；px & # 39,
top: this.getPos(x)，
左:this.getPos(y)
}, 100);
this . nums[x+& # 39；-'+y]= $ num；
},
移动:函数(从，到){
var from index = from . x+& # 39；-'+ from.y，toIndex = to . x+& # 39；-'+to . y；
var clean = this . nums[toIndex]；
this . nums[toIndex]= this . nums[from index]；
删除this . nums[from index]；
var prefix = this . prefix+& # 39；-num-& # 39；；
var pos = {top: this.getPos(to.x)，left:this . get pos(to . y)}；
this.nums[toIndex]。完成()。animate(pos，200，function() {
if(to . num & gt；from.num) {
clean . remove()；
$(这个)。文本(收件人编号)。removeClass(前缀+ from.num)。addClass(前缀+to . num)；
}
});
},
updateScore:函数(分数){
this.score.text(分数)；
},
win: function() {
$('#'+this . prefix+& # 39；_ over _ info & # 39).html(& # 39；& ltp & gt您赢了。');
$('#'+this . prefix+& # 39；_ over & # 39).remove class(this . prefix+& # 39；-隐藏& # 39；);
},
超过:功能(分数){
$('#'+this . prefix+& # 39；_ over _ info & # 39).html(& # 39；& ltp & gt这个分数
$('#'+this . prefix+& # 39；_ over & # 39).remove class(this . prefix+& # 39；-隐藏& # 39；);
},
cleanNum: function() {
this . nums = { }；
$('#'+this . prefix+& # 39；_ over & # 39).addClass(this . prefix+& # 39；-隐藏& # 39；);
$('。'+this . prefix+& # 39；-num & # 39；).移除()；
}
};
窗口[& # 39；游戏2048 & # 39；]= game 2048；
})(窗口、文档、jQuery)；
然后你必须自己下载一个jQuery文件。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
