|
|
@ -1,287 +0,0 @@ |
|
|
<script setup> |
|
|
|
|
|
|
|
|
|
|
|
import { ref, onBeforeMount } from 'vue' |
|
|
|
|
|
import jiantou from '../assets/img/jiantou.png' |
|
|
|
|
|
|
|
|
|
|
|
const showPopup = ref(false); |
|
|
|
|
|
const popupMessage = ref(''); |
|
|
|
|
|
const totalScore = ref(4000) // 初始分数 |
|
|
|
|
|
const myLucky = ref() |
|
|
|
|
|
// 新增变量记录基础分数 |
|
|
|
|
|
//const baseScore = 4000 |
|
|
|
|
|
const wheelConfig = ref({ |
|
|
|
|
|
}) |
|
|
|
|
|
const prizes = ref([ |
|
|
|
|
|
{ fonts: [{ text: '-199', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //0 |
|
|
|
|
|
{ fonts: [{ text: '-55', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //1 |
|
|
|
|
|
{ fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //2 |
|
|
|
|
|
{ fonts: [{ text: '-88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //3 |
|
|
|
|
|
{ fonts: [{ text: '-11', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //4 |
|
|
|
|
|
{ fonts: [{ text: '-299', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //5 |
|
|
|
|
|
{ fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' }, //6 |
|
|
|
|
|
{ fonts: [{ text: '-66', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' }, //7 |
|
|
|
|
|
]) |
|
|
|
|
|
const blocks = ref([{ padding: '13px', background: ' #FF2A00' }]) |
|
|
|
|
|
const buttons = ref([{ |
|
|
|
|
|
radius: '35%', |
|
|
|
|
|
imgs: [{ |
|
|
|
|
|
src: 'src/assets/img/jiantou.png', |
|
|
|
|
|
width: '100%', |
|
|
|
|
|
top: '-130%' |
|
|
|
|
|
}], |
|
|
|
|
|
//background: '#8a9bf3', |
|
|
|
|
|
|
|
|
|
|
|
pointer: true, |
|
|
|
|
|
|
|
|
|
|
|
}]) |
|
|
|
|
|
|
|
|
|
|
|
//自定义数组 |
|
|
|
|
|
const customOrder = ref([0, 4, 3, 1, 2, 4, 5, 7, 3, 4, 0]) |
|
|
|
|
|
let orderIndex = 0; |
|
|
|
|
|
|
|
|
|
|
|
function startCallback() { |
|
|
|
|
|
// 重置为初始分数 |
|
|
|
|
|
//totalScore.value = baseScore |
|
|
|
|
|
// 调用抽奖组件的play方法开始游戏 |
|
|
|
|
|
myLucky.value.play() |
|
|
|
|
|
// 模拟调用接口异步抽奖 |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
// |
|
|
|
|
|
console.log(orderIndex, 'orderIndex') |
|
|
|
|
|
|
|
|
|
|
|
const index = orderIndex |
|
|
|
|
|
|
|
|
|
|
|
console.log(customOrder.value[index], 'custome') |
|
|
|
|
|
// 调用stop停止旋转并传递中奖索引 |
|
|
|
|
|
myLucky.value.stop(customOrder.value[index]) |
|
|
|
|
|
//更新指针(循环) |
|
|
|
|
|
orderIndex = (index + 1) % customOrder.value.length; |
|
|
|
|
|
}, 3000) |
|
|
|
|
|
} |
|
|
|
|
|
const scoreAnimation = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 抽奖结束end回调 |
|
|
|
|
|
function endCallback(prize) { |
|
|
|
|
|
const result = Number(prize.fonts[0].text) |
|
|
|
|
|
console.log(prize.fonts[0].text) |
|
|
|
|
|
// 更新总分 |
|
|
|
|
|
totalScore.value = totalScore.value + result |
|
|
|
|
|
// 触发动画 |
|
|
|
|
|
animateScoreChange() |
|
|
|
|
|
// 先清空文字 |
|
|
|
|
|
popupMessage.value = ""; |
|
|
|
|
|
showPopup.value = true; |
|
|
|
|
|
// 设置弹窗内容 |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
popupMessage.value= `${result}金币`; |
|
|
|
|
|
}, 1000); // <--- 正确的用法 |
|
|
|
|
|
|
|
|
|
|
|
showPopup.value = true; |
|
|
|
|
|
// 3秒后隐藏弹窗 |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
showPopup.value = false; |
|
|
|
|
|
}, 3000); |
|
|
|
|
|
} |
|
|
|
|
|
// 添加分数变化动画方法 |
|
|
|
|
|
const animateScoreChange = () => { |
|
|
|
|
|
scoreAnimation.value = true |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
scoreAnimation.value = false |
|
|
|
|
|
}, 3000) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
|
<div class="full-background"> |
|
|
|
|
|
<img :src="jiantou" alt="111"> |
|
|
|
|
|
<div class="art-text" :class="{ 'score-change': scoreAnimation }"> |
|
|
|
|
|
{{ totalScore }}金币 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="luckyWheel"> |
|
|
|
|
|
<LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig" |
|
|
|
|
|
:prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" /> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="full-background"> |
|
|
|
|
|
<!-- 其他原有代码不变 --> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="wheel-base"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<transition name="popup-fade"> |
|
|
|
|
|
<div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }"> |
|
|
|
|
|
<!-- <div class="score-popup" :class="{ 'boom-effect': showPopup }"> --> |
|
|
|
|
|
<div class="ziti"> |
|
|
|
|
|
|
|
|
|
|
|
{{ popupMessage }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</transition> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
/* 爆炸动画关键帧 */ |
|
|
|
|
|
@keyframes boom { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: translate(-50%, -50%) scale(0); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
50% { |
|
|
|
|
|
transform: translate(-50%, -50%) scale(1.2); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.score-popup { |
|
|
|
|
|
/* 基础样式同上 */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
top: 45%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
|
|
|
|
|
|
z-index: 1000; |
|
|
|
|
|
|
|
|
|
|
|
/* 背景图配置 */ |
|
|
|
|
|
background: |
|
|
|
|
|
url('tanchuang.png') center/contain no-repeat; |
|
|
|
|
|
padding: 120px 80px; |
|
|
|
|
|
/* 根据图片留出边距 */ |
|
|
|
|
|
|
|
|
|
|
|
/* 尺寸控制 */ |
|
|
|
|
|
width: 800px; |
|
|
|
|
|
height: 1000px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.score-popup::before { |
|
|
|
|
|
background: rgba(255, 215, 0, 0.1); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.ziti { |
|
|
|
|
|
/* 文字样式 */ |
|
|
|
|
|
font-family: '华康金文体', 'Arial Black', sans-serif; |
|
|
|
|
|
|
|
|
|
|
|
font-size: 100px; |
|
|
|
|
|
|
|
|
|
|
|
/* 根据图片调整字号 */ |
|
|
|
|
|
color: #ffd904; |
|
|
|
|
|
/* 金色文字 */ |
|
|
|
|
|
line-height: 250px; |
|
|
|
|
|
/* 垂直居中文字 */ |
|
|
|
|
|
text-shadow: 2px 2px 0 #B8860B; |
|
|
|
|
|
/* 略微加粗文字 */ |
|
|
|
|
|
margin-bottom: 100px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 添加艺术字样式 */ |
|
|
|
|
|
.art-text { |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 450px; |
|
|
|
|
|
bottom: 200px; |
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
font-family: 'Arial Black', sans-serif; |
|
|
|
|
|
font-size: 150px; |
|
|
|
|
|
color: #FFD700; |
|
|
|
|
|
/* 金色 */ |
|
|
|
|
|
text-shadow: |
|
|
|
|
|
3px 3px 0 #FF0000, |
|
|
|
|
|
/* 红色描边 */ |
|
|
|
|
|
-1px -1px 0 #000, |
|
|
|
|
|
1px -1px 0 #000, |
|
|
|
|
|
-1px 1px 0 #000, |
|
|
|
|
|
1px 1px 0 #000; |
|
|
|
|
|
transition: transform 0.3s ease; |
|
|
|
|
|
z-index: 1000; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 添加分数变化动画 */ |
|
|
|
|
|
.score-change { |
|
|
|
|
|
transform: translateX(-50%) scale(1.2); |
|
|
|
|
|
color: hwb(69 0% 0%); |
|
|
|
|
|
/* 变化时的橙色 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.full-background { |
|
|
|
|
|
background-image: url('bg.jpg'); |
|
|
|
|
|
background-size: cover; |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
background-position: center; |
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
height: 100vh; |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
z-index: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.custom-text { |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 300px; |
|
|
|
|
|
bottom: 200px; |
|
|
|
|
|
color: black; |
|
|
|
|
|
font-size: 150px; |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.luckyWheel { |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
left: 1140px; |
|
|
|
|
|
top: 443px; |
|
|
|
|
|
pointer-events: auto; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 转盘底的样式 */ |
|
|
|
|
|
.wheel-base { |
|
|
|
|
|
background-image: url('wheel-base.png'); |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 1065px; |
|
|
|
|
|
top: 350px; |
|
|
|
|
|
width: 568px; |
|
|
|
|
|
height: 600px; |
|
|
|
|
|
z-index: 990; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.luckyWheel .lucky { |
|
|
|
|
|
aspect-ratio: 1/1; |
|
|
|
|
|
color: aqua; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h1 { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
/* 居中标题 */ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
top: 50px; |
|
|
|
|
|
/* 让标题占据整个宽度 */ |
|
|
|
|
|
font-size: 100px; |
|
|
|
|
|
/* 文字大小 */ |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
zhaoruhui
