写在前面
工作之余参与了《慕课网2048游戏制作》的学习视频,视频断断续续看完了,游戏也制作成功了。因为其他的事情也没来的及总结,一拖时间也就过去了,整理磁盘的时候发现了2048源码,思考一下还是将之push到github上了(后面贴出),也顺便写篇总结,回顾一下,同时也谢谢liuyubobobo老师的授课。
不过源码在手,不运行下玩玩,怎么说的过去呢,哈哈!下面是游戏截图。
大图是PC端运行的效果,小图则是在iphone5s上的运行效果(Chrome浏览器debug,具体如何做参考文章:http://1.liangtao.sinaapp.com/?p=628)
怎么样,效果不错吧,接下来我会一一回顾2048游戏的制作。
游戏架构
首先在开始制作游戏之前,我们需要知道游戏的逻辑是什么。以便于我们选取什么技术,考虑游戏架构的问题。本2048游戏采用面向过程的设计(读者有兴趣可以改为面向对象的)。2048游戏是基于用户响应的游戏,而且比较的简单,使用到的技术有:
- UI - HTML/CSS:定制游戏UI界面.
- JavaScript/jQuery:游戏主逻辑.
游戏架构如下图:
典型的MVC模式,2048游戏比较的简单,这里也没有采用面向对象的设计,主数据直接可以放入游戏主逻辑就行了,而且需要的数据也不是非常的复杂:
/**
* @Description:main,js
* @Author:LCore
*/
//4*4格子
var board = new Array();
var score = 0; //得分记录
var hasConflicted = new Array(); //记录棋盘格每个格子是否冲突
var startX,
startY,
endX,
endY; //触控支持
//移动方向定义
var direction = {
left: 1,
up: 2,
down: 3,
right: 4
};
游戏主数据定义完成之后,即是构建游戏界面,即是初始化棋盘格。也就是如下界面:
这里涉及到前端css+html,就不贴代码了。
游戏逻辑
游戏逻辑这块是整个游戏制作的核心部分,处理好整个游戏的逻辑之后基本上游戏整个的雏形就也行出来了(除开一些交互效果和BUG)。包括游戏的规则、初始化的逻辑、移动的逻辑(是否能够移动，如何移动,移动多少)、游戏结束的逻辑、棋盘更新的逻辑。
之后由于要实现上述的游戏逻辑,会形成一些支撑函数support.js。
游戏交互
处理完游戏的逻辑之后,一个游戏雏形也就出来了,不过此时的游戏还比较的生硬,不够动态。需要添加一些游戏交互效果包括随机数动画,移动动画、加分效果动画。最终形成animation.js。
优化
这部分主要处理一些遗留的bug以及进行一些性能上的优化，包括随机数的生成。使用viewport添加移动端支持,处理移动端的移动效果等。
关于viewport的使用可参考:http://1.liangtao.sinaapp.com/?p=628
架设2048
这部分主要就是将如何将本地的2048放到网络上,架设的方法很多(说白了也就是放在公网服务器上)。这里我是放在新浪SAE上的,访问地址如下:http://lcorejianli.sinaapp.com/
访问有点慢-_-!
最后
本来是想有时间进一步将之做成可记录分数,积分排行的,无奈搁置了。有兴趣的朋友可以自己头脑风暴进行一些更加有意思的创意(数字换成图片,绚丽的滑动,加分效果等)。
Github地址:https://github.com/Kiritor/2048