文档章节

JS开发HTML5游戏《神奇的六边形》(三)

青瓷引擎
 青瓷引擎
发布于 2015/11/16 18:01
字数 1170
阅读 48
收藏 1

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

点击这里可进入游戏体验)

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

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

10. 形状预制的实现

11.显示出3个形状

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


十. 形状预制的实现

本章节我们进行形状的绘制实现,如下图:

1. 在UIRoot/pool节点下,创建一空的Node节点,设置如下图

  • 定位在父亲的中心点

  • 大小为200*100

  • pivot设置为:(0.5, 0.5)

  • 本对象需要可以交互(需要被拖放),勾选Interactive。并设置碰撞盒类型为Rectangle(正方形),按图示设置大小(碰撞盒大小会比节点实际大小更大)

2.在Scripts/ui创建文件BlocksUI.js

/**
  * 绘制一个形状
  */
 var BlocksUI = qc.defineBehaviour('qc.tetris.BlocksUI', qc.Behaviour, function() {
     var self = this;
 
     // 格子的预置,一个形状下有多个格子
     self.blockPrefab = null;
 
     // 下属所有的格子
     self._blocks = {};
 }, {
     blockPrefab: qc.Serializer.PREFAB
 });
 
 Object.defineProperties(BlocksUI.prototype, {
     /**
      * 关联的数据
      */
     data: {
         get: function() { return this._data; },
         set: function(v) {
             this._data = v;
             this.redraw();
         }
     },
 
     /**
      * 第几个?
      */
     index: {
         get: function() {
             return this.gameObject.parent.getChildIndex(this.gameObject);
         }
     }
 });
 
 /**
  * 初始化
  */
 BlocksUI.prototype.awake = function() {
     // 点击时的偏移量
     var self = this;
     self.offsetY = self.game.device.desktop ? 0 : 50;
 };
 
 /**
  * 重新绘制区块
  */
 BlocksUI.prototype.redraw = function() {
     var self = this;
     var frame = qc.Tetris.IMAGES[self.data.value];
     self.data.list.forEach(function(pos) {
         var x = pos[0], y = pos[1];
         var block = self.game.add.clone(self.blockPrefab, self.gameObject);
         block.find('block').frame = frame + '.png';
         block.name = x + '_' + y;
         self._blocks[qc.Tetris.makePos(x, y)] = block;
     });
     self.reset();
 };
 
 /**
  * 重设区块大小和排列下属格子的位置
  */
 BlocksUI.prototype.reset = function() {
     var self = this, o = self.gameObject;
     for (var pos in self._blocks) {
         var p = qc.Tetris.readPos(pos);
         var pt = qc.Tetris.board.toWorld(p, qc.Tetris.POOL_DISTANCE_NORMAL);
         var block = self._blocks[pos];
         block.anchoredX = pt.x;
         block.anchoredY = pt.y;
     }
 };


  • 本脚本根据形状的数据,动态创建出格子并显示出来

  • blockPrefab为格子的预置,后续步骤创建

  • 形状的大小会比棋盘中显示小,因此计算格子的屏幕坐标时,指明了常量:qc.Tetris.POOL_DISTANCE_NORMAL

  • 在初始化时,设置了非PC模式下需要做偏移为50。(在手机上拖拽时方式被手指完全挡住,从而看不清形状)

3. 修改Tetris.js,加入POOL_DISTANCE_NORMAL配置:

