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

vue扭蛋机抽奖游戏

简易扭蛋机demo

这是一个使用CSS3和JavaScript实现的扭蛋机抽奖游戏。该游戏的主要功能是通过点击按钮进行抽奖,抽奖过程中会显示滚动的小球,最终随机停止并显示一个中奖小球。

该游戏的抽奖过程如下:

  1. 当用户点击抽奖按钮时,首先检查当前是否正在进行抽奖任务或者当前有小球正在滚动。如果有,则不执行抽奖操作。
  2. 如果满足抽奖条件,则设置抽奖状态为开始,并等待4秒钟。
  3. 4秒钟后,停止抽奖,并随机选择一个小球作为中奖结果。
  4. 开始滚动中奖小球,直到小球到达最终位置。
  5. 小球到达最终位置后,停止滚动并隐藏小球。

这个游戏的实现方式是通过CSS3的动画效果和JavaScript的定时器来控制小球的滚动和抽奖的过程。使用CSS3可以轻松地实现小球的滚动效果,而JavaScript则可以控制抽奖的流程和时间。

整体代码

HTML部分

html结构可根据自己需求重新开发,一下代码只是演示,抽奖思路,ball-box下面每个图片是根据index动态添加类名,在css中方便单独设置每个小球位置

<template><div><div class="raffle"><div class="collectors"><div class="top">Top 3 Xmas Balls Collectors</div><div class="awards-list"><div class="item" v-for="(item, index) in emailList" :key="index">aaa@aaa.com</div></div></div><div class="lottery"><!-- 抽奖  --><div class="ball-box" :class="{ 'active': !opportunityStatus }"><img v-for="(item, index) in ballList" :key="index" :src="item" alt="" :class="`ball${index}`"></div><!-- 抽奖次数 --><div class="glass"><div class="glass-list"><div class="item">1 MORE CHANCE</div></div><img src="./img/glass.png" alt=""></div><!-- 滚动小球  --><img :src="lotteryBall" alt="" class="roll-ball" :class="{ 'active': rollBall }"><img src="./img/ball-base.png" alt="" class="ball-base"><img src="./img/games.png" alt="" class="games-img"></div><!-- 抽奖按钮 --><div class="play" @click="rafflePlay"><img src="./img/play-go.png" alt=""></div></div></div>
</template>
js部分

flexible文件因为布局使用rem,来计算自适应,ballList数组中的图片可自行修改

