青瓷引擎

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

 

近期出现一款魔性的消除类HTML5游戏《神奇的六边形》,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏。

 (点击图片可进入游戏体验)

因内容太多,为方便大家阅读,所以分成四部分来讲解。

本文为第一部分,主要包括:

1. 功能分析

2. 创建工程与场景

3. 玩家分数管理

4. 棋盘设计与实现

5. 屏幕布局

若要一次性查看所有文档,也可点击这里

 

功能分析

首先分析游戏的功能点、算法和数据,然后依此制订代码组织结构。如下图:

主要功能点

  1. 棋盘的数据结构与绘制
  2. 3个形状的生成
  3. 形状拖拽填入棋盘
  4. 行消除判定与死亡判定
  5. 各种表现,例如消除动画、加分动画等

代码结构

将游戏逻辑(例如棋盘数据结构、死亡判定等)和界面逻辑分开,分别置于logic和ui界面。所有的UI界面交给UIManager脚本统一维护管理。

二. 创建工程与场景

创建工程Tetris和空的主场景Main,设置如下:

本工程中,画布背景(background)设置为透明

游戏入口与游戏初始化

在Scripts目录下创建文件:Tetris.js。代码如下:

 1  /**
 2      * 游戏入口
 3      */
 4     window.Tetris = qc.Tetris = {
 5         // 所有的操作指令集合
 6         operation: {}
 7     };
 8 
 9     // 游戏逻辑初始化
10     qc.initGame = function(game) {
11         // 将游戏实例记录下来,便于访问
12         Tetris.game = game;
13 
14         // 帧率显示为60帧(满帧)
15         game.time.frameRate = 60;
16     };

 

 设置此脚本为入口脚本:


此脚本首先定义了名字空间,将全局的数据都记录在qc.Tetris。
游戏入口中,记录了game的实例并将帧率限定为60帧(默认在手机下为30帧)


三. 玩家分数管理

  1. 创建脚本:Scripts/logic/Score.js:

     1  /**
     2   * 维护分数信息
     3   */
     4  var Score = qc.Tetris.Score = function() {
     5      var self = this;
     6      self._current = 0;
     7      self._best = 0;
     8 
     9      // 将本地数据读取出来
    10      var game = qc.Tetris.game;
    11      var current = game.storage.get('current'),
    12          best = game.storage.get('best');
    13      if (current) self._current = current;    
    14      if (best) self._best = best;
    15  };
    16  Score.prototype = {};
    17  Score.prototype.constructor = Score;
    18 
    19  Object.defineProperties(Score.prototype, {
    20      current: {
    21          get: function() { return this._current; },
    22          set: function(v) {
    23              this._current = v;
    24              if (this.best < v) this.best = v;
    25          }
    26      },
    27 
    28      best: {
    29          get: function() { return this._best; },
    30          set: function(v) {
    31              this._best = v;
    32              var storage = qc.Tetris.game.storage;
    33              storage.set('best', v);
    34              storage.save();
    35          }
    36      }
    37  });

     

    Score类维护了两个数据:current(当前玩家的分数)、best(玩家的历史最高分)

  2. 实例化Score类
    打开Tetris.js脚本,在initGame方法中,加入代码:

     1  qc.initGame = function(game) {
     2      // 将游戏实例记录下来,便于访问
     3      Tetris.game = game;
     4 
     5      // 帧率显示为60帧(满帧)
     6      game.time.frameRate = 60;
     7 
     8      // 初始化分数信息
     9      Tetris.score = new qc.Tetris.Score();
    10  };

     

 

四. 棋盘设计与实现

棋盘为一边长为5的正六变形,为了方便计算,我们如下设定棋盘的坐标系(下文称为:格子逻辑坐标):

