IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> iVX无代码挑战五秒游戏制作 -> 正文阅读

[JavaScript知识库]iVX无代码挑战五秒游戏制作

一、五秒挑战游戏简介及思考

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/

五秒挑战游戏指的是点击一个按钮开始计时,随后需要用户再次点击计时按钮,将会停止计时,当计时的时间等于五秒时将挑战成功,否则挑战失败,并且在挑战失败时将会提示超过了多少秒又或者还差多少秒。

此时我们分析该需求,有一个贯穿整个游戏的功能是计时,这个计时咱们可以通过触发器进行制作,只需要设置触发器的触发间隔为0.1秒即可,因为咱们需要显示分秒的内容,此时创建一个变量为分秒用于记录分秒时间,每隔0.1秒时则使分秒变量加1,加1之后若当前分秒大于等于60就可以给与秒加1,所以对于这个秒我们也需要创建一个变量用于记录,所以当创建一个秒变量后即可对其进行加1,最后将两者显示在页面之上即可实现一个计时器的界面。

当界面实现后,我们还需要对应的对记录数值进行判断,判断方式直接用过条件进行,此时使用秒数5减去当前记录的时间若大于0,那么此时就还差多少秒到达五秒,若减去当前记录秒数后是小于0的,则表示已经超出了多少秒,这样就可以判断是超过了还是还差多少时间,最后我们还需要注意,若5减去记录秒数等于0后,还需要计算分秒值,分秒值相减等于0才可以说是完全到达了五秒。

二、页面制作

此时我们开始制作当前页面,创建一个相对应用项目后,点击前台创建一个页面:
在这里插入图片描述

设置当前页面的水平和垂直对齐为居中,方便接下来我们需要创建的行和列居中对齐:
在这里插入图片描述
接着创建一个行,并且设置这个行的宽高,宽小于当前界面宽即可左右居中:
在这里插入图片描述
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述
接着咱们需要往这个游戏区域行内添加文本,显示对应的秒数和分秒内容:
在这里插入图片描述
此时页面显示如下,发现页面并不对其:
在这里插入图片描述
此时我们需要创建一个对应的行对其进行包裹,并且设置这个行的垂直对齐为居中即可,首先创建行,并且把内容拖放其中:
在这里插入图片描述
由于行是默认宽度100%的,所以在此时咱们需要更改宽高为包裹:
在这里插入图片描述
接着更改这个行的垂直方向对其为底部:
在这里插入图片描述
此时页面如下:
在这里插入图片描述
接着添加一个行,命名为计时,设置这个行的水平对其为居中:
在这里插入图片描述
在这里插入图片描述
接着调一下这个按钮距离顶部的距离以及这个按钮的样式效果:
在这里插入图片描述

三、功能制作

在第一点中我们说过计时要触发器,那么此时创建一个触发器命名为计时触发器:
在这里插入图片描述
设置时间间隔为0.01秒:
在这里插入图片描述

接着创建一个变量命名为分秒并且默认值为0:
在这里插入图片描述
给按钮设置点击事件,点击后出发触发器进行计时:
在这里插入图片描述
接着创建一个变量为秒:
在这里插入图片描述
当分秒等于60时给秒进行加1:
在这里插入图片描述
并且此时还需要对分秒置零:
在这里插入图片描述
最后由于我们的秒数在小于10的时候需要设置对应的0开头的数字,所以此时再加上条件,小于10则在前面加个0否则就不加,秒也是一样,我们查看代码:
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述
开始计时后我们需要给这个按钮显示停止计时,此时一个布尔变量作为状态监测,若当前状态是开始游戏,那么文本就显示停止计时,否则显示开始计时,这样是比较好做的。创建一个布尔变量:
在这里插入图片描述
接着在开始计时时设为true:
在这里插入图片描述
随后给与文本绑定内容,若当前是否计时为false就显示开始计时,否则显示停止计时:
在这里插入图片描述
此时还需要到按钮中添加对应时间的相斥:
在这里插入图片描述
此时页面可以对这两个值进行切换:
在这里插入图片描述
此时还可以优化一下,若是否计时等于true时能执行的内容以及为false时执行的内容:
在这里插入图片描述
接着我们判断,如果在是否计时为true,也就是已经开始计时的时候若点击了当前按钮,那么肯定是要停止计时,那么此时开始判断秒数,我们用4秒减计时的秒若为0并且用60减去分秒计时也为0那么就表示挑战成功:
在这里插入图片描述
用4减的原因是你也有分秒值,分秒值60也是秒数,接着再判断如果4减去秒数大于0,那就是还没超过的情况,再接着判断分秒的值是多少是刚好还是还没到,如果到了那就是还差个整秒,否则就是还需要分秒值,那么此时就增加一个条件后再增加另外一个条件判断分秒值即可:
在这里插入图片描述
那么最后再加一个超过分秒值的就解决了:
在这里插入图片描述
最后将秒数和分秒置零:
在这里插入图片描述
那么即可完成:
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-23 00:51:34  更:2022-06-23 00:52:33 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年9日历 -2024/9/20 7:55:26-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码