消消乐实现下坠_教你用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写一个开心消消乐相关推荐
- 消消乐实现下坠_手把手教你如何实现iOS消消乐小游戏Demo
引言 做消消乐Demo属于一个意外,本想借助学习iOS游戏开发把CoreAnimation学好,并完成第一个游戏Demo:俄罗斯方块.却在这过程中发现了一些实现消消乐的小技巧,于是兴起完成了这个小De ...
- 消消乐实现下坠_消消乐游戏算法实现
先上前端效果图 3消乐地图初始化的时候不允许有下面两种情况的发生,就是不允许3个(3个以上已经包含3个,所以只要判断3个就可以了)相同颜色的格子连在一起, 下图是两种情况,细分分为6种情况,就是初始点 ...
- 消消乐实现下坠_消消乐.cpp
#include #include #include #define High 600//定义画布长度与高度 #define Width 600 #define step 50//定义方块大小 str ...
- Python设置画布大小_教你用 Python 写一个搞笑版的“笨鸟”游戏:牛逼的黄瓜
我想你应该玩过这个鸟游戏: 想当年,小帅b和身边的朋友在玩这个游戏的时候玩到手到快废了... 今天,小帅b心血来潮,要不咱们自己用 Python 撸一个这样的游戏吧,想想还是挺好玩的. 那么接下来就是 ...
- 搞笑python代码_教你用 Python 写一个搞笑版的 “笨鸟” 游戏:牛逼的黄瓜
我想你应该玩过这个鸟游戏: 想当年,小帅b和身边的朋友在玩这个游戏的时候玩到手到快废了... 今天,小帅b心血来潮,要不咱们自己用 Python 撸一个这样的游戏吧,想想还是挺好玩的. 那么接下来就是 ...
- python广告搞笑_教你用 Python 写一个搞笑版的“笨鸟”游戏:牛逼的黄瓜
我想你应该玩过这个鸟游戏: 想当年,小编和身边的朋友在玩这个游戏的时候玩到手到快废了... 今天心血来潮,要不咱们自己用 Python 撸一个这样的游戏吧,想想还是挺好玩的. 首先我们分析一下这个鸟游 ...
- python搞笑语句_教你用 Python 写一个搞笑版的“笨鸟”游戏:牛逼的黄瓜
我想你应该玩过这个鸟游戏: 想当年,小编和身边的朋友在玩这个游戏的时候玩到手到快废了... 今天心血来潮,要不咱们自己用 Python 撸一个这样的游戏吧,想想还是挺好玩的. 首先我们分析一下这个鸟游 ...
- python写邮箱系统_教大家用Python写一个简单电子邮件发信器
嘛~炎热的暑假大家都在家干些啥呢?up主本人每天就是摸鱼哒!为了让这个懒懒的up每天从床上早点爬起来,我可是立了不少flag呢~那就先不多说了,直接开始正文吧. 声明一下,本文内容为原创,如果引用其他 ...
- python自动填写小程序表单_新年好!教大家用Python写一个自动回复拜年信息的小程序!...
原标题:新年好!教大家用Python写一个自动回复拜年信息的小程序! 过年期间,想必大家都收到很多拜年信息吧!有没有也被拜年短信(大部分是群发)搞得很焦虑?不回复似乎显得很没有礼貌,一一回复又累心劳神 ...
最新文章
- 磁共振检查头部能检测出什么_什么是磁共振血管造影?检查价格贵吗?
- 一根Express Route同时支持ARM和ASM的VNET
- oracle激活锁定用户,oracle 锁用户,oracle解除用户锁定
- Your PC needs to be repaired
- ping不通docker_初识docker
- [信息安全] 3.HTTPS工作流程
- [FFmpeg] 编译官方例子
- nginx源码包编译安装
- 拜托!面试请不要再问我Spring Cloud底层原理
- 共模和差模信号及其噪音抑制
- 无线通信基础知识13:数字通信之信道编码
- python中heapq的库是什么_详解Python中heapq模块的用法
- 修改文件句柄:ulimit 系统设置脚本(避免设置不彻底而无效)
- BZOJ 1106: [POI2007]立方体大作战tet
- 欣赏 Pianissimo!!! 钢琴演奏会
- Android 万能遥控 开源,快速实现WIFI红外遥控器(ESP8266 SoC模式)
- 《自我分析》卡伦·霍尼阅读笔记1
- 本月,我最推荐的重疾保险性价比排行榜
- 【DataHub】 现代数据栈的元数据平台--如何将数据血缘关系写入DataHub
- php利用微信支付充值,利用thinkPHP怎么实现一个微信支付功能