原点在六边形中心点,半径为4。

  1. 修改Tetris.js文件,增加棋盘的配置信息:

     1  window.Tetris = qc.Tetris = {
     2      // 棋盘的大小(半径)
     3      SIZE: 4,
     4 
     5      // 棋盘中,每个格子的宽度和高度
     6      BLOCK_W: 61,
     7      BLOCK_H: 67,
     8 
     9      // 所有的操作指令集合
    10      operation: {}
    11  };

     

    棋盘格子的大小 = 格子图片的大小,后续导入资源后可以看到其大小为61*67。

  2. 在Scripts/logic下创建文件Board.js,维护棋盘的数据,代码如下:

     1  var Board = qc.Tetris.Board = function() {
     2      var self = this,
     3          size = qc.Tetris.SIZE,
     4          len = qc.Tetris.BLOCK_H;
     5 
     6      // 构建用来转换格子坐标的矩阵
     7      var m = self.m = new qc.Matrix();
     8      m.a = len;
     9      m.c = len / 2;
    10      m.d = len * (Math.sqrt(3) / 2);
    11 
    12      // 初始化棋盘数据
    13      self.data = {};
    14      for (var i = -size; i <= size; i++) {
    15          for (var j = -size; j <= size; j++) {
    16              // 这些格子落在六边形外,忽略掉
    17              if (i * j > 0 && Math.abs(i + j) > size) continue;
    18              if (i * j < 0 && (Math.abs(i) > size || Math.abs(j) > size)) continue;
    19 
    20              // 计算格子的坐标和对应屏幕上的偏移
    21              var pos = Tetris.makePos(i, j);
    22              var pt = self.toWorld(new qc.Point(i, j));
    23              self.data[pos] = {
    24                  value: 0,
    25                  x: pt.x,
    26                  y: pt.y
    27              };
    28          }
    29      }
    30  };
    31  Board.prototype = {};
    32  Board.prototype.constructor = Board;
    33 
    34  Object.defineProperties(Board.prototype, {
    35      /**
    36       * @property {boolean} die - 当前是否已经死亡了
    37       * @readonly
    38       */ 
    39      die: {
    40          get: function() {
    41              // TODO: 等待实现
    42          }
    43      }
    44  });
    45 
    46  /**
    47   * 清空棋盘
    48   */
    49  Board.prototype.clear = function() {
    50      for (var pos in this.data) {
    51          this.data[pos].value = 0;
    52      }
    53  };
    54 
    55  /**
    56   * 重新开始游戏
    57   */
    58  Board.prototype.restart = function() {
    59      this.clear();
    60  };
    61 
    62  // 判定形状可以放进来不
    63  // pos: 目标逻辑坐标
    64  // list: 形状的信息
    65  Board.prototype.checkPutIn = function(pos, list) {
    66      // TODO: 等待实现
    67  };
    68 
    69  // 把某个形状放进来
    70  Board.prototype.putIn = function(pos, list, value) {
    71      // TODO: 等待实现
    72  };
    73 
    74  // 根据格子的逻辑坐标,算出所在的屏幕坐标
    75  // distance: 两个格子中心点之间的距离
    76  Board.prototype.toWorld = function(p, distance) {
    77      if (!distance)
    78          return this.m.apply(p);
    79 
    80      var m = new qc.Matrix();
    81      m.a = distance;
    82      m.c = distance * 0.5;
    83      m.d = distance * (Math.sqrt(3) * 0.5);
    84      return m.apply(p);
    85  };
    86 
    87  // 根据格子的屏幕坐标,反算格子的逻辑坐标
    88  Board.prototype.toLocal = function(p) {
    89      return this.m.applyInverse(p);
    90  };

     

  3. 修改Tetris.js,在qc.initGame方法中,实例化本对象:

     1  qc.initGame = function(game) {
     2      // 将游戏实例记录下来,便于访问
     3      Tetris.game = game;
     4 
     5      // 帧率显示为60帧(满帧)
     6      game.time.frameRate = 60;
     7 
     8      // 初始化分数信息
     9      Tetris.score = new qc.Tetris.Score();
    10 
    11      // 构建棋盘对象
    12      Tetris.board = new qc.Tetris.Board();
    13  };

     

    同时,在本文件中实现两个函数:makePos和readPos:

     1  // 构建坐标
     2  window.Tetris.makePos = function(x, y) {
     3      return x + '_' + y;
     4  };
     5 
     6  // 获取坐标
     7  window.Tetris.readPos = function(pos) {
     8      var arr = pos.split('_');
     9      return new qc.Point(arr[0]*1, arr[1]*1);
    10  };

     

五. 屏幕布局

在美术设计时,以640*960分辨率(iPhone4)进行设计,其他分辨率的屏幕需要自适应。如下图:




  • 整个界面分为标题栏(Top)、棋盘(Board)、3个形状(Shape)
    • Top:高度在iPhone4上为130。这里有两个信息:当前分数与历史最高分数
    • Board:棋盘,其大小为600*580
    • Shape:3个形状,大小为600*230,距离底部20
  • 自适应方案:
    • 以 640*960为基准,等比缩放,确保所有内容都能全部显示
    • 当分辨率比较瘦长时(即Height/Width > 960/640)时,Board和Shape保持和底部位置不变(方便单手操作)。Top高度自动增加
    • 当分辨率比较宽时(即Height/Width < 960/640)时,Board和Shape保持居中,两边留白

导入资源

  1. 新建文件夹:Assets/atlas/ui@atlas,将以下文件拖入并打包图集(图片请在示例工程中查看)
    blue.png、cyan.png、gray.png、green.png、lightyellow.png、red.png、shadow.png、white.png、yellow.png
    darkblue.png、darkcyan.png、darkgreen.png、darklightyellow.png、darkred.png、darkyellow.png等,具体请参考示例工程
    格子在没有数据时,显示gray.png。其他形状的格子颜色,有6种(blue、cyan、green、lightyellow、yellow、red)

  2. 将以下文件拖入文件夹Assets/raw(raw目录下的资源都不会被打包,例如图片直接原样保留,适用于css样式表指定资源)
    blue.png、cyan.png、gray.png、green.png、lightyellow.png、red.png、yellow.png等,具体请参考示例工程,各图片的用途在后续中会说明。

界面布局

      1. 创建UIRoot,并设置Reference Resolution(参考分辨率)为 640*960,Manual Type为Expand

         

         简单的理解:设置了以后,就可以认为屏幕的宽度>=640,高度>=960

2. 创建棋盘。棋盘大部分情况下是“静态”的,只是在有新的形状放入时才会变化。如果棋盘的每个格子作为UIImage进行贴图,则每帧都需要重绘几十个格子图片,对渲染效率会有所影响。这里我们适用DOM方案,里面每个格子使用div进行绘制。因此创建一个DOM节点,设置其大小为:600*580,同时由于棋盘距离底部的位置固定,因此在布局上:水平居中、垂直距离底部250,自身中心点在底部中心位置。如下图:

3. 添加一个Node节点,挂载3个形状。Node大小为 600*230,距离底部20。如下图:

4. 创建DOM节点显示历史最高分(不常变化,因此不用UIText,使用Dom更高效)。本节点大小为200*60,距离屏幕右边20,顶部20:

5. 创建DOM节点显示当前分(不常变化,因此不用UIText,使用Dom更高效)。本节点大小为200*80,水平居中,顶部顶部29:

 

下一篇:JS开发HTML5游戏《神奇的六边形》(二)

posted on 2015-11-11 17:28  青瓷引擎  阅读(10047)  评论(9编辑  收藏  举报