myHex-master.zip

  • tianez
    了解作者
  • JavaScript
    开发工具
  • 503KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2021-03-09 16:44
    上传日期
如果没错的话,六边形游戏的鼻祖应该是这个 hex-frvr,原作者开发用的是 pixi 游戏引擎,本着快速开发的理念,本游戏采用 cocos creator,UI 延用 hex-frvr。学习过程中,有借鉴各路实现。此源码仅供学习使用,谢谢。
myHex-master.zip
内容介绍
# 六边形开发教程 如果没错的话,六边形游戏的鼻祖应该是这个 [hex-frvr](http://hex.frvr.com),原作者开发用的是 [pixi](http://www.pixijs.com/) 游戏引擎,本着快速开发的理念,本游戏采用 cocos creator,UI 延用 [hex-frvr](http://hex.frvr.com)。学习过程中,有借鉴各路实现。此源码仅供学习使用,谢谢。 ## 预览 ![](./doc/home.png) ## 功能介绍 六边形游戏本质是俄罗斯方块,理解这个对接下来的开发会有很大的帮助。 本游戏实现功能如下: - [x] 六边形棋盘绘制、方块随机生成 - [x] 方块能否落入棋盘的判定 - [x] 方块消除与游戏结束的判定 - [x] 各种动画效果 - [x] 游戏计分 ## cocos creator 在讲游戏开发思路前,建议先了解 cocos creator - [文档](http://docs.cocos.com/creator/manual/zh/) - [API](http://docs.cocos.com/creator/api/zh/) 必须了解的 API 有: - [Game](http://docs.cocos.com/creator/api/zh/classes/Game.html) - [Canvas](http://docs.cocos.com/creator/api/zh/classes/Canvas.html) - [Scene](http://docs.cocos.com/creator/api/zh/classes/Scene.html) - [Node](http://docs.cocos.com/creator/api/zh/classes/Node.html) - [Component](http://docs.cocos.com/creator/api/zh/classes/Component.html) - [Sprite](http://docs.cocos.com/creator/api/zh/classes/Sprite.html) - [Texture2D](http://docs.cocos.com/creator/api/zh/classes/Texture2D.html) - [Director](http://docs.cocos.com/creator/api/zh/classes/Director.html) - [loader](http://docs.cocos.com/creator/api/zh/classes/loader.html) - [Event](http://docs.cocos.com/creator/api/zh/classes/Event.html) - [Touch](http://docs.cocos.com/creator/api/zh/classes/Touch.html) - [Action](http://docs.cocos.com/creator/api/zh/classes/Action.html) - [Vec2](http://docs.cocos.com/creator/api/zh/classes/Vec2.html) - [Animation](http://docs.cocos.com/creator/api/zh/classes/Animation.html) - [AnimationClip](http://docs.cocos.com/creator/api/zh/classes/AnimationClip.html) - [Prefab](http://docs.cocos.com/creator/api/zh/classes/Prefab.html) - [sys](http://docs.cocos.com/creator/api/zh/classes/sys.html) 其中,Node、Event、Vec2,是此游戏开发的重点。 ## 开发思路 下面从功能逐一介绍开发思路。 ## 棋盘绘制 棋盘用的是六角网格布局,电子游戏中六角网格的运用没有方形网格那样常见,先来简单了解下六角网格。 ### 六角网格 本文中讨论的六角网格使用的都是正六边形。六角网格最典型的朝向有两种:水平方向( 顶点朝上 )与竖直方形( 边线朝上 )。本游戏用的是,顶点朝上的朝向。 ![hex](doc/hex.png) 细心的同学会发现,图中有类似坐标系的东西,称之为轴坐标。 ### 轴坐标 轴坐标系,有时也叫做“梯形坐标系”,是从立方坐标系的三个坐标中取两个建立的坐标系。由于我们有约束条件 `x + y + z = 0`,因此第三个坐标其实是多余的。轴坐标适合用于地图数据储存,也适合用于作为面向玩家的显示坐标。类似立方坐标,你也可以使用笛卡尔坐标系中的加,减,乘,除等基本运算。 有许多种立方坐标系,因此,也自然有许多种由其衍生的轴坐标系。本游戏,选用的是 `q = x` 以及 `r = z` 的情况。这里 q 代表列而 r 表示行。 ![](doc/s.png) 偏移坐标是人们最先会想到的坐标系,因为它能够直接使用方形网格的笛卡尔坐标。但不幸的是,偏移坐标系中的一个轴总会显得格格不入,并且最终会把问题变得复杂化。立方坐标和轴坐标则显得相得益彰,算法也更简单明了,只是地图存储方面会略微变得复杂一点。所以,使用立方/轴坐标系是较为简单的。 ### 从六角网格到像素 大致了解了什么是六角网格,接下来了解如何把六角网格转换为像素。 如果使用的轴坐标,那么可以先观察下图中示意的单位矢量。在下图中,箭头 `A→Q` 表示的是 q 轴的单位矢量而 `A→R` 是 r 轴的单位矢量。像素坐标即 `q_basis _ q + r_basis _ r`。例如,B 点位于 `(1, 1)`,等于 q 与 r 的单位矢量之和。 ![](doc/a.png) 在网格为 水平 朝向时,六边形的 高度 为 `高度 = size * 2`. 相邻六边形的 竖直 距离则为 `竖直 = 高度 * 3/4`。 六边形的 宽度 为 `宽度 = sqrt(3)/2 * 高度`。相邻六边形的 水平 距离为 `水平 = 宽度`。 对于本游戏中,取棋盘中心点为,(0,0)。从已知的六角网格坐标(正六边形)以及六边形的高度,就可以得到每个正六边形的坐标。可以得到如下像素转换代码: ```js hex2pixel(hex, h) { let size = h / 2; let x = size * Math.sqrt(3) * (hex.q + hex.r / 2); let y = ((size * 3) / 2) * hex.r; return cc.p(x, y); } ``` ### 网格坐标系生成 坐标系转像素问题解决了,接下来,需要获得本游戏中六角网格布局相应的坐标系。 这个问题,本质是轴坐标系统的地图存储。 ![](doc/b.png) 对半径为 N 的六边形布局,当`N = max(abs(x), abs(y), abs(z)`,有 `first_column[r] == -N - min(0, r)`。最后你访问的会是 `array[r][q + N + min(0, r)]`。然而,由于我们可能会把一些 `r < 0` 的位置作为起点,因此我们也必须偏移行,有 `array[r + N][q + N + min(0, r)]`。 如本游戏中,棋盘为边界六边形个数为 5 的六角网格布局,生成的坐标系存储代码如下: ```js setHexagonGrid() { this.hexSide = 5; this.hexSide--; for (let q = -this.hexSide; q <= this.hexSide; q++) { let r1 = Math.max(-this.hexSide, -q - this.hexSide); let r2 = Math.min(this.hexSide, -q + this.hexSide); for (let r = r1; r <= r2; r++) { let col = q + this.hexSide; let row = r - r1; if (!this.hexes[col]) { this.hexes[col] = []; } this.hexes[col][row] = this.hex2pixel({ q, r }, this.tileH); } } } ``` 边界个数为 6 的六角网格布局,六边形总数为 61。接着,只需要遍历添加背景即可完成棋盘的绘制。 ```js setSpriteFrame(hexes) { for (let index = 0; index < hexes.length; index++) { let node = new cc.Node('frame'); let sprite = node.addComponent(cc.Sprite); sprite.spriteFrame = this.tilePic; node.x = hexes[index].x; node.y = hexes[index].y; node.parent = this.node; hexes[index].spriteFrame = node; this.setShadowNode(node); this.setFillNode(node); this.boardFrameList.push(node); } } ``` 至此,棋盘绘制结束。 ## 方块随机生成 方块的形状可以千变万化,先来看下本游戏事先约定的 23 种形状。 在前面六角网格的知识基础上,实现这 23 种形状并不难。只需要约定好每个形状对应的轴坐标。 ![](doc/tile.png) 代码配置如下: ```js const Tiles = [ { type: 1, list: [[[0, 0]]] }, { type: 2, list: [ [[1, -1], [0, 0], [1, 0], [0, 1]], [[0, 0], [1, 0], [-1, 1], [0, 1]], [[0, 0], [1, 0], [0, 1], [1, 1]] ] }, { type: 3, list: [ [[0, -1], [0, 0], [0, 1], [0, 2]], [[0, 0], [1, -1], [-1, 1], [-2, 2]], [[-1, 0], [0, 0], [1, 0], [2, 0]] ] }, { type: 4, list: [ [[0, 0], [0, 1], [0, -1], [-1, 0]], [[0, 0], [0, -1], [1, -1], [-1, 1]], [[0, 0], [0, 1], [0, -1], [1, 0]], [[0, 0], [1, 0], [-1, 0], [1, -1]], [[0, 0], [1, 0], [-1, 0], [-1, 1]] ] }, { type: 5, list: [ [[0, 0], [0, 1], [0, -1], [1, -1]], [[0, 0], [1, -1], [-1, 1], [-1, 0]], [[0, 0], [1, -1], [-1, 1], [1, 0]], [[0, 0], [1, 0], [-1, 0], [0, -1]], [[0, 0], [1, 0], [-1, 0], [0, 1]] ] }, { type: 6, list: [ [[0, -1], [-1, 0], [-1, 1], [0, 1]], [[-1, 0], [0, -1], [1, -1], [1, 0]], [[0, -1], [1, -1], [1, 0], [0, 1
评论
    相关推荐
    • android从bootloader到launcher启动流程整理
      讲述android 开机流程 从boot rom---bootloader---init--zygote---systemserver---ams 并附上自己整理的每个流程的流程图 ,清晰熟悉android 启动流程
    • 基于python开发的全国新工商采集工具 v1.2版本
      这个软件是通过scrapy爬虫框架结合代理IP池再加上request模拟请求技术以及验证码识别技术,可以做到日更新采集全国新工商信息。采集的数据自动存储在mysql数据库表里,可下载全量1.8亿多企业工商基本信息和36维度的详细信息.支持sql和excel导出数据包格式。
    • 卷积神经网络
      这是卷积神经网络的一个实际用例,已经调试好了,能够在matlab上成功运行,适合从事卷积神经网络(CNN)研究的人员学习使用。
    • OFDM的MATLAB仿真
      1.使用Matlab实现一个OFDM系统。 OFDM系统具体参数参照LTE标准,具体为: 系统带宽:5MHz; OFDM符号长度:0.0714ms; 子载波间隔:15kHz; CP长度:OFDM符号长度的7 ; FFT点数:512; 2.选择一种降低OFDM系统峰均比的算法,在1的基础上实现,并分析其性能。
    • 三相维也纳整流器:三相维也纳整流器磁滞控制的Simulink仿真模型-matlab开发
      这是三相三电平维也纳整流器的仿真模型。 控制算法采用电压和电流双闭环控制。 外部电压环路为PI控制器,内部电流环路为bang bang滞后控制器。
    • 《声呐图像处理》与《多波束测深及图像数据处理》两本书
      《声呐图像处理》最新版 主要介绍声呐图像的去噪、增强、分割技术 ;多波束测深及图像数据处理
    • MATLAB-PSO区域覆盖
      利用粒子群算法解决无线传感器网络节点区域部署问题,使得部署后节点的探测面积尽量覆盖整个区域
    • MATLAB图像融合(小波变换,GUI,文稿).zip
      MATLAB图像融合(含论文).图像融合分为像素级、特征级、决策级三个层次,其中像素级图像融合能够提供其它层次上的融合处理所不具有的更丰富、更精确、更可靠细节信息,有利于图像的进一步分析、处理和理解,它在整个图像融合技术中是最为复杂、实施难度最大的融合处理技术。本文的研究工作是围绕像素级图像融合展开的,针对像素级图像融合技术中需要解决的关键问题,研究了多种像素级图像融合方法。
    • 光伏MPPT模糊逻辑控制可变辐照度:在可变辐照度下使用模糊逻辑控制的光伏MPPT控制。-matlab开发
      在可变辐照度和固定温度下连接到转换器的光伏模型。 PV (Kycera Solar KC200GT) 转换器由基于模糊逻辑的 PWM 控制,以在一个模块串和一个并联串中达到 MPPT。 https://www.researchgate.net/profile/Mohamed_Louzazni2/research?ev=prf_act https://scholar.google.fr/citations?hl=fr&user=v4VeB44AAAAJ&view_op=list_works&sortby=pubdate
    • SAR(ISAR)算法大总结
      花了很多精力、积分,收集了很久的SAR(ISAR)代码,一咬牙全打包上传了!都是可以运行的,包括各种算法,RD、FPA、RMA、CS、FS、BP、运动补偿。