详解CocosCreator华容道数字拼盘

 更新时间:2021年04月15日 10:52:25   作者:搬砖小菜鸟  
这篇文章主要介绍了详解CocosCreator华容道数字拼盘,对华容道感兴趣的同学,看完之后,可以回去亲手试一下

前言

华容道是啥玩意?

这种数字拼图游戏大家都玩过吧,他就是典型的华容道之一。

华容道是古老的中国民间益智游戏,以其变化多端、百玩不厌的特点与魔方、独立钻石棋一起被国外智力专家并称为“智力游戏界的三个不可思议”。

今天咱们就来了解一下这个华容道。

正文

今天咱们主要以3*3的布局来进行,菜鸟用cocos creator 写了一个简单的demo,下面咱们逐步说一下

1.面板

首先咱们随机生成一个面板排列

2.华容道求解

思路:

穷举法:大家都知道这种游戏的玩法,滑动其中可以滑动的方格,将打乱的方格按照上边数字从小到大的顺序依次排列即可通关。在这里菜鸟利用了穷举法,在每种可能的情况中去查找最优解。

在穷举法中我们常见的有:

  • 广度搜索:广度优先搜索,会优先搜索所有方向的第一步,然后再接着搜索每一个可行的方向的第二步,以此类推
  • 深度搜索:深度优先搜索,会在一个方向一直搜下去,直到这条路走不通,才会考虑第二个方向

在这里我们用的是广度优先搜索,我们只需要拿到最优解,也就是步数最少的。
具体操作如图:

我们以前三步为例,

  • 第一步我们有三种走法,
  • 第二步我们需要在第一步的基础上再移动方块,每一种又会延伸出更多的可能性,
  • 我们需要把每一种可能性都存储起来,
  • 下一步的移动是基于上一步所有可能性的基础再去移动
  • 在第三步的时候我们会发现 会出现重复的情况,所有我们要进行减支,将重复的分支及时的处理掉,
  • 虽然处理掉了重复的分支,但是分支的数量也会成倍的增加,就拿示例中的排列,随着步数的增加,分支的数量如图显示

  • 一旦有分支检测到了已通关,那么广度搜索就结束了
  • 最终会的得到每一步的一个移动过程

得到了解,我们可以应用到demo,检测是否可以通关

点击demo中的自动排列

3.代码

//循环遍历求解
while (true) {
    let steps: Array<any> = [];
    let lastGrad: Array<any> = this.mMapData[this.mMapData.length - 1];
    console.log(lastGrad.length);
    //遍历作最后一个梯度中所有的结果,求解下一步
    for (let i = 0; i < lastGrad.length; i++) {
        let matrix = lastGrad[i]["matrix"];
        let answer = lastGrad[i]["answer"];
        let result: Array<any> = this.move(matrix, answer, steps);
        if (result) {
            console.log("结果:", result);
            resolve(result);
            return;
        }
    }

    if(steps.length<=0){
        console.log("查询结果失败,");
        resolve(null);
        return;
    }
    this.mMapData.push(steps);
}
private move(matrix: Array<number>, answer: Array<any>, steps: Array<any>): Array<any> {
    for (let i = 0; i < matrix.length; i++) {
        if (matrix[i] != -1) {  //不是空位,检测是否可移动,获取可移动结果
            //检测上下左右是否可以移动,
            let result0: Array<any> = this.moveUp(i, matrix, answer, steps);
            let result1: Array<any> = this.moveDown(i, matrix, answer, steps);
            let result2: Array<any> = this.moveLeft(i, matrix, answer, steps);
            let result3: Array<any> = this.moveRight(i, matrix, answer, steps);

            if (result1) {
                return result1;
            }
            if (result2) {
                return result2;
            }
            if (result0) {
                return result0;
            }
            if (result3) {
                return result3;
            }
        }
    }
    return null;
}
private moveRight(i: number, matrix: Array<number>, answer: Array<any>, steps: Array<any>): Array<any> {
    let line: number = i % this.mLine;
    let row: number = Math.floor(i / this.mLine);
    if (line + 1 >= this.mLine) return null;  //超出边界
    let targetIndex: number = row * this.mLine + (line + 1);
    if ( matrix[targetIndex] != -1) return null;  //不可移动
    //移动
    //移动
    //复制新的数组进行修改
    let newMatrix: Array<number> = JSON.parse(JSON.stringify(matrix));
    let newAnswer: Array<any> = JSON.parse(JSON.stringify(answer));
    //互换位置
    let temp: number = newMatrix[i];
    newMatrix[i] = newMatrix[targetIndex];
    newMatrix[targetIndex] = temp;
    newAnswer.push({ "index": i, "dic": 3 });

    if (this.checkIsExist(newMatrix)) {
        return null;
    }

    if (this.checkPass(newMatrix)) {
        return newAnswer;
    }
    let step: any = {};
    step["matrix"] = newMatrix;
    step["answer"] = newAnswer;
    steps.push(step);
}
/**
 * 检测是否通关
 */
