java开心消消乐代码_Vue实现开心消消乐游戏算法

摘要:这篇Vue栏目下的“Vue实现开心消消乐游戏算法”,介绍的技术点是“开心消消乐、Vue、开心、游戏、算法、实现”,希望对大家开发技术学习和问题解决有帮助。

之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来。后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来。

效果展示#

先在这里放一个最终实现的效果,还是一个比较初级的版本,大家有什么想法欢迎评论哦

游戏规则:

初始时会给玩家十分的初始分,每拖动一次就减一分,每消除一个方块就加一分,直到最后分数为0游戏结束

任意两个方块都可以拖动

界面设计#

页面的布局比较简单,格子的数据是一个二维数组的形式,说到这里大家应该已经明白界面是怎么做的了。

v-for="(item, index) in squareData"

:key="index"

class="row">

v-for="(_item, _index) in item"

:key="_index"

class="square"

:class="_item"

@mousedown="dragStart(index, _index)"

@mouseup="dragEnd">

{{_item}}

大家应该注意到了 :class="_item" 的写法,动态命名class,使得其每个种类的方块的颜色都不同,最后可以按照同色消除的玩法就行操作。

.square.A{

background-color: #8D98CA;

}

.square.S{

background-color: #A9A2F6;

}

/*其余操作相同*/

同时在玩家点击方块的时候方块会左右摆动以表示选中了此方块,还可以提升游戏的灵动性。关于HTML动画的实现方式有很多,在这里我们使用CSS animation进行操作,代码如下:

@keyframes jitter {

from, 50%, to {

transform: rotate(0deg);

}

10%, 30% {

transform: rotate(10deg);

}

20% {

transform: rotate(20deg);

}

60%, 80% {

transform: rotate(-10deg);

}

70% {

transform: rotate(-20deg);

}

}

/* 只要是用户点击不动,动画就不会停止 */

.square:active{

animation-name: jitter;

animation-duration: 0.5s;

animation-iteration-count: infinite;

}

核心算法#

消除算法

上面提到我之前是做过一道题是判断一个二维数组中有没有可消的元素,有的话是多少个。

在这里我们可以这样想,最开始遍历一整个二维数组,每次定义一个 X0 , X1 , Y0, Y1, 然后每次计算其上下左右连续相同方块的位置,在这个过程中要注意边界问题,然后我们记录下这四个变量,只要 |X0-X1+1|>=3 或者 |Y0-Y1+1|>=3,我们就可以将这个方块的坐标加入到 del数组中。

遍历完一整个二维数组之后,我们就可以将 del数组中对应坐标位置的方块内容变为 '0', 由于我们没有对 0 定义样式,所以在没有执行下落算法之前变为 0 的方块为白色。

下落算法

在我们将相应的方块白色之后,其上面的方块应该下落,在这里我的思想是这个样子的。

按照列遍历二维数组,定义一个指针 t,指向上次不为 0 的方块位置,一旦遇到方块不为 0 的格子就将其与t所指的方块就行交换,一次类推,示意图如下:

这样的话我们就可以把为空的上移到最顶层,并且不打乱顺序,然后我们在随机填充顶部的空方块就可以了。做完填充之后我们要再做一次消除算法,直到del数组的长度为空为止,这个道理大家应该都能想得到。

代码如下

clear(): void {

const m: number = 10;

const n: number = 10;

while (true) {

const del: any[] = [];

for (let i: number = 0; i < m; i++) {

for (let j: number = 0; j < n; j++) {

if (this.squareData[i][j] === '0') {

continue;

}

let x0: number = i;

let x1: number = i;

let y0: number = j;

let y1: number = j;

while (x0 >= 0 && x0 > i - 3 && this.squareData[x0][j] === this.squareData[i][j]) {

--x0;

}

while (x1 < m && x1 < i + 3 && this.squareData[x1][j] === this.squareData[i][j]) {

++x1;

}

while (y0 >= 0 && y0 > j - 3 && this.squareData[i][y0] === this.squareData[i][j]) {

--y0;

}

while (y1 < n && y1 < j + 3 && this.squareData[i][y1] === this.squareData[i][j]) {

++y1;

}

if (x1 - x0 > 3 || y1 - y0 > 3) {

del.push([i, j]);

}

}

}

if (del.length === 0) {

break;

}

this.score += del.length;

for (const square of del) {

this.$set(this.squareData[square[0]], square[1], '0');

}

for (let j: number = 0; j < n; ++j) {

let t: number = m - 1;

for (let i: number = m - 1; i >= 0; --i) {

if (this.squareData[i][j] !== '0') {

[this.squareData[t][j], this.squareData[i][j]] = [this.squareData[i][j], this.squareData[t][j]];

t -= 1;

}

}

}

}

},

