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 @@
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 {
......
src/assets/css/index.css
View file @ 197f8c0a
......@@ -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 @ 197f8c0a
......@@ -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 @ 197f8c0a
......@@ -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="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="/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="/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;" />
<img :src="item.img" :style="{'top': (item.show ? '0' : '118px')}" />
</div>
</div>
</div>
......@@ -146,29 +106,96 @@ export default {
showThrityCount: false,
showPeople: false,
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 () {
},
mounted () {
for(let i = 0; i < 9; i++) {
this.mouseDongData.push({
show: false,
img: '/static/image/dalaoshu/laoshu2.png',
speed: 600,
})
}
this.connectServer()
this.proxy.on("getChangeMenu", data => {
console.log(data.data)
this.laoshuData = JSON.parse(data.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
}
})
this.initData()
},
methods: {
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"
......@@ -178,18 +205,21 @@ export default {
conn
.start()
.done(data => {
// $this.initData()
})
.fail(data => {});
},
initData: function () {
this.proxy.invoke("SendBarrage", 'Mouse').done(msg => {
console.log(msg)
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倒计时
......@@ -209,14 +239,22 @@ export default {
// 创建老鼠
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)
}, 10)
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 () {
......@@ -233,6 +271,8 @@ export default {
this.$refs.countBox.innerHTML = countHtml
if (this.totalTime2 === -1) {
window.clearInterval(clock)
this.createMouseTime = null
this.dataIndex = 0
this.showThrityCount = false
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