博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯。orz…

在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,做了一些小动画,希望大家可以看一遍都懂啦~)

一. 2个物体在同一直线上,可以直接连通 (这个不需要解释啦)

二. 2个对象不在同一直线上,一个转弯

【2个物体分别在所在位置进行x,y轴的延伸,如下图则交点为A,B。 只需判断2个交点到2个物体直接是否有障碍物,若没有,则可以连通】

看动画容易理解一点~

三. 2个物体不在同一直线上,连线有2个转弯

【如下图,由于有2个转弯,不同于1个转弯的情况,我们需要有2个拐点。这2个拐点必须在同一个轴上(x轴 或者 y轴),那我们只要分别做这2个点的x轴的延伸,或者y轴的延伸,一个一个取点遍历扫描,若都可以连线,则可以连线~】

以上就是四种连线算法判断,动画只列举部分情况,每一种按照同样的原理扫描。可覆盖所有连线判断~

说完连线判断的逻辑之后,写一下整体的游戏框架,游戏基本使用原生javascript,使用createjs游戏引擎进行开发。

代码思路:

1. 绘制游戏画图,确定为多少宫图,由于是在移动端的小游戏,根据最小屏幕尺寸(iphone4  320*480),确定为7*9的宫图。

1. 创建一个二维数组,如果某个坐标上有物体,则设为1,否则为0

2.判断该位置是否有物体,只需要判断对应的二维数组上值是否为1,若为1,则有物体,否则没有。

至于画线,消除相同物体,只要会连线逻辑,肯定就会自己绘制线条,消除物体了,所以本篇文章就只讲连线判断啦~

在判断能否连线的时候,肯定是从最简单的方法开始判断,如下:

同一直线能否直线连通--->如何一点被包围,则不通--->两点在一条直线上,不能直线连接但是可以连通---> 不在同一直线但是可以连通

getPath: function (p1, p2) {//开始搜索前对p1,p2排序,使p2尽可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;p1 = p2;p2 = t;}else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;p1 = p2;p2 = t;}}//2点在同一直线上,可以直线连通if (this.hasLine(p1, p2).status) {return true;}//如果两点中任何一个点被全包围,则不通。else if (this.isWrap(p1, p2)) {return false;}//两点在一条直线上,不能直线连接但是可以连通else if (this.LineLink(p1, p2)) {return true;}//不在同一直线但是可以连通else if (this.curveLink(p1, p2)) {return true;}
}

//判断同一条线能否连通,x轴相同或者y轴相同hasLine: function (p1, p2) {this.path = [];//同一点if (p1.x == p2.x && p1.y == p2.y) {return {status: false};}if (this.onlineY(p1, p2)) {var min = p1.y > p2.y ? p2.y : p1.y;min = min + 1;var max = p1.y > p2.y ? p1.y : p2.y;for (min; min < max; min++) {var p = {x: p1.x, y: min};if (!this.isEmpty(p)) {console.log('有障碍物p点………………');console.log(p);this.path = [];break;}this.path.push(p);}if (min == max) {return {status: true,data: this.path,dir: 'y' //y轴
                    };}this.path = [];return {status: false};}else if (this.onlineX(p1, p2)) {var j = p1.x > p2.x ? p2.x : p1.x;j = j + 1;var max = p1.x > p2.x ? p1.x : p2.x;for (j; j < max; j++) {var p = {x: j, y: p1.y};if (!this.isEmpty(p)) {console.log('有障碍物p点………………');console.log(p);this.path = [];break;}this.path.push(p);}if (j == max) {return {status: true,data: this.path,dir: 'x' //x轴
                    };}this.path = [];return {status: false};}return {status: false};
