日常开发

src/views/game/components/basketball.vue

@@ -3,7 +3,7 @@
     <canvas :id="'canvas' + type" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @touchstart="handleTouchStart"
       @touchend="handleTouchEnd"></canvas>
     <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"
-      style="position:fixed;left: 0; top: 0;"></canvas>
+      style="position:absolute;left: 0; top: 0;"></canvas>
   </div>
 </template>
 
@@ -918,18 +918,18 @@ const initGame = async () => {
   gameState.ballY = clientObj.value.height - 90;
 };
 
+onBeforeMount(() => {
+
+});
 
 
 // 生命周期钩子
 onMounted(() => {
-  initGame();
-});
-
-onBeforeMount(() => {
   clientObj.value = {
-    width: document.documentElement.clientWidth,
-    height: document.documentElement.clientHeight,
+    width: document.querySelector('.game-container').offsetWidth,
+    height: document.querySelector('.game-container').offsetHeight,
   }
+  initGame();
 });
 
 onBeforeUnmount(() => {
@@ -960,6 +960,7 @@ defineExpose({
   align-items: center;
   background-color: #000;
   overflow: hidden;
+  position: relative;
 }
 
 #canvas {

src/views/game/components/football.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="game-container">
-    <div id="gameCanvas" class="game-canvas"></div>
+    <div :id="'gameCanvas' + type" class="game-canvas"></div>
     <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"
-      style="position:fixed;left: 0; top: 0; z-index: 999;"></canvas>
+      style="position:absolute;left: 0; top: 0; z-index: 999;"></canvas>
     <!-- 游戏启动界面 -->
     <div v-if="currentScene === 'start'" class="gamestart">
       <img v-if="currentScene === 'start'" src="/static/images/football/game_start.jpg" class="start_bg" />
@@ -67,7 +67,13 @@ const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const emit = defineEmits(['confirmExit']);
 const canvasRef = ref(null);
-
+//父值
+const props = defineProps({
+  type: {
+    type: String,
+    default: false
+  },
+});
 
 const data = reactive<any>({
   bodyposeData: {},//姿态信息
@@ -160,7 +166,7 @@ const initGame = () => {
     type: Phaser.AUTO,
     width: GAME_WIDTH,
     height: GAME_HEIGHT,
-    parent: 'gameCanvas',
+    parent: 'gameCanvas' + props.type,
     physics: {
       default: 'arcade',
       arcade: {
@@ -1181,11 +1187,6 @@ const getTitle = (score) => {
   return '足球传奇';
 };
 
-// 组件挂载时初始化游戏
-onMounted(() => {
-  initGame();
-});
-
 // 监听场景变化
 watch(currentScene, (newVal) => {
   if (newVal === 'game' && game.value) {
@@ -1465,13 +1466,18 @@ function calculateAngleAtB(pointA, pointB, pointC) {
 }
 
 onBeforeMount(() => {
+});
+
+// 组件挂载时初始化游戏
+onMounted(() => {
   clientObj.value = {
-    width: document.documentElement.clientWidth,
-    height: document.documentElement.clientHeight,
+    width: document.querySelector('.game-container').offsetWidth,
+    height: document.querySelector('.game-container').offsetHeight,
   }
-  getInit();
+  initGame();
 });
 
+
 // 组件卸载时清理事件监听
 onUnmounted(() => {
   if (game.value && game.value.events && scoreListener) {

src/views/game/index.vue

@@ -143,17 +143,30 @@ const getInit = async () => {
       }
     }
     if (e?.type == 'bodyposecontroller_result') {
+      let area = e.ctrl_name.replace('bodyposecontroller_', '');
       if (currentGame.value == 'bodyposecontroller') {
-        humanBodyLeftRef.value.getInit(e);
-        humanBodyRightRef.value.getInit(e);
+        if (area == 11) {
+          humanBodyLeftRef.value.getInit(e);
+        }
+        if (area == 12) {
+          humanBodyRightRef.value.getInit(e);
+        }
       }
       if (currentGame.value == 'game_basketball') {
-        basketballLeftRef.value.getInit(e);
-        basketballRightRef.value.getInit(e);
+        if (area == 11) {
+          basketballLeftRef.value.getInit(e);
+        }
+        if (area == 12) {
+          basketballRightRef.value.getInit(e);
+        }
       }
       if (currentGame.value == 'game_football') {
-        footballLeftRef.value.getInit(e);
-        footballRightRef.value.getInit(e);
+        if (area == 11) {
+          footballLeftRef.value.getInit(e);
+        }
+        if (area == 12) {
+          footballRightRef.value.getInit(e);
+        }
       }
       if (currentGame.value == 'game_fruit') {
         fruitRef.value.getInit(e);
@@ -368,7 +381,7 @@ $waiPadding: 6.51rem;
   .columns {
     display: flex;
     flex-wrap: wrap;
-
+width: 100%;
     .item {
       width: 50%;
       display: flex;