Skip to content

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

1

parent 405f0a36
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 70 deletions
src/assets/css/bierede.css
View file @ 197f8c0a
...@@ -364,14 +364,15 @@ ...@@ -364,14 +364,15 @@
height: 117px; height: 117px;
width: 153px; width: 153px;
top: -86px; top: -86px;
left: 4px left: 4px;
} }
.container .hole-container .hole .mouse img { .container .hole-container .hole .mouse img {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 118px; top: 118px;
left: 0 left: 0;
transition: all linear .6s;
} }
.container>.score { .container>.score {
......
src/assets/css/index.css
View file @ 197f8c0a
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
.home_tit{ .home_tit{
position: absolute; position: absolute;
padding: 10px; padding: 10px;
width: 62%; width: 85%;
padding: 10px; padding: 10px;
left: 50%; left: 50%;
top: 45%; top: 45%;
transform: translate(-50%, -50%); transform: translate(-50%, -42%);
padding-left: 4%; padding-left: 4%;
} }
.home_tit .yinxiang2020{ .home_tit .yinxiang2020{
...@@ -36,10 +36,10 @@ ...@@ -36,10 +36,10 @@
color: rgb(253, 229, 170); color: rgb(253, 229, 170);
} }
._cn>p span:nth-child(1){ ._cn>p span:nth-child(1){
font-size: 15rem; font-size: 23rem;
} }
._cn>p span:nth-child(2){ ._cn>p span:nth-child(2){
font-size: 20rem; font-size: 26rem;
} }
._cn>p span:nth-child(3){ ._cn>p span:nth-child(3){
font-size: 30rem; font-size: 30rem;
......
src/components/index.vue
View file @ 197f8c0a
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<p>THE NEXT STATON</p> <p>THE NEXT STATON</p>
<p>IS TEN YEARS</p> <p>IS TEN YEARS</p>
</div> </div>
<div class="_cn"> <div class="_cn" style=" margin: 8rem 0;">
<p class="yinxiang2020"> <p class="yinxiang2020">
<span>印象之旅</span> <span>印象之旅</span>
<span>十</span> <span>十</span>
......
src/components/playGame/Mouse.vue
View file @ 197f8c0a
...@@ -24,49 +24,9 @@ ...@@ -24,49 +24,9 @@
<div class="bottom_cloud" style="width: 6000px; background-image: url(/static/image/dalaoshu/bottom_y.png); transform: translate(-1775px, 0px);"></div> <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-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"> <div class="mouse">
<img src="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" /> <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="/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="/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="/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="/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="/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="/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="/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="/static/image/dalaoshu/laoshu1.png" style="top: 0px;" />
</div> </div>
</div> </div>
</div> </div>
...@@ -146,29 +106,96 @@ export default { ...@@ -146,29 +106,96 @@ export default {
showThrityCount: false, showThrityCount: false,
showPeople: false, showPeople: false,
laoshuData: [], laoshuData: [],
mouseDongData: [], 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 () { activated () {
}, },
mounted () { mounted () {
for(let i = 0; i < 9; i++) {
this.mouseDongData.push({
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
})
}
this.connectServer() this.connectServer()
this.proxy.on("getChangeMenu", data => { this.proxy.on("getChangeMenu", data => {
console.log(data.data) if (data.status === 1) {
this.laoshuData = JSON.parse(data.data) 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
}
}) })
this.initData()
}, },
methods: { methods: {
connectServer() { connectServer() {
let $this = this
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", { var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=888888&n=罗超&p=${encodeURIComponent( qs: `i=888888&n=罗超&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png" "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
...@@ -178,18 +205,21 @@ export default { ...@@ -178,18 +205,21 @@ export default {
conn conn
.start() .start()
.done(data => { .done(data => {
// $this.initData()
}) })
.fail(data => {}); .fail(data => {});
}, },
initData: function () { initData: function () {
this.proxy.invoke("SendBarrage", 'Mouse').done(msg => { this.proxy.invoke("RestGame", 'Mouse').done(msg => {
console.log(msg) console.log('11111111')
}); });
}, },
StartGame: function () { StartGame: function () {
this.showCount = true this.showCount = true
this.showPeople = false this.showPeople = false
this.proxy.invoke("BeginGame", 'Mouse').done(msg => {
console.log('游戏开始了·')
});
this.countDown() this.countDown()
}, },
// 321倒计时 // 321倒计时
...@@ -209,14 +239,22 @@ export default { ...@@ -209,14 +239,22 @@ export default {
// 创建老鼠 // 创建老鼠
createMouse () { createMouse () {
let pathStr = '/static/image/dalaoshu/' let pathStr = '/static/image/dalaoshu/'
for (let i = 0; i < this.laoshuData.length; i ++) { let $this = this
this.mouseDongData[this.laoshuData[i].location - 1].show = true if (this.dataIndex < this.laoshuData.length) {
this.mouseDongData[this.laoshuData[i].location - 1].img = this.laoshuData[i].type === 1 ? pathStr + 'laoshu1.png' : pathStr + 'laoshu4.png' return
this.mouseDongData[this.laoshuData[i].location - 1].speed = 600
setTimeout(()=>{
console.log(this.laoshuData[i].interval)
}, 10)
} }
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秒倒计时 // 30秒倒计时
countDown30 () { countDown30 () {
...@@ -233,6 +271,8 @@ export default { ...@@ -233,6 +271,8 @@ export default {
this.$refs.countBox.innerHTML = countHtml this.$refs.countBox.innerHTML = countHtml
if (this.totalTime2 === -1) { if (this.totalTime2 === -1) {
window.clearInterval(clock) window.clearInterval(clock)
this.createMouseTime = null
this.dataIndex = 0
this.showThrityCount = false this.showThrityCount = false
this.totalTime2 = 30 this.totalTime2 = 30
} }
......
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