Web版2048游戏制作

写在前面

        工作之余参与了《慕课网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。

游戏交互

优化

       这部分主要处理一些遗留的bug以及进行一些性能上的优化，包括随机数的生成。使用viewport添加移动端支持,处理移动端的移动效果等。

       关于viewport的使用可参考:http://1.liangtao.sinaapp.com/?p=628

架设2048

       这部分主要就是将如何将本地的2048放到网络上,架设的方法很多(说白了也就是放在公网服务器上)。这里我是放在新浪SAE上的,访问地址如下:http://lcorejianli.sinaapp.com/ 访问有点慢-_-!

最后

       本来是想有时间进一步将之做成可记录分数,积分排行的,无奈搁置了。有兴趣的朋友可以自己头脑风暴进行一些更加有意思的创意(数字换成图片,绚丽的滑动,加分效果等)。

       Github地址:https://github.com/Kiritor/2048