H5 六边形消除游戏开发

2018-08-10 admin

六边形游戏的鼻祖应该是这个 hex-frvr,原作者开发用的是 pixi 游戏引擎,本着快速开发的理念,本游戏采用 cocos creator,UI 延用 hex-frvr。学习过程中,有借鉴各路实现。此源码仅供学习使用,谢谢。

预览

功能介绍

六边形游戏本质是俄罗斯方块,理解这个对接下来的开发会有很大的帮助。

本游戏实现功能如下:

  • [x] 六边形棋盘绘制、方块随机生成
  • [x] 方块能否落入棋盘的判定
  • [x] 方块消除与游戏结束的判定
  • [x] 各种动画效果
  • [x] 游戏计分

cocos creator

在讲游戏开发思路前,建议先了解 cocos creator

必须了解的 API 有:

其中,Node、Event、Vec2,是此游戏开发的重点。

开发思路

下面从功能逐一介绍开发思路。

棋盘绘制

棋盘用的是六角网格布局,电子游戏中六角网格的运用没有方形网格那样常见,先来简单了解下六角网格。

六角网格

本文中讨论的六角网格使用的都是正六边形。六角网格最典型的朝向有两种:水平方向( 顶点朝上 )与竖直方形( 边线朝上 )。本游戏用的是,顶点朝上的朝向。

细心的同学会发现,图中有类似坐标系的东西,称之为轴坐标。

轴坐标

轴坐标系,有时也叫做“梯形坐标系”,是从立方坐标系的三个坐标中取两个建立的坐标系。由于我们有约束条件 x + y + z = 0,因此第三个坐标其实是多余的。轴坐标适合用于地图数据储存,也适合用于作为面向玩家的显示坐标。类似立方坐标,你也可以使用笛卡尔坐标系中的加,减,乘,除等基本运算。

有许多种立方坐标系,因此,也自然有许多种由其衍生的轴坐标系。本游戏,选用的是 q = x 以及 r = z 的情况。这里 q 代表列而 r 表示行。

偏移坐标是人们最先会想到的坐标系,因为它能够直接使用方形网格的笛卡尔坐标。但不幸的是,偏移坐标系中的一个轴总会显得格格不入,并且最终会把问题变得复杂化。立方坐标和轴坐标则显得相得益彰,算法也更简单明了,只是地图存储方面会略微变得复杂一点。所以,使用立方/轴坐标系是较为简单的。

从六角网格到像素

大致了解了什么是六角网格,接下来了解如何把六角网格转换为像素。

如果使用的轴坐标,那么可以先观察下图中示意的单位矢量。在下图中,箭头 A→Q 表示的是 q 轴的单位矢量而 A→R 是 r 轴的单位矢量。像素坐标即 q_basis _ q + r_basis _ r。例如,B 点位于 (1, 1),等于 q 与 r 的单位矢量之和。

在网格为 水平 朝向时,六边形的 高度 为 高度 = size * 2. 相邻六边形的 竖直 距离则为 竖直 = 高度 * 3/4

六边形的 宽度 为 宽度 = sqrt(3)/2 * 高度。相邻六边形的 水平 距离为 水平 = 宽度

对于本游戏中,取棋盘中心点为,(0,0)。从已知的六角网格坐标(正六边形)以及六边形的高度,就可以得到每个正六边形的坐标。可以得到如下像素转换代码:

  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);
  }

网格坐标系生成

坐标系转像素问题解决了,接下来,需要获得本游戏中六角网格布局相应的坐标系。

这个问题,本质是轴坐标系统的地图存储。

对半径为 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 的六角网格布局,生成的坐标系存储代码如下:

  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。接着,只需要遍历添加背景即可完成棋盘的绘制。

  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 种形状并不难。只需要约定好每个形状对应的轴坐标。

代码配置如下:

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]],
      [[-1, 1], [0, 1], [1, 0], [1, -1]],
      [[-1, 0], [-1, 1], [0, -1], [1, -1]],
      [[-1, 0], [-1, 1], [0, 1], [1, 0]]
    ]
  }
];

由于没有涉及方块出现的概率,这里就简单粗暴地用 random 来实现方块随机生成。