<script>
export default {data() {return {//抽奖小球ballList:[require('./img/ball-1.png'),require('./img/ball-2.png'),require('./img/ball-3.png'),require('./img/ball-4.png'),require('./img/ball-5.png'),require('./img/ball-6.png'),require('./img/bal

相关文章:

vue扭蛋机抽奖游戏

简易扭蛋机demo 这是一个使用CSS3和JavaScript实现的扭蛋机抽奖游戏。该游戏的主要功能是通过点击按钮进行抽奖,抽奖过程中会显示滚动的小球,最终随机停止并显示一个中奖小球。 该游戏的抽奖过程如下: 当用户点击抽奖按钮时,首先检查当前是否正在进行抽奖任务或者当前有小…...

代码随想录27期|Python|Day16|二叉树|104.二叉树的最大深度|111.二叉树的最小深度|222.完全二叉树的节点个数

二叉树专题&#xff0c;重点掌握后续的递归和中间节点的处理。 104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 本题在前一章已经解决了层序遍历的解法&#xff0c;现在来聊一下递归法。 首先需要明确两个概念&#xff1a;深度和高度。&#xff08;注意&…...

༺༽༾ཊ—设计-简介-模式—ཏ༿༼༻

我对设计模式的理解就是一种可复用的且面向对象的设计工具&#xff0c;它与代码无关&#xff0c;我们可以利用设计模式设计出高内聚、低耦合的应用程序&#xff0c;并且最大程度实现程序的复用&#xff0c;以应对复杂的需求变化。 程序的可复用性就是用已存在的程序模块进行更新…...

Matplotlib快速入门,Python通用的绘图工具库上手

Matplotlib是一个用于Python编程语言的综合性绘图库。 它可以生成各种类型的图表&#xff0c;包括折线图、条形图、散点图、直方图、饼图等。Matplotlib支持多种数据格式&#xff0c;包括NumPy数组、Pandas DataFrame和CSV文件。它还可以从URL读取数据。 Matplotlib可以在交互…...

Linux 基本语句_16_Udp网络聊天室

代码&#xff1a; 服务端代码&#xff1a; #include <stdio.h> #include <arpa/inet.h> #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <stdlib.h> #include <unistd.h> #include <string…...

使用ffmpeg命令进行视频格式转换

1 ffmpeg介绍 FFmpeg 是一个非常强大和灵活的开源工具集&#xff0c;用于处理音频和视频文件。它提供了一系列的工具和库&#xff0c;可以用于录制、转换、流式传输和播放音频和视频。 FFmpeg 主要特点如下&#xff1a; 格式支持广泛&#xff1a;FFmpeg 支持几乎所有的音频和视…...

Mac安装Adobe AE/pr/LR/ai/ps/au/dw/id 2024/2023报错问题解决(常见错误:已损坏/2700/146/130/127)

1.打开允许“允许任何来源” 如何打开允许任何来源&#xff1f;在 Finder 菜单栏选择 【前往】 – 【实用工具 】&#xff0c;找到【终端】程序&#xff0c;双击打开&#xff0c;在终端窗口中输入&#xff1a;sudo spctl --master-disable 输入代码后&#xff0c;按【return …...

Python三级 每周练习题31

如果你感觉有收获&#xff0c;欢迎给我微信扫打赏码 ———— 以激励我输出更多优质内容 练习一: 作业1:编写程序&#xff0c;在下面的字典中找出身高137的同学并输出姓名&#xff0c;如果没找到&#xff0c; 输出没有 a{‘小赵’:136,‘小钱’:141,‘小孙’:146,‘小李’:13…...

【DataSophon】大数据服务组件之Flink升级

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…...

Android笔记(十八):面向Compose组件结合Retrofit2和Rxjava3实现网络访问

一、Retrofit2 Square公司推出的Retrofit2库&#xff08;https://square.github.io/retrofit/&#xff09;&#xff0c;改变了网络访问的方式。它实现了网络请求的封装。Retrofit库采用回调处理方式&#xff0c;使得通过接口提交请求和相应的参数的配置&#xff0c;就可以获得…...

mybatis中oracle的sql没走索引导致特别慢(未加jdbcType的)

如果直接跑sql是能走索引很快&#xff0c;在mybatis中不能&#xff0c;可能就是jdbcType的原因。 比如&#xff0c;我有一个属性A&#xff0c;在表里面是VARCHAR2类型&#xff0c;但是在mybatis中的sql是#{a}&#xff0c;缺少jdbcTypeJdbcType.VARCHAR&#xff0c;就会导致myba…...

QT自带打包问题:无法定位程序输入点?metaobject@qsound

文章目录 无法定位程序输入点?metaobjectqsound……检查系统环境变量的配置&#xff1a;打包无须安装qt的文件 无法定位程序输入点?metaobjectqsound…… 在执行release打包程序后&#xff0c;相应的release文件夹下的exe文件&#xff0c;无法打开 如有错误欢迎指出 检查系…...

7.3 lambda函数

一、语法 1.基础语法 [capture](paramLists) mutable ->retunType{statement} capture。捕获列表&#xff0c;用于捕获前文的变量供lambda函数中使用&#xff0c;可省略。(paramLists)。参数列表&#xff0c;可省略。mutable。lambda表达式默认具有常量性&#xff0c;可以…...

dcoker-compose一键部署EFAK —— 筑梦之路

简介 EFAK&#xff08;Eagle For Apache Kafka&#xff0c;以前称为 Kafka Eagle&#xff09;是一款由国内公司开源的Kafka集群监控系统&#xff0c;可以用来监视kafka集群的broker状态、Topic信息、IO、内存、consumer线程、偏移量等信息&#xff0c;并进行可视化图表展示。独…...

音视频:Ubuntu下安装 FFmpeg 5.0.X

1.安装相关依赖 首可选一&#xff1a; sudo apt-get update sudo apt-get install build-essential autoconf automake libtool pkg-config \libavcodec-dev libavformat-dev libavutil-dev \libswscale-dev libresample-dev libavdevice-dev \libopus-dev libvpx-dev libx2…...

【LSM tree 】Log-structured merge-tree 一种分层、有序、面向磁盘的数据结构

文章目录 前言基本原理读写流程写流程读流程 写放大、读放大和空间放大优化 前言 LSM Tree 全称是Log-structured merge-tree, 是一种分层&#xff0c;有序&#xff0c;面向磁盘的数据结构。其核心原理是磁盘批量顺序写比随机写性能高很多&#xff0c;可以通过围绕这一原理进行…...

配置OSPF与BFD联动示例

定义 双向转发检测BFD&#xff08;Bidirectional Forwarding Detection&#xff09;是一种用于检测转发引擎之间通信故障的检测机制。 BFD对两个系统间的、同一路径上的同一种数据协议的连通性进行检测&#xff0c;这条路径可以是物理链路或逻辑链路&#xff0c;包括隧道。 …...

01到底应该怎么理解“平均负载”

1、如何了解系统的负载情况&#xff1f; 每次发现系统变慢时&#xff0c; 我们通常做的第⼀件事&#xff0c; 就是执⾏top或者uptime命令&#xff0c; 来了解系统的负载情况。 ⽐如像下⾯这样&#xff0c; 我在命令⾏⾥输⼊了uptime命令&#xff0c; 系统也随即给出了结果。 …...

jmeter,动态参数之随机数、随机日期

通过函数助手&#xff0c;执行以下配置&#xff1a; 执行后的结果树&#xff1a; 数据库中也成功添加了数据&#xff0c;对应字段是随机值&#xff1a;...

uniApp常见知识点-问题答案

1、uniApp中如何进行页面跳转&#xff1f; 答案&#xff1a;可以使用 uni.navigateTo、uni.redirectTo 和 uni.reLaunch 等方法进行页面跳转。其中&#xff0c;uni.navigateTo可以实现页面的普通跳转&#xff0c; uni.redirectTo可以实现页面的重定向跳转&#xff0c; uni.reL…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...