Vue2实现别踩白块(第一种)

实际效果:可选模式

在这里插入图片描述

开始按钮

在这里插入图片描述

游戏界面

在这里插入图片描述

游戏失败(不点击任何黑块)

在这里插入图片描述

游戏中(点击黑块变灰色)

在这里插入图片描述

功能简介:

1、点击无尽模式,就是常规速度,定时器20毫秒,然后无限计分
2、急速模式,比常规快一倍,定时器8毫秒
3、计时模式,限时60秒,定时器20毫秒,计分
以上所有模式,点击白块直接失败,点击黑块得计一分。最高分数和最长时间,这里只进行了存储,没有写比较计算的逻辑。可以自行补全

代码逻辑:

此别踩白块的整体思路为:
1、数组存放白块数据:二维数组,数组内部单个元素为一个四位数字的数组,其中1代表黑块,0代表白块,一行四块。

blocksArr:[ // [1,0,0,0], // [0,0,1,0], ],
2、当点击开始按钮的时候,开始定时器,开始向数组插入一行随机生成的带有一个黑块标记的四位数组。然后开始改变容器的top值,使之向下移动。点击黑块会将1修改为2,当数组长度为6进行循环判断其中是否存在未被点击的黑块,如有则游戏结束。否则就会删除最后一行数据。

实际代码:
<template><div class="box" ref="box"><!-- 菜单页 --><div class="menu-page" v-if="showMenu"><div class="menu-item" v-for="(item,index) in menuArr" :key="index" @click="chooseMode(item)">{{ item.name }}<span v-show="item.key=='highest'">:{{ historyHighestScore }}</span><span v-show="item.key=='longest'">:{{ historyLongestTimeLen }}s</span></div></div><!-- 内部 --><!-- 提示模式 --><div class="tips-mode" v-show="showModeTips&&!showMenu">当前模式:<span v-if="gameMode=='infinite'">无尽模式</span><span v-if="gameMode=='fast'">急速模式</span><span v-if="gameMode=='timeLimit'">计时模式</span></div><!-- 计时 --><div class="time-num" v-show="showSurvivalTime&&!showMenu">存活时间:<span>{{ survivalTime||0 }}s</span></div><!-- 倒计时 --><div class="time-num" v-show="showLimitTimeLen&&!showMenu">时间:<span>{{ limitTimeLen||0 }}s</span></div><!-- 计分 --><div class="score-num" v-if="showScore&&!showMenu&&(showSurvivalTime||showLimitTimeLen)">分数:<span>{{ score }}</span></div><div class="scroll" 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/157353.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java使用pdfbox进行pdf和图片之间的转换

简介 pdfbox是Apache开源的一个项目,支持pdf文档操作功能。 官网地址: Apache PDFBox | A Java PDF Library 支持的功能如下图.引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox-app</artifactId><version>…

【源码分析系列】antdv table滚动时固定表头

背景 当页面滚动的时候&#xff0c;如果超过表格的部分&#xff0c;表格的头部会固定在某个位置&#xff0c;方便用户看到数据栏的标。项目采用的是vue2antdv&#xff0c;但是这个版本的table没有sticky属性&#xff0c;所以需要自行解决。 滚动前&#xff1a; 滚动后&#x…

做海外问卷调查有什么答题技巧和方法?

大家好&#xff0c;我是橙河老师&#xff0c;这篇文章聊一聊做海外问卷调查有什么答题技巧和方法&#xff1f; 海外问卷调查&#xff0c;其实就是一些外国公司&#xff0c;对外发放的有偿市场调查问卷&#xff0c;目的是收集消费者的意见和反馈&#xff0c;我们只要按照要求去…

Redis Sentinel 哨兵模式

Sentinel 哨兵模式 Redis Sentinel 官网 Redis 的 Sentinel 文档 -- Redis中国用户组&#xff08;CRUG&#xff09; Sentinel Redis 命令参考&#xff08;红色&#xff09; Sentinel 通过监控的方式获取主机的工作状态是否正常&#xff0c;当主机发生故障时&#xff0c; Senti…

Postman测试金蝶云星空Webapi【协同开发云】

文章目录 Postman测试金蝶云星空Webapi【协同开发云】环境说明业务背景大致流程具体操作请求登录接口请求标准接口查看保存提交审核反审核撤销 请求自定义接口参数是字符串参数是实体类单个实体类实体类是集合 其他 Postman测试金蝶云星空Webapi【协同开发云】 环境说明 金蝶…

性能测试计划注意事项

在做任何事情之前,唯有进行了良好的计划,方可收到好的效果,性能测试 也是如此,一份定义明确的测试计划将为我们的测试提供良好的保证。下面和大 家讨论一下制定性能测试计划时的一些注意事项。 1. 分析应用程序 测试人员应当对系统的软硬件以及配置情况非常熟悉,这样模…

页面淘汰算法模拟实现与比较

1.实验目标 利用标准C 语言&#xff0c;编程设计与实现最佳淘汰算法、先进先出淘汰算法、最近最久未使用淘汰算法、简单 Clock 淘汰算法及改进型 Clock 淘汰算法&#xff0c;并随机发生页面访问序列开展有关算法的测试及性能比较。 2.算法描述 1. 最佳淘汰算法&#xff08;Op…

Redis与Mysql的数据一致性(双写一致性)

双写一致性&#xff1a;当修改了数据库的数据也要同时的更新缓存的数据&#xff0c;使缓存和数据库的数据要保持一致。 一般是在写数据的时候添加延迟双删的策略 先删缓存 再修改数据 延迟一段时间后再次删除缓存 这种方式其实不是很靠谱 一致性要求高 共享锁&#xff1a;读…

制作网页版H5页面商城源码系统+随心DIY 带前后端完整搭建教程

随着智能手机的广泛普及&#xff0c;人们越来越依赖手机进行日常生活中的各种活动&#xff0c;包括购物。传统的PC端购物模式已经无法满足人们的需求&#xff0c;因此开发移动端的购物系统势在必行。而现如今H5技术不断发展成熟&#xff0c;使得在手机等移动设备上展示网页版商…

vue-cli5.0.x优雅降级,配置项目兼容旧版浏览器

兼容低版本谷歌浏览器 vue-cli5.0.x脚手架下的&#xff0c;如何降低项目版本以适用于底版本的浏览器。 直接使用默认配置打包部署出来的项目再40&#xff0c;60、70版本的谷歌浏览器跑不起来&#xff0c;蓝屏或者浏览器白屏一般这种情况都需要通过Babel去做转换&#xff0c;我…

数据库概论

目录 什么是数据库数据库的概念模型层次模型网状模型关系模型 为什么要使用关系型数据库完整性约束结构化查询语言SQL基本语句 什么是数据库 考虑这些问题&#xff1a;当用户使用软件计算时&#xff0c;如果想要保存计算结果或者想选择不同的题目&#xff0c;是否要保存、读取…

爱写bug的小邓程序员个人博客

博客网址: http://www.006969.xyz 欢迎来到我的个人博客&#xff0c;这里主要分享我对于前后端相关技术的学习笔记、项目实战经验以及一些技术感悟。 在我的博客中&#xff0c;你将看到以下主要内容&#xff1a; 技术文章 我将会分享我在学习前后端技术过程中的一些感悟&am…