//2点是否有其中一点被全包围,若有,则返回trueisWrap: function (p1, p2) {//有一点为空,则条件不成立if (!this.isEmpty({x: p1.x, y: p1.y + 1}) && !this.isEmpty({x: p1.x,y: p1.y - 1}) && !this.isEmpty({x: p1.x - 1,y: p1.y}) && !this.isEmpty({x: p1.x + 1, y: p1.y})) {return true;}if (!this.isEmpty({x: p2.x, y: p2.y + 1}) && !this.isEmpty({x: p2.x,y: p2.y - 1}) && !this.isEmpty({x: p2.x - 1,y: p2.y}) && !this.isEmpty({x: p2.x + 1, y: p2.y})) {return true;}return false;}//两点在一条直线上,不能直线连接但是可以连通LineLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//如果都在x轴,则自左至右扫描可能的路径,//每次构造4个顶点pt0, pt1, pt2, pt3,然后看他们两两之间是否连通if (this.onlineX(p1, p2)) {for (var i = 0; i < this.H; i++) {if (i == p1.y) {continue;}pt0 = p1;pt1 = {x: p1.x, y: i};pt2 = {x: p2.x, y: i};pt3 = p2;//如果顶点不为空,则该路不通。if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {continue;}if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt1, pt2, pt3];}}}//如果都在y轴,则自上至下扫描可能的路径,//每次构造4个顶点pt0, pt1, pt2, pt3,然后看他们两两之间是否连通if (this.onlineY(p1, p2)) {for (var j = 0; j < this.W; j++) {if (j == p1.x) {continue;}pt0 = p1;pt1 = {x: j, y: p1.y};pt2 = {x: j, y: p2.y};pt3 = p2;//如果顶点不为空,则该路不通。if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {continue;}if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt1, pt2, pt3];}}}},//两点不在一条直线上,看是否可通curveLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//特殊情况,先判断是否是一个转弯var spec1 = {x: p1.x, y: p2.y},spec2 = {x: p2.x, y: p1.y};if (this.isEmpty(spec1)) {if (this.hasLine(p1, spec1).status && this.hasLine(p2, spec1).status) {console.log('1个转弯');this.drawLine(1, [p1, p2, spec1]);return [p1, p2, spec1];}}if (this.isEmpty(spec2)) {if (this.hasLine(p1, spec2).status && this.hasLine(p2, spec2).status) {console.log('1个转弯');// console.table([pt0, spec2, pt3]);this.drawLine(1, [p1, p2, spec2]);return [p1, spec2, p2];}}//先纵向扫描可能的路径//同样,每次构造4个顶点,看是否可通for (var k = 0; k <= this.H; k++) {pt0 = p1;pt1 = {x: p1.x, y: k};pt2 = {x: p2.x, y: k};pt3 = p2;//2个交点都为空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2个转弯if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {console.log('2个转弯');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2];}}}//横向扫描所有可能的路径for (var k = 0; k <= this.W; k++) {pt0 = p1;pt1 = {x: k, y: p1.y};pt2 = {x: k, y: p2.y};pt3 = p2;//2个交点都为空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2个转弯if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {console.log('2个转弯');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2];}}}return false;}

连线判断

转载于:https://www.cnblogs.com/beidan/p/7049007.html

