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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
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
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python控制台中实现进度条功能
2015/11/10 Python
python查看微信好友是否删除自己
2016/12/19 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
小学生综合素质评语
2014/04/23 职场文书
运动会入场口号
2014/06/07 职场文书
护理专业求职信
2014/06/15 职场文书
新党章的学习心得体会
2014/11/07 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang