Skip to content

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

增加数钞票游戏

parent 42c3db3f
Hide whitespace changes
Inline Side-by-side
Showing with 1107 additions and 9 deletions
src/assets/css/pageNav.css
View file @ 7ba1d15e
.pageNav{
position: absolute;
width: 98%;
/* width: 98%; */
width: calc(99% - 165px);
z-index: 900;
bottom: .5rem;
left: 1rem;
......
src/components/playGame/Money.vue
View file @ 7ba1d15e
<style>
.shuMoney {
width: 100%;
height: 100%;
background: url(../../../static/image/shuqian/money_bg.png) no-repeat center;
background-size: cover;
position: absolute;
z-index: 500;
top: 0;
left: 0;
}
.shuMoney-disk {
width: 100%;
position: absolute;
margin-top: 0;
}
.shuMoney-diskImg {
margin: 0 auto;
width: 472px;
height: 265px;
background: url(../../../static/image/shuqian/lantern.png) no-repeat center;
background-size: 100% 100%;
-webkit-animation: diskImg 0 infinite linear;
animation-play-state: running;
}
.shuMoney-curtain {
width: 100%;
height: 100%;
background: url(../../../static/image/shuqian/money_bg_curtain.png) no-repeat
top center;
background-size: cover;
position: absolute;
}
#leafContainer > div {
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in
}
#leafContainer > div > img {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%
}
@-webkit-keyframes fade {
0%
{
opacity: 1
}
95%
{
opacity: 1
}
100%
{
opacity: 0
}
}
@-webkit-keyframes drop {
0%
{
-webkit-transform: translate(0, -50px)
}
100%
{
-webkit-transform: translate(0, 650px)
}
}
@-webkit-keyframes clockwiseSpin {
0%
{
-webkit-transform: rotate(-50deg)
}
100%
{
-webkit-transform: rotate(50deg)
}
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
0%
{
-webkit-transform: scale(-1, 1) rotate(50deg)
}
100%
{
-webkit-transform: scale(-1, 1) rotate(-50deg)
}
}
.Number_prompt{
width: 100%;
height: 310px;
background: url(../../../static/image/shuqian/Number_prompt6.png) no-repeat center;
background-size: contain;
position: absolute;
z-index: 700;
top: 35%;
}
.Number_prompt_div{
margin-top:120px;
text-align: center;
}
.Numberpro_number{
font-size: 38px;
position: relative;
padding-left: 155px;
padding-right: 45px;
text-shadow: 4px 2px 6px #000;
color: #ffd24d;
}
.Numberpro_left{
position: absolute;
left: 0;
top: 0;
font-size: 28px;
color: #ffe599;
line-height: 45px;
width: 145px;
height: 52px;
}
.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 {
position: absolute;
right: 0;
top: 0;
font-size: 28px;
color: #ffe599;
line-height: 45px;
width: 31px;
height: 52px;
}
.prompt_img {
width: 790px;
margin: 20px auto 0 auto;
position: relative;
height: 70px;
}
.prompt_img span {
margin-left: 10px;
margin-right: 10px;
width: 70px;
height: 70px;
display: inline-block;
background-size: cover;
background-image: url(../../../static/image/shuqian/lotter_win_bg.png);
text-align: center;
line-height: 70px;
/* position: absolute; */
}
.prompt_img span img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-top: 5px;
}
.hd-game-btn-container{
position: absolute;
bottom: 5px;
right: .5%;
z-index: 999;
width: 160px;
height: 80px;
border-radius: 8px;
background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
background-size: 100% 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.hd-game-btn-container .hd-game-btn {
min-width: 70px;
max-width: 100px;
width: 100px;
height: 62px;
border-radius: .3em;
background: rgba(17,17,17,.6) url(../../../static/image/shuqian/g_game_btn_bg2.png) left no-repeat;
text-align: center;
cursor: pointer;
color: #f4d4b0;
cursor: pointer;
display: flex;
margin: 0 5px;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}
.hd-game-btn-container .icon-go {
background: url(../../../static/image/shuqian/img-begin.png?1) no-repeat;
background-size: cover;
width: 22px;
height: 22px;
}
.hd-game-btn-container .hd-game-btn span{
font-size:1.3rem;
}
.hd-game-btn-container .hd-game-btn:nth-child(2){
margin-left:0;
}
.hd-game-btn-container .icon-lajitong {
background: url(../../../static/image/shuqian/icon-reset2.png) no-repeat;
background-size: cover;
width: 20px;
height: 22px;
}
.shu-start-tooltip-box {
text-align: center;
position: fixed;
top: 40%;
left: 50%;
margin-left: -441px;
margin-top: -200px;
z-index: 99;
background: url(../../../static/image/shuqian/g_game_cd_bg5.png) no-repeat;
background-size: cover;
width: 883px;
height: 392px;
}
.shu-num-box {
font-size: 150px;
line-height: 150px;
height: 150px;
font-family: "Arial",cursive;
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;
animation: dTime 1s infinite ease;
transform: scale(2,2);
margin-top:175px;
}
@keyframes dTime {
1% {
transform: scale(2);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(2);
opacity: 0
}
}
.fireworks {
width: 100%;
height: 100%;
position: relative
}
.fireworks_left{
top: 38%;
left: 25%;
}
.fireworks_right {
top: 28%;
right: 23%
}
.fireworks_left, .fireworks_right {
width: 200px;
height: 200px;
background: url(../../../static/image/shuqian/fk.png) no-repeat center;
-webkit-animation: sprite 1s steps(1) infinite;
overflow: hidden;
position: absolute;
}
@-webkit-keyframes sprite {
0%{
background-position: 0 0
}
4.34%{
background-position: 0 -210px
}
8.68%
{
background-position: 0 -420px
}
13.02%
{
background-position: 0 -630px
}
17.36%
{
background-position: 0 -840px
}
21.7%
{
background-position: 0 -1050px
}
26.04%
{
background-position: 0 -1260px
}
30.38%
{
background-position: 0 -1470px
}
34.72%
{
background-position: 0 -1680px
}
39.06%
{
background-position: 0 -1890px
}
43.4%
{
background-position: 0 -2100px
}
47.74%
{
background-position: 0 -2310px
}
52.08%
{
background-position: 0 -2520px
}
56.42%
{
background-position: 0 -2730px
}
60.76%
{
background-position: 0 -2940px
}
65.1%
{
background-position: 0 -3150px
}
69.44%
{
background-position: 0 -3360px
}
73.78%
{
background-position: 0 -3570px
}
78.12%
{
background-position: 0 -3780px
}
82.46%
{
background-position: 0 -3990px
}
86.8%
{
background-position: 0 -4200px
}
91.14%
{
background-position: 0 -4410px
}
95.48%
{
background-position: 0 -4620px
}
100%
{
background-position: 0 -4830px
}
}
.retouching_animation {
position: absolute;
top: 56%;
left: 50%;
width: 35px;
height: 47px;
background: url(../../../static/image/shuqian/tiny_lantern.png) no-repeat center/cover;
transform: translate(-50%);
transition-duration: 10s;
-moz-transition-duration: 10s;
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
}
.shu-rank-list{
position: absolute;
bottom: 90px;
width: 100%;
text-align: center;
}
.shu-rank-item {
width: 106px;
margin-right: 30px;
position: relative;
display: inline-block;
z-index: 2;
}
.shu-rank-item-head{
background: url(../../../static/image/shuqian/shu033.png);
height: 22px;
}
.shu-rank-item-body{
background: url(../../../static/image/shuqian/shu022.png);
}
.shu-rank-item-footer {
background: url(../../../static/image/shuqian/shu011.png);
height: 8px;
width: 100%;
}
.shu-rank-item-info {
text-align: center;
font-size: 20px;
position: absolute;
top: -160px;
width: 138px;
left: -15px;
}
.shu-rank-item-info img {
width: 75px;
height: 75px;
border-radius: 50%;
border: 6px solid #fdbe23;
}
.shu-rank-item-info .ranking {
display: block;
position: absolute;
bottom: 108px;
right: 42px;
width: 10px;
height: 10px;
color: #fffe4d;
font-weight: 700;
font-size: 18px;
}
.shu-rank-item-info .shu-rank-item-score {
display: block;
color: #ffd24c;
margin-bottom: 5px;
white-space: nowrap;
font-weight: bold;
text-shadow: #8d2201 2px 0 0, #8d2201 0 2px 0, #8d2201 -2px 0 0, #8d2201 0 -2px 0;
}
.shu-rank-item-info .shu-rank-item-name {
display: block;
color: #ffd835;
white-space: nowrap;
line-height: 200%;
text-shadow: #8d2201 2px 0 0, #8d2201 0 2px 0, #8d2201 -2px 0 0, #8d2201 0 -2px 0;
text-overflow: ellipsis;
font-weight: bold;
overflow: hidden;
margin-bottom: 20px;
}
.shu-rank-item-info::before {
content: "";
width: 33px;
height: 32px;
display: block;
position: absolute;
bottom: 90px;
color: #fffb4b;
padding-top: 3px;
font-weight: 700;
font-size: 18px;
right: 30px;
background: url(../../../static/image/shuqian/first_few.png);
}
.number-ani-box {
padding: 107px 50px 0 40px;
text-align: center;
width: 422px;
height: 422px;
position: fixed;
top: 33%;
left: 48%;
margin-left: -205px;
margin-top: -180px;
z-index: 100;
/* display: none; */
border-radius: 50%;
animation: numberAni 1s infinite ease;
background: url(../../../static/image/shuqian/number-ani-boxBs.png);
background-size: 100% 100%
}
.number-ani-box .imgNumberImg {
position: absolute;
left: 100px;
top: 175px;
width: 178px
}
.number-ani-box .imgNumberImg2 {
position: absolute;
right: 110px;
top: 175px;
width: 178px
}
@keyframes numberAni {
1% {
transform: scale(3);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(3);
opacity: 0
}
}
.number-ani-box img {
margin-left: 8px
}
/* 首页样式开始 */
.game-cover-man{
background: url(../../../static/image/shuqian/new-back-top3.jpg) no-repeat center;
background-size: cover;
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.game-cover-manTop{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.game-cover-manTop img{
width:100%;
}
.game-cover-manBottom{
background: url(../../../static/image/shuqian/game-title-bottom.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.game-cover-div{
text-align: center;
position: fixed;
top: 26%;
width: 100%;
margin-top: -120px;
z-index: 99;
display: block;
}
.cover-box {
position: absolute;
z-index: 100;
top: 50%;
width: 1000px;
height: 640px;
margin-top: -20px;
left: 50%;
margin-left: -500px;
text-align: center;
overflow: hidden;
}
.cover-box .circle-light {
background: url(../../../static/image/shuqian/light.png) no-repeat;
width: 70%;
height: 70%;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -35%;
top: 210px;
opacity: 0;
}
.circle-light1{
animation:circleRoate1 5s infinite ease-in 3s forwards;
-webkit-animation:circleRoate1 5s infinite ease-in 3s forwards;
}
@keyframes circleRoate1{
0.1%{opacity:.6;transform:rotate(0)}
100%{opacity:.6;transform:rotate(360deg)}
}
.cover-box .ribbon-flag {
background: url(../../../static/image/shuqian/flag.png) no-repeat;
width: 834px;
height: 185px;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -417px;
top: 490px;
opacity: 0;
animation: carFlag 1s 1 ease-in-out 1s forwards;
}
@keyframes carFlag{
0.1%{opacity:0;transform:translateY(120px)}
33%{opacity:1;transform:translateY(0)}
66%{opacity:1;transform:translateY(20px)}
100%{opacity:1;transform:translateY(0)}
}
.cover-box .red-lefthand {
background: url(../../../static/image/shuqian/hand01.png) no-repeat;
width: 96px;
height: 68px;
background-size: 100% 100%;
position: absolute;
left: 27%;
top: 461px;
opacity: 0;
}
.cover-box .red-hand1{
animation:redHand1 1.5s infinite ease-in 2.5s forwards;
-webkit-animation:redHand1 1.5s infinite ease-in 2.5s forwards
}
@keyframes redHand1{
0.1%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
50%{opacity:1;transform:matrix(0.866,0.5,-0.5,0.866,0,0)}
100%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
}
@keyframes redHand2{
0.1%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
50%{opacity:1;transform:matrix(0.866,0.5,-0.5,0.866,0,0)}
100%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
}
.cover-box .red-righthand {
background: url(../../../static/image/shuqian/hand02.png) no-repeat;
width: 122px;
height: 106px;
background-size: 100% 100%;
position: absolute;
right: 29%;
top: 419px;
opacity: 0;
}
.cover-box .red-build {
background: url(../../../static/image/shuqian/people.png) no-repeat;
width: 366px;
height: 290px;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -183px;
top: 330px;
opacity: 0;
animation: buildCloud 2s 1 ease-in-out 1.4s forwards;
}
@keyframes buildCloud{
0.1%{opacity:0;transform:scale(0.2)}
33%{opacity:1;transform:scale(1.1)}
66%{opacity:1;transform:scale(0.9)}
100%{opacity:1;transform:scale(1)}
}
.cover-box .glass-light {
background: url(../../../static/image/shuqian/sun-light.png) no-repeat;
background-size: 100% 100%;
width: 100px;
height: 100px;
position: absolute;
right: 43%;
top: 368px;
opacity: 0;
animation: glassLight 1s 1 linear 3.4s forwards;
}
@keyframes glassLight{
0.1%{opacity:1;transform:translateX(0)}
100%{opacity:0;transform:translateX(60px)}
}
.cover-box .dai-left {
background: url(../../../static/image/shuqian/money01.png) no-repeat;
width: 70px;
height: 132px;
background-size: 100% 100%;
position: absolute;
left: 23%;
top: 335px;
opacity: 0;
}
.cover-box .dai-right {
background: url(../../../static/image/shuqian/money02.png) no-repeat;
width: 74px;
height: 128px;
background-size: 100% 100%;
position: absolute;
right: 23%;
top: 311px;
opacity: 0;
}
.cover-box .red-hand1{
animation:redHand1 1.5s infinite ease-in 2.5s forwards;
-webkit-animation:redHand1 1.5s infinite ease-in 2.5s forwards
}
.cover-box .icon-coin1 {
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 36px;
height: 40px;
background-size: 100% 100%;
position: absolute;
top: 237px;
left: 56%;
opacity: 0;
animation: iconCoin 2.5s infinite ease-in 4.8s forwards;
}
.cover-box .icon-coin2 {
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 66px;
height: 70px;
background-size: 100% 100%;
position: absolute;
top: 237px;
left: 66%;
opacity: 0;
animation: iconCoin2 2.5s infinite ease-in 5.5s forwards;
}
.cover-box .icon-coin3 {
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 56px;
height: 60px;
background-size: 100% 100%;
position: absolute;
top: 222px;
left: 28%;
opacity: 0;
animation: iconCoin3 2.5s infinite ease-in 6s forwards;
}
@keyframes iconCoin{
0.1%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(220px)}
}
@keyframes iconCoin2{
0.1%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(400px)}
}
@keyframes iconCoin3{
0.1%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(360px)}
}
.game-coverTextDiv {
position: absolute;
width: 100%;
top: 66px;
}
.game-coverTitle {
background: url(../../../static/image/shuqian/game-title-titBs.png) no-repeat;
background-size: 100% 100%;
text-align: center;
width: 674px;
height: 235px;
margin: 0 auto;
font-size: 62px;
color: #fff;
position: relative;
}
.game-coverTitle{
animation:titleBox .5s 1 ease-in-out forwards
}
@keyframes titleBox{
0.1%{opacity:1;transform:scale(0.2)}
50%{opacity:1;transform:scale(1.1)}
100%{opacity:1;transform:scale(1)}
}
.game-coverTitle .game-coverTitleSpan {
/* -webkit-text-stroke: 3px #9d2200; */
-webkit-background-clip: text;
font-weight: bold;
text-shadow: 4.1px 4px 0 #9d2200;
letter-spacing: 7px;
position: absolute;
width: 100%;
height: 180px;
top: 72px;
display: block;
}
.game-coverTitle .game-coverTitleSpan2 {
font-weight: bold;
letter-spacing: 7px;
position: absolute;
display: block;
width: 100%;
height: 90px;
top: 72px;
-webkit-text-stroke: 2px #581800;
background-image: linear-gradient(to bottom,#ffed95,#ffed95,#ff5503);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.game-cover-manCircleDiv {
width: 100%;
height: 642px;
position: relative;
top:0;
overflow: hidden;
}
/* .game-cover-manCircle {
width: 1000px;
height: 1000px;
margin: 16% auto 0;
position: relative
}
*/
.winnerRipple {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}
.move{
animation:bb 2s infinite ease-in 1s forwards
}
@keyframes bb{
0.1%{opacity:1;transform:scale(0)}
100%{opacity:0;transform:scale(2)}
}
</style>
<template>
<div>
<div>{{msg}}</div>
<template v-if="showFirst">
<div class="game-cover-man">
<div class="game-cover-manTop">
<img src="../../../static/image/shuqian/new-back-topbs.png" alt=""/>
</div>
<div class="game-cover-manBottom"></div>
<div class="game-cover-div">
<div class="cover-box">
<div class="circle-light circle-light1"></div>
<div class="ribbon-flag"></div>
<div class="red-lefthand red-hand1"></div>
<div class="red-righthand red-hand1"></div>
<div class="red-build"></div>
<div class="glass-light"></div>
<div class="dai-left red-hand1"></div>
<div class="dai-right red-hand1"></div>
<div class="icon-coin1"></div>
<div class="icon-coin2"></div>
<div class="icon-coin3"></div>
</div>
<div class="game-coverTextDiv">
<div class="game-coverTitle">
<span class="game-coverTitleNav game-coverTitleSpan">疯狂数钞票</span>
<span class="game-coverTitleNav game-coverTitleSpan2">疯狂数钞票</span>
</div>
</div>
</div>
<div class="game-cover-manCircleDiv">
<img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt="">
</div>
<!-- 按钮 -->
<div class="hd-game-btn-container">
<div class="hd-game-btn" @click="getReady()">
<i class="iconfont icon-go"></i>
<span>准备</span>
</div>
</div>
</div>
</template>
<template v-else>
<div class="shuMoney" ref="shuMoney">
<!-- 顶部灯笼 -->
<div class="shuMoney-disk">
<p class="shuMoney-diskImg"></p>
</div>
<!-- 门帘 -->
<div class="shuMoney-curtain"></div>
<!-- 飘钱 -->
<div class="leafContainer" id="leafContainer">
</div>
<!-- 准备人员名单 -->
<div class="Number_prompt" v-if="showPeople">
<div class="Number_prompt_div">
<span class="Numberpro_number">
<span class="Numberpro_left">游戏已进入</span>
<span class="game_join_total">1</span>
<span class="Numberpro_right">人</span>
</span>
</div>
<div class="prompt_imgdiv">
<div class="prompt_img">
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt="">
</span>
</div>
</div>
</div>
<!-- 倒计时 -->
<div class="shu-start-tooltip-box" v-if="showCount">
<div class="shu-num-box">{{totalTime}}</div>
</div>
<!-- 烟花 -->
<div class="fireworks">
<div class="fireworks_left"></div>
<div class="fireworks_right"></div>
</div>
<div class="shu-rank-list" v-if="showMoney">
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/>
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/>
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/>
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<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" @click="StartGame()">
<i class="iconfont icon-go"></i>
<span>开始</span>
</div>
<div class="hd-game-btn" style="display:none;">
<i class="iconfont icon-lajitong"></i>
<span>重置</span>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'Money',
data () {
return {
msg: '疯狂数钞票'
NUMBER_OF_LEAVES: 18,
showPeople: false,
showCount: false,
totalTime: 3,
totalTime2: 30,
//显示30秒倒计时
showThrityCount:false,
//显示首页
showFirst:true,
//显示人和钱
showMoney:false,
}
},
activated () {
this.msg = new Date() + '呵呵'
mounted () {
},
methods: {
// 点击准备
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())
}
},
randomInteger (a, b) {
return a + Math.floor(Math.random() * (b - a))
},
randomFloat (a, b) {
return a + Math.random() * (b - a)
},
pixelValue (a) {
return a + '%'
},
durationValue (a) {
return a + 's'
},
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) +
'.png'
d.style.top = '-15%'
d.style.left = this.pixelValue(this.randomInteger(0, 100))
var e =
Math.random() < 0.5 ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip'
d.style.webkitAnimationName = 'fade, drop'
g.style.webkitAnimationName = e
var a = this.durationValue(this.randomFloat(5, 11))
var f = this.durationValue(this.randomFloat(4, 8))
d.style.webkitAnimationDuration = a + ', ' + a
var c = this.durationValue(this.randomFloat(0, 5))
d.style.webkitAnimationDelay = c + ', ' + c
g.style.webkitAnimationDuration = f
d.append(g)
return d
},
//飘钱方法结束
//开始游戏
StartGame() {
this.showPeople=false;
this.showCount=true;
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();
}
},1000)
},
// 30秒倒计时
countDown30(){
let clock = window.setInterval(() => {
this.totalTime2--
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'/>
<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;
}
},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
},
//生成随机数
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);
}
}
}
</script>
<style>
</style>
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