Skip to content

N
NEWYEARPARTY
Commit ba7a4656 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 2cae4af9
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 84 deletions
src/App.vue
View file @ ba7a4656
......@@ -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 @ ba7a4656
......@@ -812,3 +812,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/components/playGame/Mouse.vue
View file @ ba7a4656
<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>
<!-- 头部云 -->
......@@ -26,51 +26,51 @@
<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="mouse">
<img src="https://img.gohudong.com/2019-10-22_5dae6cf7aada3.png" style="top: 118px;" />
<img src="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu4.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu4.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu1.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;" />
<img src="/static/image/dalaoshu/laoshu4.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" />
</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;" />
<img src="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" />
</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 +86,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 +110,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 +138,106 @@ export default {
name: 'Mouse',
data () {
return {
showReady: true
showReady: true,
totalTime: 3,
totalTime2: 30,
proxy: {},
showCount: false,
showThrityCount: false,
showPeople: false,
laoshuData: [],
mouseDongData: [],
}
},
activated () {
},
mounted () {
for(let i = 0; i < 9; i++) {
this.mouseDongData.push({
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
})
}
this.connectServer()
let $this = this
this.proxy.on("getChangeMenu", data => {
console.log(data.data)
$this.laoshuData = JSON.parse(data.data)
})
},
methods: {
getReady: function (){
connectServer() {
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 => {
})
.fail(data => {});
},
StartGame: function () {
this.showCount = true
this.showPeople = 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.countDown30()
this.createMouse()
}
}, 1000)
},
// 创建老鼠
createMouse () {
let pathStr = '/static/image/dalaoshu/'
for (let i = 0; i < this.laoshuData.length; i ++) {
this.mouseDongData[this.laoshuData[i].location - 1].show = true
this.mouseDongData[this.laoshuData[i].location - 1].img = this.laoshuData[i].type === 1 ? pathStr + 'laoshu1.png' : pathStr + 'laoshu4.png'
this.mouseDongData[this.laoshuData[i].location - 1].speed = 600
setTimeout(()=>{
console.log(this.laoshuData[i].interval)
}, )
}
},
// 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)
},
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