const getRandomInt = function(min, max) {
  let ratio = cc.random0To1();
  return min + Math.floor((max - min) * ratio);
};

网格和方块都搞定了,蛮喜欢这种简单的 UI 风格,非常适合游戏开发的入门学习。接下来处理游戏交互逻辑。

方块落入棋盘逻辑

方块与棋盘之间的交互关系是 Drag 与 Drop ,在 cocos creator 中暂时没发现有 Drag 相关的组件,目前是通过 touch 事件来模拟。在方块 touchmove 的过程,需要处理两件事,第一,检测拖拽过程中方块是否与棋盘有交叉,就是游戏里所谓的 碰撞检测,cc 有提供相应的碰撞组件,但不够灵活,因为我们要得到的是方块与棋盘重合关系(ps:并不需要完全重合),所以还是用脚本来模拟实现,cc 为此提供了很多 API,主要都与 vec2 有关。第二,检测方块是否可以落入棋盘。

碰撞检测 (重合判定)

方块与棋盘其实都是由正六边形组合而成,这里有种比较简单地方式来判断两者是否有重合部分,即判断两个六边形圆心的距离,当小于设定值,则认为有重合。

这边简单起见,特意将棋盘与方块的父节点的坐标系原点设为同一个(中心点)。cocos 坐标系可参考这篇

由于方块是相对于它的父级中心点定位,而它的父级是相对于 Canvas 定位,因此可以通过 cc.pAdd(this.node.position, tile.position) 来获取方块相对于棋盘原点的坐标值。接着遍历棋盘内六边形坐标值,来检查拖拽进入的六边形与棋盘哪些存在重合关系。相关代码如下:

  checkCollision(event) {
    const tiles = this.node.children; // this.node 为 方块的父级,拖拽改变的是这个节点的坐标
    this.boardTiles = []; // 保存棋盘与方块重合部分。
    this.fillTiles = []; // 保存方块当前重合的部分。
    for (let i = 0; i < tiles.length; i++) {
      const tile = tiles[i];
      const pos = cc.pAdd(this.node.position, tile.position); // pAdd 是cc早期提供的 api,可用 vec2 中向量相加替换
      const boardTile = this.checkDistance(pos);
      if (boardTile) {
        this.fillTiles.push(tile);
        this.boardTiles.push(boardTile);
      }
    }
  },
  checkDistance(pos) {
    const distance = 50;
    const boardFrameList = this.board.boardFrameList;
    for (let i = 0; i < boardFrameList.length; i++) {
      const frameNode = boardFrameList[i];
      const nodeDistance = cc.pDistance(frameNode.position, pos);
      if (nodeDistance <= distance) {
        return frameNode;
      }
    }
  },

在拖拽过程,实时保存棋盘有重合关系的六边形,用于判定方块是否可以落入棋盘

落子判定

只要方块的个数与棋盘所在区域可填充部分(棋盘里面没有方块)数目一致,则认为可以落子。

checkCanDrop() {
    const boardTiles = this.boardTiles; // 当前棋盘与方块重合部分。
    const fillTiles = this.node.children; // 当前拖拽的方块总数
    const boardTilesLength = boardTiles.length;
    const fillTilesLength = fillTiles.length;

    // 如果当前棋盘与方块重合部分为零以及与方块数目不一致,则判定为不能落子。
    if (boardTilesLength === 0 || boardTilesLength != fillTilesLength) {
      return false;
    }

    // 如果方块内以及存在方块,则判定为不能落子。
    for (let i = 0; i < boardTilesLength; i++) {
      if (this.boardTiles[i].isFulled) {
        return false;
      }
    }

    return true;
  },

落子提示

得到落入与否的判定值后,需要给用户可以落子的提示。这边的一个做法是,在生成棋盘之前就给每个棋盘格子节点新建一个 name 为 shadowNode 的子节点。接着只需要修改符合条件的节点的spriteFrame为当前拖拽方块的spriteFrame,同时降低透明度即可。代码如下:

  dropPrompt(canDrop) {
    const boardTiles = this.boardTiles;
    const boardTilesLength = boardTiles.length;
    const fillTiles = this.fillTiles;

    this.resetBoardFrames();
    if (canDrop) {
      for (let i = 0; i < boardTilesLength; i++) {
        const shadowNode = boardTiles[i].getChildByName('shadowNode');
        shadowNode.opacity = 100;
        const spriteFrame = fillTiles[i].getComponent(cc.Sprite).spriteFrame;
        shadowNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
      }
    }
  }

