Skip to content

N
NEWYEARPARTY
Commit fcbe4536 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 0eceec81
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 129 deletions
src/components/playGame/Money.vue
View file @ fcbe4536
<style>
.shuMoney {
.shuchaopiao .shuMoney {
width: 100%;
height: 100%;
background: url(../../../static/image/shuqian/money_bg.png) no-repeat center;
......@@ -9,12 +9,12 @@
top: 0;
left: 0;
}
.shuMoney-disk {
.shuchaopiao .shuMoney-disk {
width: 100%;
position: absolute;
margin-top: 0;
}
.shuMoney-diskImg {
.shuchaopiao .shuMoney-diskImg {
margin: 0 auto;
width: 472px;
height: 265px;
......@@ -23,7 +23,7 @@
-webkit-animation: diskImg 0 infinite linear;
animation-play-state: running;
}
.shuMoney-curtain {
.shuchaopiao .shuMoney-curtain {
width: 100%;
height: 100%;
background: url(../../../static/image/shuqian/money_bg_curtain.png) no-repeat
......@@ -94,7 +94,7 @@
-webkit-transform: scale(-1, 1) rotate(-50deg)
}
}
.Number_prompt{
.shuchaopiao .Number_prompt{
width: 100%;
height: 310px;
background: url(../../../static/image/shuqian/Number_prompt6.png) no-repeat center;
......@@ -103,11 +103,11 @@
z-index: 700;
top: 35%;
}
.Number_prompt_div{
.shuchaopiao .Number_prompt_div{
margin-top:120px;
text-align: center;
}
.Numberpro_number{
.shuchaopiao .Numberpro_number{
font-size: 38px;
position: relative;
padding-left: 155px;
......@@ -115,7 +115,7 @@
text-shadow: 4px 2px 6px #000;
color: #ffd24d;
}
.Numberpro_left{
.shuchaopiao .Numberpro_left{
position: absolute;
left: 0;
top: 0;
......@@ -126,13 +126,13 @@
height: 52px;
}
.Numberpro_number .game_join_total {
.shuchaopiao .Numberpro_number .game_join_total {
color: #ffff73;
text-shadow: 0 0 35px #d15c16, 0 0 40px #dc5e0b, 0 0 50px #9d430e, 0 0 75px #ba4b0d;
font-weight: bold;
-webkit-text-fill-color: currentColor;
}
.Numberpro_right {
.shuchaopiao .Numberpro_right {
position: absolute;
right: 0;
top: 0;
......@@ -142,13 +142,13 @@
width: 31px;
height: 52px;
}
.prompt_img {
.shuchaopiao .prompt_img {
width: 790px;
margin: 20px auto 0 auto;
position: relative;
height: 70px;
}
.prompt_img span {
.shuchaopiao .prompt_img span {
margin-left: 10px;
margin-right: 10px;
width: 70px;
......@@ -160,13 +160,13 @@
line-height: 70px;
/* position: absolute; */
}
.prompt_img span img {
.shuchaopiao .prompt_img span img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-top: 5px;
}
.hd-game-btn-container{
.shuchaopiao .hd-game-btn-container{
position: absolute;
bottom: 5px;
right: .5%;
......@@ -181,7 +181,7 @@
justify-content: center;
align-items: center;
}
.hd-game-btn-container .hd-game-btn {
.shuchaopiao .hd-game-btn-container .hd-game-btn {
min-width: 70px;
max-width: 100px;
width: 100px;
......@@ -229,7 +229,7 @@
width: 883px;
height: 392px;
}
.shu-num-box {
.shuchaopiao .shu-num-box {
font-size: 150px;
line-height: 150px;
height: 150px;
......@@ -256,20 +256,20 @@
opacity: 0
}
}
.fireworks {
.shuchaopiao .fireworks {
width: 100%;
height: 100%;
position: relative
}
.fireworks_left{
.shuchaopiao .fireworks_left{
top: 38%;
left: 25%;
}
.fireworks_right {
.shuchaopiao .fireworks_right {
top: 28%;
right: 23%
}
.fireworks_left, .fireworks_right {
.shuchaopiao .fireworks_left, .shuchaopiao .fireworks_right {
width: 200px;
height: 200px;
background: url(../../../static/image/shuqian/fk.png) no-repeat center;
......@@ -386,32 +386,32 @@
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
}
.shu-rank-list{
.shuchaopiao .shu-rank-list{
position: absolute;
bottom: 90px;
width: 100%;
text-align: center;
}
.shu-rank-item {
.shuchaopiao .shu-rank-item {
width: 106px;
margin-right: 30px;
position: relative;
display: inline-block;
z-index: 2;
}
.shu-rank-item-head{
.shuchaopiao .shu-rank-item-head{
background: url(../../../static/image/shuqian/shu033.png);
height: 22px;
}
.shu-rank-item-body{
.shuchaopiao .shu-rank-item-body{
background: url(../../../static/image/shuqian/shu022.png);
}
.shu-rank-item-footer {
.shuchaopiao .shu-rank-item-footer {
background: url(../../../static/image/shuqian/shu011.png);
height: 8px;
width: 100%;
}
.shu-rank-item-info {
.shuchaopiao .shu-rank-item-info {
text-align: center;
font-size: 20px;
position: absolute;
......@@ -419,13 +419,13 @@
width: 138px;
left: -15px;
}
.shu-rank-item-info img {
.shuchaopiao .shu-rank-item-info img {
width: 75px;
height: 75px;
border-radius: 50%;
border: 6px solid #fdbe23;
}
.shu-rank-item-info .ranking {
.shuchaopiao .shu-rank-item-info .ranking {
display: block;
position: absolute;
bottom: 108px;
......@@ -470,7 +470,7 @@
background: url(../../../static/image/shuqian/first_few.png);
}
.number-ani-box {
.shuchaopiao .number-ani-box {
padding: 107px 50px 0 40px;
text-align: center;
width: 422px;
......@@ -488,14 +488,14 @@
background-size: 100% 100%
}
.number-ani-box .imgNumberImg {
.shuchaopiao .number-ani-box .imgNumberImg {
position: absolute;
left: 100px;
top: 175px;
width: 178px
}
.number-ani-box .imgNumberImg2 {
.shuchaopiao .number-ani-box .imgNumberImg2 {
position: absolute;
right: 110px;
top: 175px;
......@@ -800,13 +800,6 @@
top:0;
overflow: hidden;
}
/* .game-cover-manCircle {
width: 1000px;
height: 1000px;
margin: 16% auto 0;
position: relative
}
*/
.winnerRipple {
position: absolute;
top: 0;
......@@ -824,7 +817,7 @@
</style>
<template>
<div>
<div class="shuchaopiao">
<template v-if="showFirst">
<div class="game-cover-man">
<div class="game-cover-manTop">
......@@ -902,6 +895,11 @@
<div class="fireworks_left"></div>
<div class="fireworks_right"></div>
</div>
<!-- 游戏开始后倒计时 -->
<div class="number-ani-box" ref="countBox" v-if="showThrityCount">
<img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
</div>
<div class="shu-rank-list" v-if="showMoney">
<div class="shu-rank-item">
<div class="shu-rank-item-info">
......@@ -937,13 +935,8 @@
<div class="shu-rank-item-footer"></div>
</div>
</div>
<!-- 游戏开始后倒计时 -->
<div class="number-ani-box" ref="countBox" v-if="showThrityCount">
<img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
</div>
<!-- 按钮 -->
<div class="hd-game-btn-container">
<div class="hd-game-btn-container" v-show="isShowBtn">
<div class="hd-game-btn" @click="StartGame()">
<i class="iconfont icon-go"></i>
<span>开始</span>
......@@ -967,31 +960,31 @@ export default {
showCount: false,
totalTime: 3,
totalTime2: 30,
//显示30秒倒计时
showThrityCount:false,
//显示首页
showFirst:true,
//显示人和钱
showMoney:false,
// 显示30秒倒计时
showThrityCount: false,
// 显示首页
showFirst: true,
// 显示人和钱
showMoney: false,
isShowBtn: true
}
},
mounted () {
},
methods: {
// 点击准备
getReady(){
this.showFirst=false;
this.showPeople=true;
this.$nextTick(function(){
this.init();
})
getReady () {
this.showFirst = false
this.showPeople = true
this.$nextTick(function () {
this.init()
})
},
//飘钱方法开始
// 飘钱方法开始
init () {
var a = document.getElementById('leafContainer')
for (var b = 0; b < this.NUMBER_OF_LEAVES; b++) {
a.append(this.createALeaf())
a.append(this.createALeaf())
}
},
randomInteger (a, b) {
......@@ -1009,7 +1002,6 @@ export default {
createALeaf () {
var d = document.createElement('div')
var g = document.createElement('img')
// var b=Think.Games;
g.src =
'../../../static/image/shuqian/realLeaf' +
this.randomInteger(1, 5) +
......@@ -1029,90 +1021,67 @@ export default {
d.append(g)
return d
},
//飘钱方法结束
//开始游戏
StartGame() {
this.showPeople=false;
this.showCount=true;
this.countDown();
// 飘钱方法结束
// 开始游戏
StartGame () {
this.showPeople = false
this.showCount = true
this.isShowBtn = false
this.countDown()
},
// 321倒计时
countDown () {
let clock = window.setInterval(() => {
this.totalTime--
if (this.totalTime == 0) {
window.clearInterval(clock);
this.showCount=false;
this.totalTime=3;
this.showThrityCount=true;
this.showMoney=true;
this.countDown30();
if (this.totalTime === 0) {
window.clearInterval(clock)
this.showCount = false
this.totalTime = 3
this.showThrityCount = true
this.showMoney = true
this.countDown30()
}
},1000)
}, 1000)
},
// 30秒倒计时
countDown30(){
countDown30 () {
let clock = window.setInterval(() => {
this.totalTime2--
let num= this.totalTime2.toString();
if(this.totalTime2<10){
num=0+''+num;
let num = this.totalTime2.toString()
if (this.totalTime2 < 10) {
num = 0 + '' + num
}
let imgPath1=num.split('')[0];
let imgPath2=num.split('')[1];
let countHtml=`<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
let imgPath1 = num.split('')[0]
let imgPath2 = num.split('')[1]
let countHtml = `<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`
this.$refs.countBox.innerHTML=countHtml;
if (this.totalTime2 == -1) {
window.clearInterval(clock);
this.showThrityCount=false;
this.totalTime2=30;
this.$refs.countBox.innerHTML = countHtml
if (this.totalTime2 === -1) {
window.clearInterval(clock)
this.isShowBtn = true
this.showThrityCount = false
this.totalTime2 = 30
}
},1000)
},
//生成灯笼
getLantern() {
for (let i = 0; i < 5; i++) {
var lantern = document.createElement("div");
lantern.setAttribute('class','retouching_animation');
lantern.style.left=0;
lantern.style.top=0;
this.$refs.shuMoney.append(lantern);
this.moveLantern(lantern)
}
},
//灯笼移动方法
moveLantern(h) {
h.style.opacity= 0.5;
h.style.scale= this.getRandom(80, 100) * 0.01
h.style.left= -(this.getRandom(200, -200)) + 'px'
h.style.top = -(this.getRandom(10, -80)) + 'px'
h.style.transform ='opacity:0'
h.style.transform ='scale(0.6)'
h.style.transform = 'left:'-(this.getRandom(-400, 600))+ 'px'
h.style.transform ='top:' -(this.getRandom(0, 600)) + 'px'
h.style.transitionDuration = this.getRandom(5000, 20000)
h.style.transform = 'easing:linear'
// h.style.transition.scale=0.6
}, 1000)
},
//生成随机数
getRandom(d,a) {
var b = a - d;
var c = Math.random() * b + d;
// 生成随机数
getRandom (d, a) {
var b = a - d
var c = Math.random() * b + d
return parseInt(c, 10)
},
//生成圈圈
getCircle(){
var circle = document.createElement("img");
circle.setAttribute('class','winnerRipple');
circle.src='../../../static/image/shuqian/winner-quan'+this.getRandom(1,5)+'.png'
circle.style.scale=0;
circle.style.opacity=1;
circle.style.transform ='opacity:0'
circle.style.transform ='scale(2,2)'
circle.style.transition = "all 2.5s"
circle.style.transform = 'easing:linear'
this.$refs.Circle.append(circle);
// 生成圈圈
getCircle () {
var circle = document.createElement('img')
circle.setAttribute('class', 'winnerRipple')
circle.src = '../../../static/image/shuqian/winner-quan' + this.getRandom(1, 5) + '.png'
circle.style.scale = 0
circle.style.opacity = 1
circle.style.transform = 'opacity:0'
circle.style.transform = 'scale(2,2)'
circle.style.transition = 'all 2.5s'
circle.style.transform = 'easing:linear'
this.$refs.Circle.append(circle)
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment