日常开发

src/views/game/components/basketball.vue

@@ -925,11 +925,11 @@ onBeforeMount(() => {
 
 // 生命周期钩子
 onMounted(() => {
-  clientObj.value = {
-    width: document.querySelector('.game-container').offsetWidth,
-    height: document.querySelector('.game-container').offsetHeight,
-  }
-  initGame();
+    clientObj.value = {
+      width: document.querySelector('.game-container').offsetWidth,
+      height: document.querySelector('.game-container').offsetHeight,
+    }
+    initGame();
 });
 
 onBeforeUnmount(() => {

src/views/game/components/football.vue

@@ -1231,6 +1231,9 @@ watch(
         return false;
       }
       const gameScene = game.value.scene.getScene('GameScene');
+      if (!gameScene) {
+        return false;
+      }
       if (newData > oldData) {
         gameScene.cursors.left.isDown = false;
         gameScene.cursors.right.isDown = true;
@@ -1439,11 +1442,11 @@ onBeforeMount(() => {
 
 // 组件挂载时初始化游戏
 onMounted(() => {
-  clientObj.value = {
-    width: document.querySelector('.game-container').offsetWidth,
-    height: document.querySelector('.game-container').offsetHeight,
-  }
-  initGame();
+    clientObj.value = {
+      width: document.querySelector('.game-container').offsetWidth,
+      height: document.querySelector('.game-container').offsetHeight,
+    }
+    initGame();
 });
 
 
@@ -1465,12 +1468,14 @@ defineExpose({
 
 <style scoped>
 .game-container {
-  position: relative;
   width: 100%;
   height: 100vh;
-  margin: 0 auto;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background: #000000;
+  overflow: hidden;
+  position: relative;
 }
 
 .game-canvas {

src/views/game/index.vue

@@ -19,39 +19,42 @@
         </swiper-slide>
       </swiper>
     </div>
-    <div class="gameWindow" v-if="currentGame">
-      <!---人体姿态识别-->
-      <div class="columns" v-if="currentGame == 'bodyposecontroller'">
-        <div class="item left">
-          <HumanBody ref="humanBodyLeftRef" type="left"></HumanBody>
-        </div>
-        <div class="item right">
-          <HumanBody ref="humanBodyRightRef" type="right"></HumanBody>
-        </div>
-      </div>
-      <!---篮球投篮-->
-      <div class="columns" v-if="currentGame == 'game_basketball'">
-        <div class="item left">
-          <Basketball ref="basketballLeftRef" type="left"></Basketball>
+    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
+      :leave-active-class="proxy?.animate.rankingWindow.leave">
+      <div class="gameWindow" v-if="currentGame">
+        <!---人体姿态识别-->
+        <div class="columns" v-if="currentGame == 'bodyposecontroller'">
+          <div class="item left">
+            <HumanBody ref="humanBodyLeftRef" type="left"></HumanBody>
+          </div>
+          <div class="item right">
+            <HumanBody ref="humanBodyRightRef" type="right"></HumanBody>
+          </div>
         </div>
-        <div class="item right">
-          <Basketball ref="basketballRightRef" type="right"></Basketball>
+        <!---篮球投篮-->
+        <div class="columns" v-if="currentGame == 'game_basketball'">
+          <div class="item left">
+            <Basketball ref="basketballLeftRef" type="left"></Basketball>
+          </div>
+          <div class="item right">
+            <Basketball ref="basketballRightRef" type="right"></Basketball>
+          </div>
         </div>
-      </div>
-      <!---足球带球-->
-      <div class="columns" v-if="currentGame == 'game_football'">
-        <div class="item left">
-          <Football ref="footballLeftRef" type="left"></Football>
+        <!---足球带球-->
+        <div class="columns" v-if="currentGame == 'game_football'">
+          <div class="item left">
+            <Football ref="footballLeftRef" type="left"></Football>
+          </div>
+          <div class="item right">
+            <Football ref="footballRightRef" type="right"></Football>
+          </div>
         </div>
-        <div class="item right">
-          <Football ref="footballRightRef" type="right"></Football>
+        <!---切水果-->
+        <div class="columns" v-if="currentGame == 'game_fruit'">
+          <Fruit ref="fruitRef" @confirmExit="getExitGame"></Fruit>
         </div>
       </div>
-      <!---切水果-->
-      <div class="columns" v-if="currentGame == 'game_fruit'">
-        <Fruit ref="fruitRef" @confirmExit="getExitGame"></Fruit>
-      </div>
-    </div>
+    </Transition>
     <div class="close" v-if="currentGame" @click="getExitGame"></div>
   </div>
 </template>
@@ -194,16 +197,17 @@ const getInit = async () => {
 };
 
 //打开窗口
-const getJump = (data: any) => {  console.log("222", data)
-  if(data.exam_name == 'test'){
+const getJump = (data: any) => {
+  console.log("222", data)
+  if (data.exam_name == 'test') {
     router.push({ path: '/game/test' });
-  }else{
+  } else {
 
-  currentGame.value = data.exam_name;
+    currentGame.value = data.exam_name;
 
-  data.area_test_id.split(",").forEach((item: any) => {
-    checkBodypose(item);
-  })
+    data.area_test_id.split(",").forEach((item: any) => {
+      checkBodypose(item);
+    })
 
   }
 
@@ -412,11 +416,14 @@ $waiPadding: 6.51rem;
       flex: 1;
       display: flex;
       box-sizing: border-box;
+      width: 50%;
     }
-    .left{
+
+    .left {
       border-right: 10px solid #07121a;
     }
-    .right{
+
+    .right {
       border-left: 10px solid #07121a;
     }
   }