游戏结束#

分数为 0 的时候游戏结束,此时在执行一遍初始化函数,重新生成一个开心消消乐格子,将分数初始化为10.

if (this.score <= 0) {

if (confirm('分数用光了哦~~')) {

this.init();

} else {

this.init();

}

}

项目源代码#

目前项目是在github上托管,欢迎PR!点此跳转

总结

以上所述是小编给大家介绍的Vue实现开心消消乐算法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Java大数据社区网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

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

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

相关文章

不能启动u盘 uefi_不知道怎么进入主板设置U盘启动,试试这些方式

一个正常运行的电脑&#xff0c;你可能安装的是Windows 或 Linux&#xff0c;但无论你是选择哪个系统&#xff0c;现代个人电脑都是绕不开的BIOS/UEFI的。通过U盘安装系统&#xff0c;你需要BIOS/UEFI来修改启动项。启动U盘&#xff0c;移动硬盘上的Windows to Go&#xff0c;你…

python弹出框多一个空白框_Selenium+python3 应对多个弹出框存在(alert_is_present)判断和处理...

from selenium.webdriver.support import expected_conditions as ECfrom selenium.common.exceptions import UnexpectedAlertPresentException#存在弹窗处理方法一 &#xff1a;EC.alert_is_present()(driver)检测是否存在弹窗try:WebDriverWait(driver, 10).until(EC.title_…

4 插件模块_设计师必备的ps插件推荐

Photoshop可以说是每个设计师都必须会用的设计工具之一了。为了设计需求&#xff0c;大家会在Photoshop里搭配一些PS插件来使用&#xff0c;提高工作效率。这篇文章就为大家整理了做设计的最佳插件&#xff0c;一起来看看吧。ps设计助理&#xff08;高效设计ps插件&#xff09;…

linux syslog 删除文件_Linux没有当心删除日记文件syslog怎样办

体系运用暂了须要对日记文件的内容停止清算&#xff0c;但有时果为大意而将日记文件给增除了了&#xff0c;而没有是革除日记内容&#xff0c;逢到那种状况该若何解决呢&#xff1f;其真增除了的日记文件syslog是能够规复的&#xff0c;随小编去看看吧。上面以Unbutu体系为例&a…

苹果电脑更改sd卡只读_SD卡变为只读系统

2.使用用fsck – y 来修复文件系统转自&#xff1a;http://blog.chinaunix.net/uid-20753645-id-1877931.html问题&#xff1a;将上述这些存储设备插入USB端口或读卡设备后&#xff0c;Ubuntu系统会自动mount这些设备到一个挂载点并在桌面上显示访问图标。但是某些情况下&#…

arraylist扩容是创建新数组吗 java_arraylist扩容机制要怎么实现?arraylist怎么扩容...

ArrayList大家都知道了吧&#xff0c;这是一个动态数组。以java语言来说&#xff0c;数组是定长的&#xff0c;在被创建之后就不能被加长或缩短了&#xff0c;因此&#xff0c;了解它的扩容机制对使用它尤为重要。下面&#xff0c;我们就一起来看看它的扩容机制是怎么实现的吧。…

jpa 动态sql拼接_jpa 如何优雅的实现动态sql