window.Tetris = qc.Tetris = {
     // 棋盘的大小(半径)
     SIZE: 4,
 
     // 棋盘中,每个格子的宽度和高度
     BLOCK_W: 61,
     BLOCK_H: 67,
 
     // 没有点击时,格子之间的距离
     POOL_DISTANCE_NORMAL: 45,
 
     ...


4.在上述Blocks节点下,创建空的节点Node,名字修改为block2,属性为:

· 相对于父亲居中显示

· pivot=(0.5, 0.5)

5. 在block2节点下,创建Image节点,名字修改为shadow,属性设置如下:

  • 相对于父亲居中显示

  • pivot=(0.5, 0.5)

  • 大小为60*65

  • 使用ui图集

6. 在block2节点下,创建Image节点,名字修改为block,属性设置如下:

      

    • 相对于父亲居中显示

    • pivot=(0.5, 0.5)

    • 大小为40*45

    • 使用ui图集
      至此,你的场景应该是:

 

 

 7. 将block2节点拖入到目录Assets/prefab,创建预置。然后将节点从场景中删除。

 

8. 将BlocksUI.js挂载到Blocks节点,并设置blockPrefab的值为上步骤创建的预制。设置完成后,将此节点拖入Assets/prefab目录,创建预置。

9. 至此,形状的预置创建完毕了

十一. 显示出3个形状

1. 在Scripts/ui创建文件:Pool.js,绘制3个形状。

var s = qc.Serializer;
 
 /**
  * 3个形状的绘制
  */
 var Pool = qc.defineBehaviour('qc.tetris.Pool', qc.Behaviour, function() {
     var self = this;
 
     /**
      * 形状的预置
      */ 
     self.blocksPrefab = null;
 
     /**
      * 记录下面3个形状的实例
      */
     self.shapes = [];
 }, {
     blocksPrefab: s.PREFAB
 });
 
 /**
  * 初始化处理
  */
 Pool.prototype.awake = function() {
     var self = this;
     self.redraw();
 };
 
 /**
  * 绘制3个形状
  */
 Pool.prototype.redraw = function() {
     var self = this;
 
     // 先干掉旧的形状数据
     for (var i = 0; i < self.shapes.length; i++) {
         self.shapes[i].destroy();
     }
     self.shapes = [];
 
     // 创建3个新的形状
     for (i = 0; i < 3; i++) {
         self.add(i);
     }
     self.resize();
 };
 
 /**
  * 调整位置
  */
 Pool.prototype.resize = function() {
     var self = this, o = self.gameObject;
 
     // 计算X方向的偏移
     var offset = o.width * (0.5 - 0.165);
     for (var i = 0; i < 3; i++) {
         var child = self.shapes[i];
         if (!child) return;
         child.anchoredX = offset * (i - 1);
         child.anchoredY = 0;
     }
 };
 
 /**
  * 添加一个形状
  */
 Pool.prototype.add = function(index) {
     var self = this;
 
     var o = self.game.add.clone(self.blocksPrefab, self.gameObject);
     var c = o.getScript('qc.tetris.BlocksUI');
     c.data = qc.Tetris.Shapes.pool[index];
     self.shapes[index] = o;
 };
 
 /**
  * 删除一个形状
  */
 Pool.prototype.remove = function(index) {
     var o = this.shapes[index];
     o.destroyImmediately();
     this.shapes.splice(index, 1);
 };


整个代码逻辑比较简单,根据3个形状的数据进行绘制。请参考注释进行理解。

 

2. 将此脚本挂载到UIRoot/pool节点,关联blocksPrefab属性:

3. 运行测试下效果,3个形状正确显示了:

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

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


© 著作权归作者所有

共有 人打赏支持
青瓷引擎
粉丝 2
博文 10
码字总数 13265
作品 1
厦门
私信 提问
18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景。为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎。而现...

oschina
2014/04/17
26.6K
13
25 个超棒的 HTML5 & JavaScript 游戏引擎开发库

就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议。游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期,游戏开发者通常从草图做...

oschina
2015/02/26
11.4K
44
娱乐开发两不误,10 大开源游戏框架推荐

从角色扮演游戏到即时策略游戏,从冒险解谜游戏到动作射击游戏,甚至是只有一兆大小的迷你游戏,都有起着核心作用的技术组成部分。本文将介绍十大好用的开源游戏引擎和框架,希望能给你的游戏...

编辑部的故事
2017/10/25
0
19
20 款免费的 JavaScript 游戏引擎

使用 HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任...

oschina
2014/02/20
17.5K
13
2014 不能错过的 10+ 个 JavaScript 游戏引擎

在过去几年里,JavaScript 变得越来越流行,现在被认为是 Github 上面最受欢迎的编程语言。JavaScript 和 HTML5 这个流行的组合和 HTML5 的最新发展催生了各种 JavaScript 游戏引擎。这个组合...

oschina
2014/03/20
6.4K
13

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot引入第三方jar包或本地jar包的处理方式

在开发过程中有时会用到maven仓库里没有的jar包或者本地的jar包,这时没办法通过pom直接引入,那么该怎么解决呢 一般有两种方法 - 第一种是将本地jar包安装在本地maven库 - 第二种是将本地j...

独钓渔
今天
2
0
五、MyBatis缓存

一、MyBatis缓存介绍 缓存的使用可以明显的加快访问数据速度,提升程序处理性能,生活和工作中,使用缓存的地方很多。在开发过程中,从前端-->后端-->数据库等都涉及到缓存。MyBatis作为数据...

yangjianzhou
今天
2
0
最近研究如何加速UI界面开发,有点感觉了

最近在开发JFinal学院的JBolt开发平台,后端没啥说的,做各种极简使用的封装,开发者上手直接使用。 JBolt开发平台包含常用的用户、角色、权限、字典、全局配置、缓存、增删改查完整模块、电...

山东-小木
今天
3
0
《月亮与六便士》的读后感作文3000字

《月亮与六便士》的读后感作文3000字: 看完英国作家威廉.萨默塞特.毛姆所著《月亮与六便士》(李继宏译),第一疑问就是全书即没提到“月亮”,也没提到“六便士”。那这书名又与内容有什么...

原创小博客
昨天
2
0
微信网页授权获取用户信息(ThinkPHP5)+ 微信发送客服消息(一)

以thinkphp5为实例,创建控制器 class Kf extends Controller { /** * [protected description]微信公众号appid * @var [type] */ protected $appid = "xxxxxxxxxxxxxxx"; /** * [protected......

半缘修道半缘君丶
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部