当前位置: 首页 > web >正文

【HTML】【Web开发】滑动条挑战

最近在思考如何开发一些入门级的迷你游戏,于是抽空写了个HTML的滑动条小游戏。

游戏规则如下:

  1. 在[0, 100]区间内随机生成一个目标值,显示为:X%
    在这里插入图片描述

  2. 倒计时 3 秒过后,出现 10 秒的挑战倒计时和【停止】按钮
    在这里插入图片描述
    挑战倒计时结束时,如果没有点【停止】按钮,则挑战超时:

  3. 点击【停止】,滑块将慢慢停在一个随机的位置,然后就会根据滑块停的位置和目标值之间的差距计算得分
    目前最高分:
    目前最高分
    停留的距离过远就是0蛋了:
    停留的距离过远就是0蛋了

  4. 点击【再来一次】,则开始新的一局挑战。

看到这里,是不是有兴趣来玩一玩了?

点击 传送门 直达滑块挑战吧!看看你能不能超过我的最高分!

http://www.xdnf.cn/news/1108.html

相关文章:

  • 使用 Spring Boot Admin 通过图形界面查看应用配置信息的完整配置详解,包含代码示例和注释,最后以表格总结关键配置
  • Embedding与向量数据库__0422
  • 实验一-密码学数学基础
  • ​SYSTEM WAKE-UP(系统唤醒)​和外部中断唤醒(EXTI唤醒)
  • 建筑末端配电回路用电安全解决方案
  • 【数据结构 · 初阶】- 堆的实现
  • 抱佛脚之学SSM四
  • Redis—为何持久化使用子进程
  • 【Hive入门】Hive架构与组件深度解析:从核心组件到生态协同
  • Go语言中 defer 使用场景及深度注意事项指南
  • JavaFX实战:从零打造一个功能丰富的“猜数字”游戏
  • 23种设计模式-结构型模式之桥接模式(Java版本)
  • 单个或批量实现-提取PDF文档中的合同号和姓名并按“合同号_姓名”格式重命名文件。
  • SpringClound 微服务分布式Nacos学习笔记
  • 最新整理AI开源大模型介绍
  • vue3:十一、主页面布局(修改左侧导航条的样式)
  • C++继承(最详细)
  • SAP获利分析KEA0-值字段无法被分配,原因既然是。。
  • Linux常用命令
  • [创业之路-381]:企业法务 - 企业经营者,有哪些生产安全风险,哪些人承担责任?承担哪些责任?如何防范?
  • Java从入门到“放弃”(精通)之旅——抽象类和接口⑨
  • conda和pip的区别
  • C# 实现TCP/IP通信协议——Message结构设计
  • C# AppContext.BaseDirectory 应用程序的启动目录
  • Smart AI:在AI浪潮中崛起的智能NFT生态革命者
  • 【高并发内存池】从零到一的项目之高并发内存池整体框架设计及thread cache设计
  • 晶振详解:原理、作用、种类、应用与选型要点
  • Scribe: 一个非常方便的操作文档编写工具
  • 爬虫(requests库,logging库)
  • Linux ssh免密登陆设置