前言
为什么闲着没事要做一个2048呢？还不是360前端星计划（2018春招实习生）要我做的。然后就花了几天时间做了一个2048小游戏，兼容到pc端和部分移动端（设备有限，有的移动浏览器真的没兼容到或者是真的不想做兼容了）。仅供大家看看就好哈。
github地址： https://github.com/GDUTxxZ/20...
在线预览：http://47.94.199.75/index.html （这个网址暂时有效。。以后点进去不知道又是我的什么实验作品。）
游戏介绍
我做完给朋友看之后发现不是每个人都玩过这个游戏。简单介绍一下游戏内容好了。
获胜条件： 拼凑出一个2048方块
失败条件： 当前没有可用方块，并且所有方块都不可以和临近方块合并
代码结构
index.html:
<div id="bg"></div><!-- 背景 -->
<div id="main"></div><!-- 实体 -->
<div id="alert">
<span>游戏失败</span>
<button>再来一局</button>
<div>
#bg为背景图，也就是空的灰色方块，因为方块移动的时候不能露出底下的空白
#main为实体，也就是游戏中我们看见的包含数字的方块
#alert为提示框，一开始display:none,当游戏胜利或者结束的时候，display:block
#alert span 失败消息或者胜利消息
css的话，主要是关于动画元素的设置：
base.css
#main .item {
transition: all .3s ease-out;
-moz-transition: all .3s ease-out; /* Firefox 4 */
-webkit-transition: all .3s ease-out; /* Safari 和 Chrome */
-o-transition: all .3s ease-out; /* Opera */
left: 0px;
top: 0px;
}
js的话主要是两块，util.js负责了一些外围函数（重要的是关于移动端滑动事件的封装）的处理，2048.js就是页面整体逻辑
util.js // 关于移动端滑动事件的封装
const touchManager = (function () {
let start = []
let end = []
let timeStamp = 0
let manager = {}
manager.touchstart = function (event) { // 记录下开始位置
event.stopPropagation()
timeStamp = event.timeStamp // 获取点击时的时间
let target = event.targetTouches[0]
start = [target.pageX, target.pageY]
end = [target.pageX, target.pageY]
console.log('start')
}
manager.touchmove = function (event) { // 记录下移动位置
event.stopPropagation()
event.preventDefault()
let target = event.targetTouches[0]
end = [target.pageX, target.pageY]
console.log('move')
}
manager.touchend = function (event) { // 处理开始位置和移动位置给出滑动方向
event.stopPropagation()
event.preventDefault()
const abs = Math.abs
let time = event.timeStamp - timeStamp // 获取滑动操作使用的时间
let moveX = end[0] - start[0]
let moveY = end[1] - start[1]
if (time > 500 || (abs(moveX) < 50 && abs(moveY) < 50)) { // 移动距离不够或时间太长就不认为是滑动
return false
} else {
if (abs(moveX) >= abs(moveY)) { // 横向移动距离较长
console.log(moveX)
return moveX > 0 ? 'right' : 'left'
} else { // 纵向移动距离较长
console.log(moveY)
return moveY > 0 ? 'down' : 'up'
}
}
}
return manager
})()
2048.js 主要由以下几个数据结构和函数构成：
数据结构：
let data = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]] // 初始化
let emptyList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] // 当前没有元素的格子
const container = document.querySelector('#main') // 操作实体
const bg = document.querySelector('#bg') // 背景板
const alert = document.querySelector('#alert') // 提醒框
const alertText = alert.querySelector('span') // 提醒框里的文字容器
const baseSize = parseInt(getDomStyle(container).width) // 基础画板的size
let gameOver = false // 标志游戏是否结束
const animateTime = 300 // 单位ms， 动画时长这个地方保存了大量dom元素的引用，为了以后操作的时候减少获取dom的性能消耗
另外还有以下几个函数：
main // 主程序
resize(el) // 调整元素宽高一致
createElement() // 在emptyList里找1-2个下标出来，给data添加新的元素，取值为{2， 4}
paint(el, data) // 用data在el里画出每一个格子
animate(move, arrow) // 传入一个移动队列，和移动方向‘left’代表横向，‘top’代表纵向
isWin(data) isLost(data, emptyList) // 判断游戏胜负
win() lost() // 显示胜负消息
replay() // 再来一局
moveHandle = {...} // 封装了计算移动结果的函数
然后再从主程序看函数的流程：
function main () { // 主程序
// 调整背景和实体宽高
resize(container)
resize(bg)
// 初始化背景和实体元素
paint(bg, data)
// 创建1-2个初始元素
createNewElement()
paint(container, data)
// 绑定事件监听器
addEvent(window, 'keydown', function (event) { // 按键监听
if (gameOver) {
return
}
let arrow = keyCodeMap[event.keyCode]
switch (arrow) {
case 'left':
case 'up':
case 'right':
case 'down': {
moveHandle.move(arrow)
break
}
}
})
addEvent(alert.querySelector('button'), 'click', replay) // 再玩一次
addEvent(container, 'touchstart', touchManager.touchstart)
addEvent(container, 'touchmove', touchManager.touchmove)
addEvent(container, 'touchend', function (event) {
let arrow = touchManager.touchend(event)
if (arrow) {
moveHandle.move(arrow)
}
})
}
也即是：1.初始化 2. 绑定事件监听
然后就是如何计算出移动结果，以下用一个左滑计算(moveHandle.moveleft)为例子
moveleft: function () { // 向左移动
// 计算移动后的data
// 要移动的元素的移动坐标
// 没有元素的格子
let newData = copy(data) // 获取当前数据的一个copy
let move = [] // 方块移动队列
emptyList = []
for (let i = 0; i < 4; i++) { // 一行行处理
let newList = [] // 新行
let oldList = data[i]
for (let j = 0; j < 4; j++) { // 找到所有非0单元
let value = newData[i][j]
if (value !== 0) {
newList.push(value)
}
}
if (newList.length > 1) { // 合并同类项
for (let j = 0, len = newList.length; j < len - 1; j++) {
if (newList[j] === newList[j + 1]) {
newList[j] *= 2
newList[j + 1] = 0
j++
}
}
newList = newList.filter(item => item !== 0) // 过滤掉上一步产生的0
}
for (let j = newList.length; j < 4; j++) { // 补全数列尾部的0
emptyList.push(i * 4 + j)
newList.push(0)
}
newData[i] = newList
// 产生每位元素移动的坐标
for (let j = 0, k = 0,tag = false; j < 4; j++) { // j为旧元素位置，k为移动到的位置
if (newList[k] === 0) { // 如果没有要移动的位置了
break
} else if (oldList[j] === newList[k]) { // j移动到k位置
if (j !== k) {
move.push({
start: [i, j],
end: [i, k]
})
}
k++
} else if (oldList[j] === newList[k] / 2) { // 两个元素合成k位置的元素
move.push({
start: [i, j],
end: [i, k]
})
if (tag) {
k++
}
tag = !tag
}
}
}
return {
newData: newData,
move: move
}
}
这个函数最后产出的是 newData 计算后的 data， move 方块的移动队列，形如[{start: [x1, y1], end: [x2, y2]}, ... ]
然后怎么利用这个计算结果呢，看moveHandle.move.(moveHandle中有三个私有变量，moving锁定句柄，防止动画过程中用户再次滑动，win是否胜利，lost时候失败)
move: function (arrow) { // arrow = 移动方向
if (this.moving) { // 如果正在进行动画，返回移动失败
return false
}
let result = this['move' + arrow]() // 获取移动计算后的结果
let newData = result.newData // 移动后的数据矩阵
let move = result.move // 移动元素列表
// 根据移动元素列表判断该操作是否有效
if (move.length === 0) { // 没有可以移动的元素，则无效
console.log('本次移动无效')
return false
}
// 进行0.3秒动画
data = newData // 修改全局数据矩阵
createNewElement() // 创造新元素
// 判断游戏胜负
this.win = isWin(newData)
if (!this.win) {
this.lost = isLost(newData, emptyList)
}
this.moving = true // 锁定该事件句柄
setTimeout((function (self) {
animate(move, arrow)
return function () {
// 足够时间后
self.moving = false // 终止动画
paint(container, data) // 重绘视图
// 判断游戏胜负
if (self.win) { // 赢得了游戏
win()
} else if (self.lost) {
lost()
}
}
})(this), animateTime)
}
我自认为我的注释内容还是挺多的，应该还是能看懂。这次分享就到这了。欢迎评论区留言讨论。发现有什么bug也尽可能跟我说把。
BUG
目前已知的是：
1.微信内置浏览器的转码问题：
这个因为我懒得整一个域名，所以它为了安全就会进行转码，没法游戏。也就不修复了。。只是个小玩具。2.ios长按会选取文字而且无法取消：
这个问题我已经做了一定的修复，但是我没复现这个问题的方法，也没再处理3.夸克浏览器自带手势导致左滑右滑会进行系统行为：
没想到办法，如果有人有办法请告诉我，谢谢。