动态语言注解import www.ijava.com.entity.User;/** (1)动态语言注解对于创建动态的查的语言。MyBatis提供了多个注解如&#xff1a;e68a843231313335323631343130323136353331333365656563InsertProvider,UpdateProvider,DeleteProvider和SelectProvider&#xff0c;这些都是建…

广联达2018模板算量步骤_广联达钢结构算量软件可以和广联达量筋合一GTJ2018互导吗?...

钢结构软件和量筋合一软件互导https://www.zhihu.com/video/1164108225778741248钢结构软件和量筋合一软件互导一、问题广联达钢结构算量软件可以和广联达量筋合一GTJ2018互导吗&#xff1f;二、合理答案可以&#xff0c;但是对软件版本有要求。需要广联达钢结构算量软件版本在…

安卓beforetextchanged_安卓onTextChanged参数解释及实现EditText字数监听 Editable使用

尊重原作者:此篇文章是借鉴原作者地址 的博文 并进行修改和增加补充说明,我只是补充和修改:我感觉这篇文章经过我的补充 市面多少文本操作变化 你都知道怎么做了.并且感觉是非常详细关于 android 文本编辑框的文本变化 并且通俗易懂(内含动态图),为了大家方便查看 我这里复制作…

mysql存储过程捕获错误处理_mysql存储过程之异常处理篇

mysql存储过程也提供了对异常处理的功能&#xff1a;通过定义HANDLER来完成异常声明的实现语法如下&#xff1a;DECLARE handler_type HANDLER FOR condition_value[,...] sp_statement handler_type: CONTINUE | EXIT condition_value: SQLSTATE [VALUE] sqlstate_value | con…

memlock mysql_mysql配置详解(不断更新)

1. back_log指定MySQL可能的连接数量。当MySQL主线程在很短的时间内得到非常多的连接请求&#xff0c;该参数就起作用&#xff0c;之后主线程花些时间(尽管很短)检查连接并且启动一个新线程。back_log参数的值指出在MySQL暂时停止响应新请求之前的短时间内多少个请求可以被存在…

mysql c2_Mysql具有C2级安全性

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼those who are authorized for audit data. The TCB shall be able to record the following types of events: use of identificationand authentication mechanisms, introduction or objects into a users address space (e.g.,…

mysql orm c语言_【译】Simple MySQL ORM for C

一直不知道有ORM这种东西&#xff0c;直到和 海坡 交流后才接触。在项目中&#xff0c;需要将数据存储到数据库中&#xff0c;首先想到的是生成各种raw SQL的解决方法。但随着项目的进展&#xff0c;发现它很不灵活。譬如可能因为有新的需求&#xff0c;在数据库student表中添加…

ruby mysql 占位符_ruby操作常用数据库

使用Ruby DBI模块目录Ruby DBI模块为ruby程序访问数据库提供了一个与数据库无关的接口&#xff0c;就像perl的DBI模块一样。这篇文章将讲述如何编写基于DBI的ruby程序。这篇文章是对DBI规范文档(specification documents)的补充&#xff0c;而不是要替代规范文档&#xff0c;更…

threejs获取模型坐标_Threejs倒影实现解析

倒影是在自然界中非常常见的一种现象&#xff0c;例如水面倒影、镜子。我们都知道&#xff0c;眼睛之所以能够看到某个物体&#xff0c;是因为物体本身能够发光或者物体能够反射其它的物体所发的光&#xff0c;这些光进入到我们的眼里就形成了该物体影像。倒影形成也是一种光学…

aws java mysql_java - AWS EC2 / MySql - spring boot无法从datasource确定jdbc url - 堆栈内存溢出...

我有一个简单的Spring Boot应用程序&#xff0c;我试图在基于Amazon AMI的Amazon EC2实例上部署。 它使用MySql数据库(版本8.0.15)。我在AWS上创建了数据库&#xff0c;当我从本地系统指向它的配置时&#xff0c;它可以工作。 我也可以从MySql Workbench访问它。但是当我将Spri…

debian 删除mysql数据库_Debian中完全卸载MySQL的方法

作者&#xff1a; 字体&#xff1a;[增加 减小] 类型&#xff1a;转载这篇文章主要介绍了Debian中完全卸载MySQL的方法,同时介绍了清理方法,可以做到彻底卸载mysql,需要的朋友可以参考下之前服务器上配置测试用的服务环境&#xff0c;我偷懒顺手用网上现成的脚本进行安装&#…

python123外汇兑换计算器_Python 3.x--使用re模块,实现计算器运算实例

1 importre23 #乘除运算处理&#xff0c;可以处理不含括号的加减和乘除函数(只处理乘除)4 defmulti_and_divi(arg):5 #传入参数为列表&#xff0c;如&#xff1a;[3*2-1*9/3,0]6 val arg[0]7 #对字符串进行乘除匹配&#xff1a;如3*2-1*9/3&#xff0c;就匹配&#xff1a;3*28 …

python修改文件名字数字_python实现多进程按序号批量修改文件名的方法示例

本文实例讲述了python实现多进程按序号批量修改文件名的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;说明文件名命名方式如图&#xff0c;是数字序号开头&#xff0c;但是中间有些文件删掉了&#xff0c;序号不连续&#xff0c;这里将序号连续起来&#xff0c;…

遗传算法求函数最大值实验_小知识:什么是遗传算法

1 什么是遗传算法遗传算法(GeneticAlgorithm, GA)是模拟达尔文生物进化论的自然选择和遗传学机理的生物进化过程的计算模型&#xff0c;是一种通过模拟自然进化过程搜索最优解的方法。其主要特点是直接对结构对象进行操作&#xff0c;不存在求导和函数连续性的限定&#xff1b;…