vue3实战练习之红包雨,抢红包案例

抢红包案例

  • 每当618消费节到来时,某宝、某多,等购物网站都会退出各种活动,其中抢红包,优惠券等红包雨活动很是火热,于是就通过vue的知识来做一个红包雨,抢红包加分活动!代码中红包的路径改成自己存放红包图片的路径即可。

    代码如下:

vue 复制代码
<!-- 这是一个下红包雨且可以点击抢红包的案例演示 -->
<template>
    <!-- 先把大致的内容框架搭建出来 -->
<div>
    <div class="header">
        <div class="score">你的得分是:{{ score }}</div>
        <div class="timer">时间还剩下:{{ timer }}</div>
    </div>
    <!-- 如果逻辑比较简单,那就在标签只中直接写,比如此处,当倒计时还没结束时间大于0时,
     就不断的随机生成红包,当时间小于0时,就代表结束,屏幕上不再生成红包! -->
    <div v-if="timer > 0">
        <!-- 这里的红包其实就是一张张图片,然后照片就只有一张,所以就需要通过不断的改变照片的位置,来实现红包雨 -->
         <!-- 在网页中一般给个距离左边的高度,距离顶部的高度就可以控制照片的位置 -->
          <!-- 又因为红包雨,不可能就一次只出现一个,所以就要先通过双向绑定样式,通过生成不断的位置,再把这些位置的照片放到数组中 -->
        <div v-for="packet in packetArr" class="red-packet" :style="{top: packet.top + 'px',left :packet.left + 'px' }" @click='grab(packet)' >
        <img src="../assets/red1.jpg" class='red-packet-image' >
    </div>
</div>
</div>

</template>

<script setup>

import {ref, onMounted, onUnmounted} from 'vue'
// 定义的时间用于控制游戏时长
const timer=ref(60)
// 统计得分,点击一个加一分
const score=ref(0)

const packetArr =ref([])

// 当红包图片被点击,就会调用该函数,让点击位置的图片消失,即通过筛选,把没被点击的图片重新赋值给存放红包的数组,实现删除
const grab = (packet) => {
    // 红包消失
    packetArr.value = packetArr.value.filter(x => x.id !== packet.id )
    score.value++
    
}
// 不断的给照片生成不同的位置
const start = () =>{
    let id = setInterval(() => {
        
        if (timer.value === 0) {
            // 给id是为了清楚
            clearInterval(id);
            packetArr.value = [];
            timer.value = 0
        }else{
            timer.value --;
        }

    },2000)
};
// 挂载这个函数
onMounted(
    () => start()
)

// 生成红包
const makePacket = () =>{
    // 先生成一个红包
    let packet = {
        id: Date.now(),
        top:-400,
        // window.innerWidth 获取屏幕总宽度, -100是为了避免出现半个红包
        left:Math.random() * (window.innerWidth - 400),
        speed: Math.random() * 5 + 2,
    };
    packetArr.value.push(packet);
    console.log("making")
}

onMounted(
    () => {
        start();
        let id = setInterval(()=> {
            makePacket();
        },500);
        move()
    }
)


const move = () =>{
    let id = setInterval(()=> {
        packetArr.value.forEach((packet, index) => {
            packet.top += packet.speed;
            // 红包如果已经掉出屏幕(大于屏幕的最大高度),就会把红包删除
            if (packet.top > window.innerHeight) {
                packetArr.value.splice(index, 1);
            }
        });
    }, 16);
    onUnmounted(()=> {
        clearInterval(id)
    });
};
</script>

<style scoped>

.timer{
    position: fixed;
    width: 300px;
    top:20px;
    right: 20px;
    font-size: 30px;
    color: red;
}
.score{
    position: fixed;
    width: 300px;
    top:20px;
    left: 20px;
    font-size: 30px;
    color: red;
}

.red-packet{
    position: absolute;
    width: 120px;
    animation: move infinite linear;
}
.red-packet-image{
    position: 100%;
    width: 250px;
    
}

</style>
  • 效果如下

    当点击红包时,红包会消失,同时得分加一。

相关推荐
Jacob0234几秒前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
qianbo_insist2 分钟前
c++ python 共享内存
开发语言·c++·python
独立开阀者_FwtCoder5 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder6 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep13 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
今天背单词了吗98016 分钟前
算法学习笔记:8.Bellman-Ford 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·后端·算法·最短路径问题
白白李媛媛18 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
天天摸鱼的java工程师19 分钟前
使用 Spring Boot 整合高德地图实现路线规划功能
java·后端
CoderPractice22 分钟前
C#控制台小项目-飞行棋
开发语言·c#·小游戏·飞行棋
晴殇i27 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css