private checkPass(matrix: Array<number>): boolean {
    if (matrix[this.mRow * this.mLine - 1] != -1) return false;
    for (let i = 0; i < this.mRow * this.mLine - 1; i++) {
        if (matrix[i] != i + 1) {
            return false;
        }
    }
    console.log(matrix)
    return true;
}
/**
 * 检测是否重复
 */
private checkIsExist(matrix): boolean {
    if (this.mMapMatrixS[JSON.stringify(matrix)]) {
        return true;
    }
    this.mMapMatrixS[JSON.stringify(matrix)] ="1";
    return false;
}

4.注意

demo中是3 * 3的排列,使用浏览器勉强可以跑出结果,但是4 * 4或者5 * 5的就不行了,因为分支太多。后续有时间菜鸟会用python脚本实现4 * 4,5 * 5或更多的排列,最终导出json关卡信息。

以上就是详解CocosCreator华容道数字拼盘的详细内容,更多关于CocosCreator华容道的资料请关注脚本之家其它相关文章!

相关文章

  • javascript实现获取服务器时间

    javascript实现获取服务器时间

    本文给大家总结了一下使用javascript来获取服务器时间的几种方法和思路,十分的简单明了,有需要的小伙伴可以参考下
    2015-05-05
  • JavaScript中的集合及效率

    JavaScript中的集合及效率

    由于 JavaScript 的语言特性,我们可以向通用对象动态添加和删除属性。所以 Object 也可以看成是 JS 的一种特殊的集合。
    2010-01-01
  • JS瀑布流实现方法实例分析

    JS瀑布流实现方法实例分析

    这篇文章主要介绍了JS瀑布流实现方法,结合实例形式分析了javascript瀑布流加载图片效果的实现原理、步骤与相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • 使用原生js实现拖拽和粘贴上传图片功能

    使用原生js实现拖拽和粘贴上传图片功能

    这篇文章主要介绍了使用原生js实现拖拽和粘贴上传图片功能,Vue/Rect 生态用多了都快忘记原生js怎么写了,今天需要直接在服务器裸写个页面,实现 textarea 文本框里接收拖拽多个图片,需要的朋友可以参考下
    2024-04-04
  • 微信小程序自定义音乐进度条的实例代码

    微信小程序自定义音乐进度条的实例代码

    最近遇到这样的需求:显示音乐播放按钮、可手动拖拽进度条;页面中含多个音乐,播放当前音乐时暂停其他音乐播放。 这篇文章主要介绍了微信小程序自定义音乐进度条的实例代码,需要的朋友可以参考下
    2018-08-08
  • Javascript中for循环语句的几种写法总结对比

    Javascript中for循环语句的几种写法总结对比

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的,javascript中for循环也是非常常用的,下面这篇文章主要介绍了Javascript中for循环的几种写法,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01
  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    这篇文章主要给大家介绍了如何增强vscode中js代码提示功能的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • JavaScript工厂模式详解

    JavaScript工厂模式详解

    这篇文章主要介绍了JavaScript设计模式之工厂模式,结合完整实例形式分析了工厂模式的概念、原理及javascript定义与使用工厂模式的相关操作技巧,需要的朋友可以参考下
    2021-10-10
  • Math.js解决js中小数精度丢失问题

    Math.js解决js中小数精度丢失问题

    在JavaScript中进行小数运算时,会容易出现精度丢失的问题,例如在进行两个小数相加时,结果并不是预期的精确值,而是一个近似值,,使用第三方库Math.js可以避免精度丢失的问题,本文导入Math.js库和使用Math.js的方法来进行小数运算,同时还可以指定格式来保留小数位数
    2023-12-12
  • uniapp组件传值的方法(父传子,子传父,对象传值)实战案例

    uniapp组件传值的方法(父传子,子传父,对象传值)实战案例

    现在的前端开发中基本上都是组件化开发的,下面这篇文章主要给大家介绍了关于uniapp组件传值(父传子,子传父,对象传值)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论