2048初体验

发表于 2015-03-09 更新于 2021-01-07 分类于 game

每个人小时候都喜欢玩游戏吧，要说我自己吧，小的时候，俄罗斯方块在我手里能玩一天都不眨眼睛，梦想着自己也能做一个游戏出来。当然，慢慢长大了以后，学习过编程，发现其实写游戏也不是那么简单的，但是，是要你想做，没不是没有可能。

相信很多朋友都玩过2048吧，我是玩过很多过版本的2048的，后来这网上看过些资料，发现其实2048这个游戏其实实现实现起来很简单，当然我本人现在是做web开发的，还没接触过android的开发或者是ios的开发，所以我打算弄一个网页版的2048，当然这也不是我自己弄的，我之前也是看了一个慕课网的一个教学视频,里面有详细的教学视频，因为我也是一个游戏的初学者，所以还是想说一说这个2048是怎么做的，试玩一下，博客下方附下载地址。

环境

做一个网页版的2048还是很简单的，但是也还是需要一些工具的，下面我列出来这个工具。

现代浏览器(必须要是一个比较新的浏览器，旧版ie可能兼容性不太好，推荐使用最新版的firefox或者chrome)。
代码编辑器(这个我推荐使用WebStorm，或者sublime text，当然其他的编辑器也没问题，直接使用windows自带的记事本也是ok的，只是没有那么方便而已)。

开始

如果是使用webstorm这样的ide，可以新建一个空白的工程，其他的编辑器的话，就的自己手动新建文件夹或者文件了，新建一个文件夹，在文件夹里面再新建5个文件：
2048.css
index.html
main2048.js
showanimation2048.js
support2048.js
。下面是我的2048的项目文件截图。

目录说明

2048.css是控制游戏的基本样式。
index.html游戏的载体。
main2048.js游戏的主逻辑。
showanimation2048.js游戏的动画小伙实现。
support2048.js支持游戏的其他方法。

游戏逻辑说明

全局变量

board 将初始化成一个2维数组，用于记录每一个格子内的得分。
score 用于记录总得分。
hasConflicted 记录当前格子内这一次移动中是否有过碰撞。

主逻辑函数

newgame() 新建一个游戏（初始化游戏数据，在随机两个格子生成数字）。
init() 初始化游戏数据。
generateOneNumber() 随机位置内生成2或者4。
updateBoardView() 更新游戏面板的数据显示。
isgameover() 判断当前游戏是否结束。
gameover() 结束游戏。
moveLeft() 向左移动，成功返回true，否则返回false。
moveRight() 向右移动，成功返回true，否则返回false。
moveUp() 向上移动，成功返回true，否则返回false。
moveDown() 向下移动，成功返回true，否则返回false。

主要游戏逻辑就这些，还有一个主要的东西就是监听键盘的keydowm事件，来决定按下什么键时执行上下左右移动。

其他的一些支持性的函数都放在了support2048.js中了，而一些动画效果的方法都放在showanimation2048.js中。大概就说这么多。如果想了解得更多的话，请自行下载源码。

源码下载

源代码我已经放在我的github中了，下载请点击我的2048