Skip to content

N
NEWYEARPARTY
Commit 53b641d2 authored by 罗超's avatar 罗超
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/newyearparty

parents 8f799d33 197f8c0a
Show whitespace changes
Inline Side-by-side
Showing with 474 additions and 92 deletions
src/App.vue
View file @ 53b641d2
......@@ -11,7 +11,7 @@
:loop="barrageLoop"
>
</vue-baberrage>
<!-- <div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div> -->
<div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div>
<!-- style="position: absolute; top: 20%;z-index: 20199" -->
<audio style="position: absolute; top: -20%;z-index: -1" ref="homeAudio" :loop="AudioPlayType ? true : false" :src="url" controls></audio>
</div>
......
src/assets/css/bierede.css
View file @ 53b641d2
......@@ -8,7 +8,8 @@
height: 100%;
position: absolute;
top: 0;
left: 0
left: 0;
overflow: hidden;
}
.container .bg_01 {
......@@ -38,7 +39,7 @@
background-position: left;
top: 0;
left: 0;
position: absolute;
position: q;
animation: yunmove 10s infinite linear;
}
......@@ -363,14 +364,15 @@
height: 117px;
width: 153px;
top: -86px;
left: 4px
left: 4px;
}
.container .hole-container .hole .mouse img {
position: absolute;
width: 100%;
top: 118px;
left: 0
left: 0;
transition: all linear .6s;
}
.container>.score {
......@@ -479,7 +481,8 @@
z-index: 20;
background: rgba(17,17,17,0.5);
left: 0;
right: 0
right: 0;
top: 0;
}
.cover-box {
......@@ -812,3 +815,215 @@
transition: all 0.6s;
}
}
.dalaoshu .hd-game-btn-container{
position: absolute;
bottom: 5px;
right: .5%;
z-index: 1000;
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;
}
.dalaoshu .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;
}
.dalaoshu .hd-game-btn-container .icon-go {
background: url(../../../static/image/shuqian/img-begin.png?1) no-repeat;
background-size: cover;
width: 22px;
height: 22px;
}
.dalaoshu .hd-game-btn-container .hd-game-btn span{
font-size:1.3rem;
}
.dalaoshu .hd-game-btn-container .hd-game-btn:nth-child(2){
margin-left:0;
}
.dalaoshu .hd-game-btn-container .icon-lajitong {
background: url(../../../static/image/shuqian/icon-reset2.png) no-repeat;
background-size: cover;
width: 20px;
height: 22px;
}
.dalaoshu .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%;
}
.dalaoshu .Number_prompt_div{
margin-top:120px;
text-align: center;
}
.dalaoshu .Numberpro_number{
font-size: 38px;
position: relative;
padding-left: 155px;
padding-right: 45px;
text-shadow: 4px 2px 6px #000;
color: #ffd24d;
}
.dalaoshu .Numberpro_left{
position: absolute;
left: 0;
top: 0;
font-size: 28px;
color: #ffe599;
line-height: 45px;
width: 145px;
height: 52px;
}
.dalaoshu .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;
}
.dalaoshu .Numberpro_right {
position: absolute;
right: 0;
top: 0;
font-size: 28px;
color: #ffe599;
line-height: 45px;
width: 31px;
height: 52px;
}
.dalaoshu .prompt_img {
width: 790px;
margin: 20px auto 0 auto;
position: relative;
height: 70px;
}
.dalaoshu .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; */
}
.dalaoshu .prompt_img span img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-top: 5px;
}
.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
}
}
.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%
}
.dalaoshu .number-ani-box .imgNumberImg {
position: absolute;
left: 100px;
top: 175px;
width: 178px
}
.dalaoshu .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
}
\ No newline at end of file
src/assets/css/index.css
View file @ 53b641d2
......@@ -14,11 +14,11 @@
.home_tit{
position: absolute;
padding: 10px;
width: 62%;
width: 85%;
padding: 10px;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
transform: translate(-50%, -42%);
padding-left: 4%;
}
.home_tit .yinxiang2020{
......@@ -36,10 +36,10 @@
color: rgb(253, 229, 170);
}
._cn>p span:nth-child(1){
font-size: 15rem;
font-size: 23rem;
}
._cn>p span:nth-child(2){
font-size: 20rem;
font-size: 26rem;
}
._cn>p span:nth-child(3){
font-size: 30rem;
......
src/components/index.vue
View file @ 53b641d2
......@@ -8,7 +8,7 @@
<p>THE NEXT STATON</p>
<p>IS TEN YEARS</p>
</div>
<div class="_cn">
<div class="_cn" style=" margin: 8rem 0;">
<p class="yinxiang2020">
<span>印象之旅</span>
<span>十</span>
......
src/components/playGame/Mouse.vue
View file @ 53b641d2
<template>
<div>
<div class="box-size container" v-show="showReady">
<div class="dalaoshu">
<div class="box-size container">
<!-- 紫色背景遮罩层 -->
<div class="box-size bg_01" style="width: 6000px; background-image: url(/static/image/dalaoshu/zise.png); transform: translate(-884px, 0px);"></div>
<!-- 头部云 -->
......@@ -24,53 +24,13 @@
<div class="bottom_cloud" style="width: 6000px; background-image: url(/static/image/dalaoshu/bottom_y.png); transform: translate(-1775px, 0px);"></div>
<!-- 地鼠部分 -->
<div class="hole-container">
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(200px, 0px) scale(0.7, 0.7);">
<div class="hole" v-for="(item, index) in mouseDongData" :style="item.fStyle">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7aada3.png" style="top: 118px;" />
<img :src="item.img" :style="{'top': (item.show ? '0' : '118px')}" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(400px, 0px) scale(0.7, 0.7);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7c7bb2.png" style="top: 118px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(600px, 0px) scale(0.7, 0.7);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7e904f.png" style="top: 118px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(100px, 100px) scale(1, 1);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7c7bb2.png" style="top: 118px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(400px, 100px) scale(1, 1);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7aada3.png" style="top: 0px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(700px, 100px) scale(1, 1);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7e904f.png" style="top: 118px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(0px, 250px) scale(1.3, 1.3);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7e904f.png" style="top: 118px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(400px, 250px) scale(1.3, 1.3);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7aada3.png" style="top: 118px;" />
</div>
</div>
<div class="hole" style="background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(800px, 250px) scale(1.3, 1.3);">
<div class="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6d015d1b5.png" style="top: 118px;" />
</div>
</div>
</div>
<div class="cover-container" style="">
<div class="cover-container" v-show="showReady">
<div class="winner-topBs">
<img src="/static/image/dalaoshu/new-back-topbs.png" />
</div>
......@@ -86,6 +46,23 @@
<div class="ribbon-flag-title"></div>
</div>
</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="hd-game-btn-container">
<div class="hd-game-btn" @click="getReady()">
......@@ -93,9 +70,25 @@
<span>准备</span>
</div>
</div>
<div class="hd-game-btn-container" v-show="!showReady">
<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 class="shu-start-tooltip-box" v-if="showCount">
<div class="shu-num-box">{{totalTime}}</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 v-show="!showReady">
</div>
</div>
</template>
......@@ -105,17 +98,191 @@ export default {
name: 'Mouse',
data () {
return {
showReady: true
showReady: true,
totalTime: 3,
totalTime2: 30,
proxy: {},
showCount: false,
showThrityCount: false,
showPeople: false,
laoshuData: [],
mouseDongData: [
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(200px, 0px) scale(0.7, 0.7);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(400px, 0px) scale(0.7, 0.7);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(600px, 0px) scale(0.7, 0.7);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(100px, 100px) scale(1, 1);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(400px, 100px) scale(1, 1);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(700px, 100px) scale(1, 1);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(0px, 250px) scale(1.3, 1.3);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(400px, 250px) scale(1.3, 1.3);'
},
{
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
score: 0,
fStyle: 'background-image: url(/static/image/dalaoshu/laoshudong1.png); transform: translate(800px, 250px) scale(1.3, 1.3);'
},
],
dataIndex: 0,
createMouseTime: null,
rankShow: false,
}
},
activated () {
},
mounted () {
this.connectServer()
this.proxy.on("getChangeMenu", data => {
if (data.status === 1) {
console.log('准备。。。。')
this.laoshuData = JSON.parse(data.data)
} else if (data.status === 2) {
console.log('进行中。。。。')
} else if (data.status === -1) {
console.log('结束了。。。。')
this.rankShow = true
}
})
},
methods: {
getReady: function (){
connectServer() {
let $this = this
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=888888&n=罗超&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
});
this.proxy = conn.createHubProxy("annualLeaveHub");
conn
.start()
.done(data => {
// $this.initData()
})
.fail(data => {});
},
initData: function () {
this.proxy.invoke("RestGame", 'Mouse').done(msg => {
console.log('11111111')
});
},
StartGame: function () {
this.showCount = true
this.showPeople = false
this.proxy.invoke("BeginGame", 'Mouse').done(msg => {
console.log('游戏开始了·')
});
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.countDown30()
this.createMouse()
}
}, 1000)
},
// 创建老鼠
createMouse () {
let pathStr = '/static/image/dalaoshu/'
let $this = this
if (this.dataIndex < this.laoshuData.length) {
return
}
this.createMouseTime = setTimeout(()=>{
this.mouseDongData.map(x=>{
x.show = false
})
$this.mouseDongData[$this.laoshuData[$this.dataIndex].Location - 1].show = true
$this.mouseDongData[$this.laoshuData[$this.dataIndex].Location - 1].img = $this.laoshuData[$this.dataIndex].Type === 1 ? pathStr + 'laoshu1.png' : pathStr + 'laoshu4.png'
$this.mouseDongData[$this.laoshuData[$this.dataIndex].Location - 1].speed = 600
$this.mouseDongData[$this.laoshuData[$this.dataIndex].Location - 1].score = $this.laoshuData[$this.dataIndex].Score
$this.createMouse()
$this.dataIndex++
$this.$forceUpdate()
}, $this.laoshuData[$this.dataIndex-1].Interval + 300)
},
// 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.createMouseTime = null
this.dataIndex = 0
this.showThrityCount = false
this.totalTime2 = 30
}
}, 1000)
},
getReady: function () {
this.proxy.invoke("ReadyGame", 'Mouse').done(msg => {
console.log(msg)
});
this.showPeople = true
this.showReady = false
}
}
......
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