Vue实现开心消消乐游戏算法


Posted in Javascript onOctober 22, 2019

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

效果展示#

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

Vue实现开心消消乐游戏算法

游戏规则:

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

任意两个方块都可以拖动

界面设计#

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

<div
 v-for="(item, index) in squareData"
 :key="index"
 class="row">
 <div
  v-for="(_item, _index) in item"
  :key="_index"
  class="square"
  :class="_item"
  @mousedown="dragStart(index, _index)"
  @mouseup="dragEnd">
  {{_item}}
 </div>
</div>

大家应该注意到了 :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所指的方块就行交换,一次类推,示意图如下:

Vue实现开心消消乐游戏算法

这样的话我们就可以把为空的上移到最顶层,并且不打乱顺序,然后我们在随机填充顶部的空方块就可以了。做完填充之后我们要再做一次消除算法,直到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实现开心消消乐算法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
layui选项卡效果实现代码
May 19 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
关于react-router的几种配置方式详解
Jul 24 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 #Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 #Javascript
微信小程序开发之转发分享功能
Oct 22 #Javascript
微信小程序转发事件实现解析
Oct 22 #Javascript
小程序点击图片实现png转jpg
Oct 22 #Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 #Javascript
微信小程序实现左侧滑动导航栏
Apr 08 #Javascript
You might like
国内咖啡文化
2021/03/03 咖啡文化
一个目录遍历函数
2006/10/09 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python http接口自动化脚本详解
2018/01/02 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python程序变成软件的实操方法
2019/06/24 Python
python math模块的基本使用教程
2021/01/16 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
入党自我评价范文
2014/02/02 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技