前端实现连连看小游戏(1)相关推荐

  1. 多关卡连连看php源码_前端实现连连看小游戏实例代码

    博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯.orz- 在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,画了下面的图(图有点丑--) 一. 2个物体在同一直 ...

  2. 原生js实现一个连连看小游戏(一)

    前几天使用原生的js写了一个连连看小游戏,地址:连连看(js),基本功能都实现了,运行截图为: 根据游戏规则获取开发思路 创建棋盘格 生成随机不重复数字 映射到棋盘格 鼠标点击事件 寻路,无通路,则到 ...

  3. python连连看小游戏_利用Python制作一个连连看小游戏,边学边玩!

    导语 今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块 环境搭建 安装Python并添加到环 ...

  4. python连连看小游戏_python递归法实现简易连连看小游戏

    问题:简单版连连看小游戏 一个分割成w*h个正方格子的矩形板上,每个正方格子可以有游戏卡,也可以没有游戏卡 两个游戏卡之间有一条路径相连需满足以下三个条件: 1.路径只包含水平和垂直的直线段 2.路径 ...

  5. MATLAB连连看小游戏

    这是一款MATLAB连连看小游戏,基本实现了连连看的功能,不过目前没有写出死局判定的模块,日后可能会对其进行改进. 目录 游戏截图 游戏组装说明 完整代码 其他说明 后记 游戏截图 游戏组装说明 我们 ...

  6. H5——连连看小游戏实现思路及源码

    部门要求推广新产品用连连看小游戏的方式, 设计那边UI还没有排期,先撸个功能demo,正好记录一下: 连连看都玩过,程序的关键在于判断连续点击的两张图片是否能够消除,两个图片消除的条件有两个: 图片相 ...

  7. java游戏开发——连连看小游戏

    本次课程主要为大家详细介绍了Java制作--<连连看>小游戏,示例代码介绍的非常详细,具有想当的参考价值,感兴趣的小伙伴们可以学习一下! 小伙伴们应该都玩过连连看吧,今天呢叫大家用Java ...

  8. python应用学习(六)——tkinter制作连连看小游戏

    python 制作连连看小游戏 前言 一.准备 二.游戏简单介绍 1.游戏规则 2.游戏设计所需的图片库: 三.游戏设计 I.创建Point点类 II.定义函数 III.游戏的主函数逻辑 IV.完整代 ...

  9. java连连看小游戏

    目录 运行界面图 代码如下(示例): 2.运行演示 这是一个用java编写的小游戏,连连看是一种消除类益智游戏,核心要求是在规定的时间内,消除游戏界面中选中的两张相同的图案,直至完全消除所有图案.这款 ...

最新文章

  1. Android动态替换dex,Android DexClassLoader动态加载与插件化开发
  2. python nonetype_【已解决】Python程序错误:TypeError: ‘NoneType’ object is not iterable
  3. ajax静态页面实例,AJAX实例:Ajax实现静态页面分页
  4. webpack-dev-server 本地文件 发布 网站 域名 根目录
  5. 个基于TensorFlow的简单故事生成案例:带你了解LSTM
  6. sqlparameter多个赋值一行完成_HashMap源码从面试题说起:请一行一行代码描述hashmap put方法...
  7. hbase动态更改行键设计_nosql – HBase行键设计,用于单调递增键
  8. 斯坦福大学深度学习公开课cs231n学习笔记(6)神经网路输入数据预处理(归一化,PCA等)及参数初始化
  9. 使用脚本下载.ts文件并合并
  10. 一次性搞懂 HTTP、HTTPS、SPDY
  11. VirtualBox使用教程
  12. Linux查看日志命令(汇总)
  13. 干货 | 携程商旅订单系统架构设计和优化实践
  14. 量价交易——寻找妖股的底部结构
  15. SLAM学习 | 世界坐标系转经纬度误差分析
  16. Linux权限的理解
  17. Cubieboard CC-A80性能之Ubuntu Linaro编译安装Node.js
  18. 43.自动获取汉子笔画
  19. Win10自带SSH免密连接Virtulbox虚拟机
  20. python无法调用urlopen_python urlopen 不了一个url 而用curl 是可以的

热门文章

  1. ux设计_声音建议:设计UX声音的快速指南
  2. JS中创建函数的几种方式
  3. spring boot druid 监控没有sql记录
  4. quartus FIR仿真笔记
  5. mysql数据库表的管理(增删改)
  6. 一个小技巧 禁止浏览器弹出Alert
  7. 使用vh来制作高度自适应页面和元素垂直居中
  8. 【转】知道这20个正则表达式,能让你少写1,000行代码
  9. WEB API:语音识别
  10. 被娱乐在线报道的“唐骏造假门事件”