落入逻辑

至此,方块的 touchmove 事件添加完毕。接下来,需要做的是,拖拽结束后的相关逻辑处理。

两种情况,方块可以落入,与方块不能落入。前面已经获取了是否可以落入的判定。那接下来就是添加相应的处理。

可以落入的情况需要做的是在棋盘添加对应方块,方块添加结束后重新随机生成新的方块。不可以落入则让拖拽的方块返回原位置。

在添加方块上用了跟之前说到的落入提示类似的方法,给棋盘内每个格子节点下新增一个名为 fillNode 的节点,方块落入都跟这个节点有关。

  tileDrop() {
    this.resetBoardFrames();
    if (this.checkCanDrop()) {
      const boardTiles = this.boardTiles;
      const fillTiles = this.fillTiles;
      const fillTilesLength = fillTiles.length;

      for (let i = 0; i < fillTilesLength; i++) {
        const boardTile = boardTiles[i];
        const fillTile = fillTiles[i];
        const fillNode = boardTile.getChildByName('fillNode');
        const spriteFrame = fillTile.getComponent(cc.Sprite).spriteFrame;

        boardTile.isFulled = true;
        fillNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
        this.resetTile();
      }
      this.board.curTileLength = fillTiles.length;
      this.board.node.emit('dropSuccess');
    } else {
      this.backSourcePos();
    }
    this.board.checkLose();
  }

消除逻辑

棋盘有了,也可以判断方块是否可以落入棋盘。接下来要做的就是消除逻辑的处理,之前说,六边形消除游戏就是俄罗斯方块的衍生版,其实就是多了几个消除方向,来看张图:

如果把这个棋盘看成数组,即从左斜方向依次添加 [0,1,2.....],最终可以得到如下消除规则:

const DelRules = [
  //左斜角
  [0, 1, 2, 3, 4],
  [5, 6, 7, 8, 9, 10],
  [11, 12, 13, 14, 15, 16, 17],
  [18, 19, 20, 21, 22, 23, 24, 25],
  [26, 27, 28, 29, 30, 31, 32, 33, 34],
  [35, 36, 37, 38, 39, 40, 41, 42],
  [43, 44, 45, 46, 47, 48, 49],
  [50, 51, 52, 53, 54, 55],
  [56, 57, 58, 59, 60],

  //右斜角
  [26, 35, 43, 50, 56],
  [18, 27, 36, 44, 51, 57],
  [11, 19, 28, 37, 45, 52, 58],
  [5, 12, 20, 29, 38, 46, 53, 59],
  [0, 6, 13, 21, 30, 39, 47, 54, 60],
  [1, 7, 14, 22, 31, 40, 48, 55],
  [2, 8, 15, 23, 32, 41, 49],
  [3, 9, 16, 24, 33, 42],
  [4, 10, 17, 25, 34],

  //水平
  [0, 5, 11, 18, 26],
  [1, 6, 12, 19, 27, 35],
  [2, 7, 13, 20, 28, 36, 43],
  [3, 8, 14, 21, 29, 37, 44, 50],
  [4, 9, 15, 22, 30, 38, 45, 51, 56],
  [10, 16, 23, 31, 39, 46, 52, 57],
  [17, 24, 32, 40, 47, 53, 58],
  [25, 33, 41, 48, 54, 59],
  [34, 42, 49, 55, 60]
];

