啊

src/App.vue

@@ -44,6 +44,17 @@ export default {
         $this.MsgBus.$emit('nextMusic')
       }
     }, false);
+    // 游戏准备321的音乐
+    this.MsgBus.$on('daojishiMp3', function (type) {
+      if (type === 1) {
+        $this.url = '/static/audio/ready321go.mp3'
+      } else {
+        $this.url = '/static/audio/game_running.mp3'
+      }
+      setTimeout(()=>{
+        $this.setAudioPlay(0)
+      }, 50)
+    })
     //$this.connectServer()
     this.MsgBus.$on('setBarrageShow', function (type) {
       $this.barrageIsShow = type
@@ -110,6 +121,9 @@ export default {
       $this.$PROXY.invoke("SendBarrage", '0.0 让我康康是谁在说我坏话？').done(msg => {
           console.log(msg)
       });
+      $this.$PROXY.invoke("JoinGame", 'Mouse').done(msg => {
+        console.log(msg)
+      });
     },
     getMsg () {
       var $this = this;

src/assets/css/bierede.css

@@ -920,8 +920,8 @@
     height: 70px;
 }
 .dalaoshu .prompt_img span {
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: 8px;
+    margin-right: 8px;
     width: 70px;
     height: 70px;
     display: inline-block;

src/components/playGame/Mouse.vue

@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <div class="cover-container" v-show="showReady">
+      <div class="cover-container" v-show="noReady">
         <div class="winner-topBs">
           <img src="/static/image/dalaoshu/new-back-topbs.png" />
         </div>
@@ -51,31 +51,31 @@
         <div class="Number_prompt_div">
           <span class="Numberpro_number">
             <span class="Numberpro_left">游戏已进入</span>
-            <span class="game_join_total">1</span>
+            <span class="game_join_total">{{RoomAllUser.length}}</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 class="waiting-box"  v-for="item in RoomAllUser">
+              <img :src="item.photo" alt="">
             </span>
           </div>
         </div>
       </div>
       <!-- 按钮 -->
-      <div class="hd-game-btn-container">
+      <div class="hd-game-btn-container" v-show="noReady">
         <div class="hd-game-btn" @click="getReady()">
           <i class="iconfont icon-go"></i>
           <span>准备</span>
         </div>
       </div>
-      <div class="hd-game-btn-container" v-show="!showReady">
+      <div class="hd-game-btn-container" v-show="!showCount && !noReady">
         <div class="hd-game-btn" @click="StartGame()">
           <i class="iconfont icon-go"></i>
           <span>开始</span>
         </div>
-        <div class="hd-game-btn" style="display:none;">
+        <div class="hd-game-btn" v-if="gameOverState" @click="RestGame">
           <i class="iconfont icon-lajitong"></i>
           <span>重置</span>
         </div>
@@ -98,7 +98,7 @@ export default {
   name: 'Mouse',
   data () {
     return {
-      showReady: true,
+      noReady: true,
       totalTime: 3,
       totalTime2: 30,
       proxy: {},
@@ -174,53 +174,111 @@ export default {
       dataIndex: 0,
       createMouseTime: null,
       rankShow: false,
+      Code: 'Mouse',
+      RoomAllUser: [],
+      gameOverState: false,
     }
   },
   activated () {
     
   },
   mounted () {
-    this.connectServer()
-    this.proxy.on("getChangeMenu", data => {
+    let $this = this
+    this.initData()
+    $this.$PROXY.on("getChangeMenu", data => {
+      console.log(data.status)
       if (data.status === 1) {
         console.log('准备。。。。')
-        this.laoshuData = JSON.parse(data.data)
+        $this.laoshuData = JSON.parse(data.data)
       } else if (data.status === 2) {
         console.log('进行中。。。。')
+        $this.laoshuData = JSON.parse(data.data)
       } else if (data.status === -1) {
         console.log('结束了。。。。')
-        this.rankShow = true
+        $this.gameOver()
       }
     })
+    // 监听加入者
+    this.$PROXY.on("notifyNewMouseGamerUser", data => {
+      console.log(data)
+      $this.RoomAllUser.push({
+        name: data.n,
+        photo: data.p
+      })
+    })
   },
   methods: {
-    connectServer() {
+    // 游戏结束后处理的东西
+    gameOver: function () {
+      this.gameOverState = true
+      this.dataIndex = 0
+      this.showThrityCount = false
+      this.totalTime2 = -1
+      this.showPeople = false
+    },
+    // 初始化游戏
+    RestGame: function () {
       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.invoke("RestGame", $this.Code).done(msg => {
+        console.log('初始化游戏。。。')
       });
-      this.proxy = conn.createHubProxy("annualLeaveHub");
-      conn
-        .start()
-        .done(data => {
-          // $this.initData()
+      this.noReady = true
+      this.gameOver()
+    },
+    // 获取当前加入的人
+    GetRoomAllUser: function () {
+      let $this = this
+      this.$PROXY.invoke("GetRoomAllUser", $this.Code).done(data => {
+        data.map(x=>{
+          $this.RoomAllUser.push({
+            name: x.n,
+            photo: x.p
+          })
         })
-        .fail(data => {});
+      });
     },
     initData: function () {
-      this.proxy.invoke("RestGame", 'Mouse').done(msg => {
-        console.log('11111111')
-      });
+      let $this = this
+      try {
+        this.$PROXY.invoke("GetMenuStatus", $this.Code).done(data => {
+          console.log(data.status)
+          if (data.status === 1) {
+            $this.noReady = false
+            $this.showPeople = true
+            $this.laoshuData = JSON.parse(data.data)
+            $this.GetRoomAllUser()
+          } else if (data.status === 2) {
+            $this.noReady = false
+            $this.showCount = true
+            $this.showPeople = false
+            $this.countDown()
+            $this.laoshuData = JSON.parse(data.data)
+            $this.StartGame()
+          } else {
+            $this.RestGame()
+          }
+        });
+      } catch (error) {
+        setTimeout(() => {
+          $this.initData()
+        }, 1000);
+      }
+      
     },
     StartGame: function () {
-      this.showCount = true
-      this.showPeople = false
-      this.proxy.invoke("BeginGame", 'Mouse').done(msg => {
+      console.log('游戏开始111111·')
+      let $this = this;
+      this.$PROXY.invoke("BeginGame", $this.Code).done(msg => {
         console.log('游戏开始了·')
       });
-      this.countDown()
+      // 开始游戏先播放音乐在启用
+      $this.MsgBus.$emit('daojishiMp3', 1)
+      setTimeout(()=>{
+        this.showCount = true
+        this.showPeople = false
+        this.countDown()
+      }, 1000)
+      
     },
      // 321倒计时
     countDown () {
@@ -240,7 +298,7 @@ export default {
     createMouse () {
       let pathStr = '/static/image/dalaoshu/'
       let $this = this
-      if (this.dataIndex < this.laoshuData.length) {
+      if (this.dataIndex > this.laoshuData.length - 1 || this.gameOverState) {
         return
       }
       this.createMouseTime = setTimeout(()=>{
@@ -254,10 +312,12 @@ export default {
         $this.createMouse()
         $this.dataIndex++
         $this.$forceUpdate()
-      }, $this.laoshuData[$this.dataIndex-1].Interval + 300)
+      }, $this.laoshuData[$this.dataIndex].Interval + 300)
     },
     // 30秒倒计时
     countDown30 () {
+      let $this = this
+      $this.MsgBus.$emit('daojishiMp3', 2)
       let clock = window.setInterval(() => {
         this.totalTime2--
         let num = this.totalTime2.toString()
@@ -266,12 +326,12 @@ export default {
         }
         let imgPath1 = num.split('')[0]
         let imgPath2 = num.split('')[1]
+        console.log(imgPath2)
         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
@@ -279,11 +339,12 @@ export default {
       }, 1000)
     },
     getReady: function () {
-      this.proxy.invoke("ReadyGame", 'Mouse').done(msg => {
-        console.log(msg)
+      let $this = this
+      this.$PROXY.invoke("ReadyGame", $this.Code).done(msg => {
+        console.log('游戏准备啦~~')
       });
       this.showPeople = true
-      this.showReady = false
+      this.noReady = false
     }
   }
 }

src/plugin/signalr.js

@@ -4,7 +4,7 @@ let PROXY = null;
 
 let HUB = null;
 
-const HUB_API = 'http://localhost:7838/signalr';
+const HUB_API = 'http://192.168.2.66:7838/signalr';
 
 // 建立连接
 export function startConnection() {