消消乐 游戏算法html,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实现开心消消乐算法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
消消乐 游戏算法html,Vue实现开心消消乐游戏算法相关推荐
- python 小游戏程序_用 Python 写个消消乐小游戏
文 |野客 来源:Python 技术「ID: pythonall」 提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受欢迎程度可见一斑,本文我们使用 ...
- python迷宫小游戏代码_用 Python 写个消消乐小游戏
提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受欢迎程度可见一斑,本文我们使用 Python 来做个简单的消消乐小游戏. 很多人学习python,不 ...
- 【嵌入式底层知识修炼】基于通用消抖算法,拓展通用非阻塞Key按键识别算法
文章目录 01 - 通用消抖算法 02 - Key按键识别需求 03 - 拓展通用非阻塞Key按键算法 04 - 实际使用方法 05 - 总结 首先学习别人的东西,然后吸收别人的东西,接着应用并改造别 ...
- 自适应对消算法c语言,LMS自适应对消算法
LMS算法最小均方误差算法,是一种自适应滤波算法.该算法通过对输入信号进行滤波输出一个信号y(n),将输出信号与期望输出信号作差得到一个误差信号,再将误差信号输入到自适应滤波器中形成一个反馈回路.LM ...
- VUE+Canvas实现简单的五子棋游戏
之前的canvas小游戏系列欢迎大家戳: <VUE实现一个Flappy Bird~~~> <VUE+Canvas实现上吊火柴人猜单词游戏> <VUE+Canvas 实现桌 ...
- 组合游戏系列5: 井字棋、五子棋AlphaGo Zero 算法实战
来源 | MyEncyclopedia 上一篇我们从原理层面解析了AlphaGo Zero如何改进MCTS算法,通过不断自我对弈,最终实现从零棋力开始训练直至能够打败任何高手.在本篇中,我们在已有的N ...
- 游戏制作中的大宝剑---常用的数据结构与算法
前言 时间流逝,物是人非,就好像涌动的河流,永无终焉,幼稚的心智将变得高尚,青年的爱慕将变得深刻,清澈之水折射着成长. ----------<塞尔塔传说> PS:为了方便大家阅读,个人认为 ...
- 基于大数据分析架构设计采用基于协同过滤推荐+余弦相似度算法+springboot+vue.js 实现新闻推荐系统
针对海量的新闻资讯数据,如何快速的根据用户的检索需要,完成符合用户阅读需求的新闻资讯推荐?本篇文章主要采用余弦相似度及基于用户协同过滤算法实现新闻推荐,通过余弦相似度算法完成针对不同新闻数据之间的相似 ...
- 使用vue写一个转盘抽奖小游戏
好的,下面是在 Vue 中编写转盘抽奖小游戏的一些建议步骤: 创建一个 Vue 应用,并在其中创建一个组件来表示转盘. 在组件的模板中,使用 HTML 元素 (例如 div) 和 CSS 样式创建转盘 ...
- html九图拼图游戏代码,基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列 ...
最新文章
- usaco Telecowmunication(网络流)
- 《快速搞垮一个技术团队的20个“必杀技”》
- 李迅雷+但斌+趋势的力量+对话PPT
- Android application捕获崩溃异常
- 用 Go 开发 Go 编译器
- cygwin是一个在windows平台上运行的unix模拟环境,下载与安装
- Hyperledger Fabric区块链工具configtxgen配置configtx.yaml
- otis电梯服务器tt使用说明_南充私人电梯
- Matlab求拉普拉斯变换和拉普拉斯反变换
- 使用Java完成Socket文件传输
- Linux:chattr、lsattr、chage、history和/etc/login.defs解读
- BAPI_PO_CREATE1 创建采购订单
- 云服务显示服务器异常,云服务器显示异常登录
- 巨斧砍大树-sdut
- 腾讯云乐固客户端加固打包上线流程
- 浏览器实现pdf下载、ms http下载、IE不兼容
- 基于S32K的MBD开发环境搭建
- 创建两个线程,其中一个输出1-52,另外一个输出A-Z。输出格式要求:12A 34B 56C 78D 依次类推
- 又一本宝藏级Python教程,清华大学监制出版,附电子版!
- 信号在传播中产生的不同衰落:多径效应、时延扩展和相干宽带