前端实现连连看小游戏（1）

博主玩了这么久的连连看，居然是第一次发现，连连看最多只能有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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/289901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在 Visual Studio 2010 中创建 ASP.Net Web Service

在 Visual Studio 2010 中创建 ASP.Net Web Service

第一步&#xff1a;创建一个“ASP.Net Empty Web Application”项目 第二步&#xff1a;在项目中添加“Web Service”新项目 第一步之后&#xff0c;Visual Studio 2010会创建一个仅含一个站点配制文件&#xff08;Web.config&#xff09;的空站点&#xff0c;其余的什么也没有…
阅读更多...
C#中缓存的使用

C#中缓存的使用

简介缓存是指可以进行高速数据交换的存储器&#xff0c;它先于内存与CPU交换数据&#xff0c;因此速率很快。由于CPU从内存中读取数据的速度比从磁盘读取快几个数量级&#xff0c;并且存在内存中&#xff0c;减小了数据库访问的压力&#xff0c; 所以缓存几乎每个项目都会用到。…
阅读更多...
artDialog ( v 6.0.2 ) content 参数引入页面 html 内容

artDialog ( v 6.0.2 ) content 参数引入页面 html 内容

/*! artDialog v6.0.2 | https://github.com/aui/artDialog */ 将页面某一隐藏的 div 的 html 内容传到 artdialog 的弹窗中&#xff0c;并且该 div 不会被删除&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8…
阅读更多...
Windows Phone 8开发环境搭建介绍

Windows Phone 8开发环境搭建介绍

1. 如果是Windows 8系统中安装VS2012&#xff0c;可以直接安装&#xff1a;　　 Windows Phone SDK 8.0 是一个功能齐全的开发环境&#xff0c;可用于构建 Windows Phone 8.0 和 Windows Phone 7.5 的应用和游戏。 Windows Phone SDK 将提供一个适用于 Windows Phone 的独立 Vi…
阅读更多...
java怎么做系统_Java系统监控怎么做

java怎么做系统_Java系统监控怎么做

Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件。它用来从许多平台收集系统和处理信息. 这些平台包括&#xff1a;Linux, Windows, Solaris, AIX, HP-UX, FreeBSD and Mac OSX. Sigar有C&#xff0c;C#&#xff0c;Java和Perl API&#xff0c;java版的API为sig…
阅读更多...
动态规划之两个字符串的最大子序列

动态规划之两个字符串的最大子序列

1、问题 求两个字符串的最大子序列 1）、子序列和子字符串有区别，子字符串（子串）必须连续，列如 s1 = "ABCDAB" s2= "BBCDAAB" s1和s2最大子序列有"BCDA","BCDB", "CDAB","ABAB","BCAB"...，子序…
阅读更多...
Tushare数据的绘图操作

Tushare数据的绘图操作

1.在代码里调试学习实在费劲&#xff0c;可以把数据取到df里&#xff0c;在交互界面里慢慢调试 2.柱状图 绘制柱状图&#xff0c;默认情况下乱&#xff0c;数据太密了 改用曲线图
阅读更多...
centos打架django + mysql环境

centos打架django + mysql环境

---恢复内容开始--- 1、安装python centos下&#xff0c;python已经自动安装过了 2、安装django 推荐使用pip安装 wget https://bootstrap.pypa.io/get-pip.py //下载get-pip.py 文件 python get-pip.py //执行一下&#xff0c;提示安装pip成功 pip install django //可以加…
阅读更多...
你真的了解Lambda表达式吗？

你真的了解Lambda表达式吗？

简介Lambda 是一种可用于创建委托或表达式目录树类型的匿名函数。通过使用 lambda 表达式&#xff0c;可以写入可作为参数传递或作为函数调用值返回的本地函数&#xff01;场景比如有这样一个场景&#xff0c;在给出的List集合中找出数字大于等于18的数字&#xff0c;假如我们不…
阅读更多...
python远程执行shell 防止注入脚本_解决 window 上python远程执行shell paramiko 下令 Permission denied...

python远程执行shell 防止注入脚本_解决 window 上python远程执行shell paramiko 下令 Permission denied...

1. 若是程序是在 Linux远程执行 , 那么遇到某些下令是不需要 再输入密码的但若是 python 是在内陆 , 用 paramiko包 远程ssh登录执行下令 , 就会遇到需要输入密码2.解决办法 , 在windows上面 ssh-keygen -t rsa -C “abby192.168.1.100” , 公钥的作用域是远程 IP用户名 为’…
阅读更多...
MT3608 高效率1.2MHz2A升压转换器和MT3608L 高效率1.2MHz 2.5A升压转换器 MT3608L和MT3608的区别

