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大数据社区网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
java开心消消乐代码_Vue实现开心消消乐游戏算法相关推荐
- java开心消消乐代码_今晚请屏住呼吸,开心消消乐拍电影了!
一眨眼 村长已经和大家在一起六年啦 在这些日子里 我们在一起慢慢长大 有些人褪去稚嫩,步入社会 有些人在外打拼,为梦想奋斗 有些人功成名就,却遗失幸福 ...... 但无论你是哪一种 还记得让你最开心 ...
- android飞翔的小鸟游戏素材包_开心消消乐×愤怒的小鸟:为开心而战
手机里总有那么一些游戏,是你一旦不小心打开,就完全停不下来的.在这份"一直玩一直爽游戏清单"里,绝对少不了开心消消乐和愤怒的小鸟的身影. 神奇的是,在2020的夏天,它们合体了!在 ...
- 风电光伏的场景生成与消减-matlab代码 可利用蒙特卡洛模拟或者拉丁超立方生成光伏和风电出力场景
风电光伏的场景生成与消减-matlab代码 可利用蒙特卡洛模拟或者拉丁超立方生成光伏和风电出力场景,并采用快速前推法或同步回代消除法进行削减,可以对生成场景数和削减数据进行修改,下图展示的为1000个 ...
- 消消乐 游戏算法html,小游戏版消消乐
概述:最近看了点算法,为了对其有深刻的体会,利用周末时间撸了一个简易版的三消游戏,采用JS+Canvas实现,没有使用额外的游戏引擎,对于初学者来说,也比较容易入门的.下面是小游戏效果展示: 效果展示 ...
- java订单类_使用Java创建一个订单类代码实例
这篇文章主要简介了使用Java创建一个订单类代码实例,文中通过示例代码简介的非常具体,对大家的学习或者工作具有一定的参考学习网上卖,需要的朋友可以学习下 需求描述 定义一个类,描述订单信息 订单id ...
- java动画代码_利用Java制作字符动画实例代码
前言 今晚闲来无事,整理了一下电脑中尘封已久的旧代码,看着那些年自己写过的代码,踩过的坑,顿时老泪纵横.正当在感叹之际,突然发现在"马克思"文件夹下出现了一个好玩的项目,那就是N年 ...
- Java框架JSON-RPC项目demo代码实战 + JAVA WEB配置虚拟目录(转自21天java web开发)
Java框架JSON-RPC项目demo代码实战 备注 JAVA WEB配置虚拟目录(转自21天java web开发) https://blog.csdn.net/wjxbj/article/det ...
- java字典写实例,基于JAVA的新华字典接口调用代码实例
基于JAVA的新华字典接口调用代码实例 接口描述:基于JA V A的新华字典接口调用代码实例 接口平台:聚合数据 import java.io.BufferedReader; import java. ...
- Java文件上传功能代码 —— 普遍适用
版权声明:本文为博主原创文章,如需转载,请标明出处. https://blog.csdn.net/alan_liuyue/article/details/72782207 一. 前言 通过之前的博 ...
最新文章
- docker desktop使用入门
- Docker创建自己的github(Gitea)
- mysql 源头锁,mysql 使用手册 - 追梦,一个伟大程序员的源头。 - OSCHINA - 中文开源技术交流社区...
- linux中将文本中的单词换掉的指令_从零开始学Linux运维|19.文本处理相关命令(2)...
- android 缩进轮播图,如何利用纯css实现图片轮播
- mac obs 录屏黑屏_有了它,我把其他录屏软件都卸载了!
- linux SHELL下替代sed、ask的常用字符串处理(截取,判断、替换)
- hdu 3255 Farming(扫描线)
- 5.Hbase API 操作开发
- 使用Gson序列化对象将属性值中“=”转为“\u003d”问题及解决
- 选拔人才要关注的七个方面
- 5M1E分析法—质量管理纵向无死角
- 用python玩3x3数字华容道
- linux中ftp服务器的搭建和配置
- Java 并发核心机制
- FPGA中的时钟设计1
- sql server设置外键
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
- 办公神器QuickBot前来内卷 请赐教
- 控制寄存器(CR0,CR1,CR2,CR3)