规则有了,接着添加消除逻辑,直接看代码:

  deleteTile() {
    let fulledTilesIndex = []; // 存储棋盘内有方块的的索引
    let readyDelTiles = []; // 存储待消除方块
    const boardFrameList = this.boardFrameList;
    this.isDeleting = true; // 方块正在消除的标识,用于后期添加动画时,充当异步状态锁
    this.addScore(this.curTileLength, true);

    // 首先获取棋盘内存在方块的格子信息
    for (let i = 0; i < boardFrameList.length; i++) {
      const boardFrame = boardFrameList[i];
      if (boardFrame.isFulled) {
        fulledTilesIndex.push(i);
      }
    }

    for (let i = 0; i < DelRules.length; i++) {
      const delRule = DelRules[i]; // 消除规则获取
      // 逐一获取规则数组与存在方块格子数组的交集
      let intersectArr = _.arrIntersect(fulledTilesIndex, delRule);
      if (intersectArr.length > 0) {
        // 判断两数组是否相同,相同则将方块添加到待消除数组里
        const isReadyDel = _.checkArrIsEqual(delRule, intersectArr);
        if (isReadyDel) {
          readyDelTiles.push(delRule);
        }
      }
    }

    // 开始消除
    let count = 0;
    for (let i = 0; i < readyDelTiles.length; i++) {
      const readyDelTile = readyDelTiles[i];
      for (let j = 0; j < readyDelTile.length; j++) {
        const delTileIndex = readyDelTile[j];
        const boardFrame = this.boardFrameList[delTileIndex];
        const delNode = boardFrame.getChildByName('fillNode');
        boardFrame.isFulled = false;
        // 这里可以添加相应消除动画
        const finished = cc.callFunc(() => {
          delNode.getComponent(cc.Sprite).spriteFrame = null;
          delNode.opacity = 255;
          count++;
        }, this);
        delNode.runAction(cc.sequence(cc.fadeOut(0.3), finished));
      }
    }

    if (count !== 0) {
      this.addScore(count);
      this.checkLose();
    }

    this.isDeleting = false;
  }

游戏结束逻辑

三个方块都无法放入棋盘,则认为游戏结束。

首先得到未填充的棋盘格子信息,再将三个方块逐一放入未填充区域判断是否可以放入。代码如下:

  checkLose() {
    let canDropCount = 0;
    const tiles = this.node.children;
    const tilesLength = tiles.length;
    const boardFrameList = this.board.boardFrameList;
    const boardFrameListLength = boardFrameList.length;

    // TODO: 存在无效检测的情况,可优化
    for (let i = 0; i < boardFrameListLength; i++) {
      const boardNode = boardFrameList[i];
      let srcPos = cc.p(boardNode.x, boardNode.y);
      let count = 0;
      if (!boardNode.isFulled) {
        // 过滤出未填充的棋盘格子
        for (let j = 0; j < tilesLength; j++) {
          let len = 27; // 设定重合判定最小间距

          // 将方块移到未填充的棋盘格子原点,并获取当前各方块坐标值
          let tilePos = cc.pAdd(srcPos, cc.p(tiles[j].x, tiles[j].y));

          // 遍历棋盘格子,判断方块中各六边形是否可以放入
          for (let k = 0; k < boardFrameListLength; k++) {
            const boardNode = boardFrameList[k];
            let dis = cc.pDistance(cc.p(boardNode.x, boardNode.y), tilePos);
            if (dis <= len && !boardNode.isFulled) {
              count++;
            }
          }
        }

        if (count === tilesLength) {
          canDropCount++;
        }
      }
    }

    if (canDropCount === 0) {
      return true;
    } else {
      return false;
    }
  }

计分制

计分规则千变万化,看你需求。一般方块放入与消除均可加分。

  scoreRule(count, isDropAdd) {
    let x = count + 1;
    let addScoreCount = isDropAdd ? x : 2 * x * x;
    return addScoreCount;
  }

致谢

项目属于入门级别,初次接触 cocos creator 游戏开发,多数参考了网上一些六边形开源游戏。在此感谢开源,项目有融入自己的一些方法,比如处理六角网格那块,但是消除规则,还需要接触更多知识后才能完善。先写这么一篇入门级的,后续再深入,希望对一些像我一样刚接触游戏开发的人能有一些帮助。后续可能会结合适当的例子,讲一些,cocos creator 动画,粒子系统,物理系统,webgl等。

源码

参考

原文链接:https://segmentfault.com/a/1190000015961721

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37695.html

文章标题:H5 六边形消除游戏开发

相关文章
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部