MT3608 高效率1.2MHz2A升压转换器和MT3608L 高效率1.2MHz 2.5A升压转换器 MT3608L和MT3608的区别

MT3608是一个恒定的频率&#xff0c;6引脚SOT23电流模式升压转换器的小&#xff0c;低功耗应用的目的。该MT3608开关在1.2MHz&#xff0c;并允许微小的&#xff0c;低成本的电容器和电感器使用2毫米或更小的高度内部软启动浪涌电流的结果&#xff0c;并延长电池寿命。 …
阅读更多...
CityEngine 2012与ArcGIS 10.2破解心得

CityEngine 2012与ArcGIS 10.2破解心得

安装及破解步骤&#xff1a; 1.卸载机子上原有的ArcGIS的License以及Desktop。 2.安装及破解CityEngine。&#xff08;安装包及注册码下载见点击打开链接&#xff09; 3.安装ArcGIS Desktop即可&#xff0c;不需要安装Lisence。 4.如果第三步结束后ArcGIS打不开&#xff0c…
阅读更多...
函数学习-abs()

函数学习-abs()

下面开始&#xff0c;今天的函数是abs()先看官方英文文档解释abs(x)Return the absolute value of a number. The argument may be a plain or long integer or a floating point number. If the argument is a complex number, its magnitude is returned.详解&#xff1a;返回…
阅读更多...
动态规划之编辑距离

动态规划之编辑距离

1、问题 例如两个字符串 FAMILY 和 FRAME ,有两种 对齐方式: 1)、 F_A MIL Y FRAME 2）、 _FAMILY FRAME 第 1 种对齐需要付出的代价: 4 ,插入 R ,将 I 替换为 E ,删除 L 、 Y 。 第 2 种对齐需要付出的代价: 5 ,插入 F，将 F 替换为 R ,将 I 替换为 E ,删除 L 、 Y 。…
阅读更多...
JsonRequestBehavior.AllowGet 方便浏览器调试

JsonRequestBehavior.AllowGet 方便浏览器调试

[HttpGet]public ActionResult getCoversationList(int CustomerId){// 获取用户相关的聊天数据&#xff0c;包括个人&#xff0c;群&#xff0c;系统(可以单独获取)return Json(new { result true, info "", msg "操作成功" }, JsonRequestBehavior.Al…
阅读更多...
基于.NET6的开源工业物联网网关

基于.NET6的开源工业物联网网关

什么是工业物联网网关工业物联网网关&#xff08;IIoTGateway&#xff09;是一种硬件设备或软件程序&#xff0c;作为本地设备(如PLC、扫码枪、机器人、数控机床、非标上位机等)与云端系统(如物联网平台、SCADA系统、MES系统等)之间的桥梁&#xff0c;在设备和云端之间流动的所…
阅读更多...
php之简单使用数据库

php之简单使用数据库

1.数据库连接 1.1用windows命令行链接数据库服务器 几个DOS命令 在DOS环境下命令后面没有分号&#xff0c;在MySQL环境下&#xff0c;命令后面有分号 进入盘符&#xff1a; 语法&#xff1a;盘符&#xff1a; 进入盘符下的某个文件夹 语法&#xff1a;cd 路径 上级目录&#xf…
阅读更多...
CityEngine生成不等间距桥墩

CityEngine生成不等间距桥墩

在CityEngine中建立高架桥时自动生成的桥墩属于几乎等距的桥墩&#xff0c;对于不等距的桥墩该如何处理&#xff1f;另外&#xff0c;等距桥墩会有产生很多问题&#xff0c;比如&#xff1a;桥墩会压盖在下方路面上。 解决思路&#xff1a;获取桥墩点位数据&#xff0c;之后使用…
阅读更多...
linux之vim操作快速跳到下一个空格和上一个空格命令

linux之vim操作快速跳到下一个空格和上一个空格命令

1、问题 vim里面如何再文本里面快速跳到下一个空格和上一个空格 2、操作 w是在文本里面快速跳到下一个空格 b是在文本里面快速跳到上一个空格
阅读更多...
有哪些小游戏的java代码_求一个Java小游戏代码（鼠标点击类小游戏）最好代码里面不要有中文...

有哪些小游戏的java代码_求一个Java小游戏代码（鼠标点击类小游戏）最好代码里面不要有中文...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼}else{black_count0;}if(chess[i][j]2){white_count;if(white_count5){JOptionPane.showMessageDialog(this,"白棋胜利");Clear_chess();return;}}else{white_count0;}}}for(int i0;i<11;i)//竖向到五个子赢棋{for(in…
阅读更多...
最新文章

Copyright @ 2022~2023