日常开发

src/components/ActionConfirmWindow/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <Transition :enter-active-class="proxy?.animate.mask.enter">
-      <div class="mask" v-if="actionState"></div>
-    </Transition>
+    <div class="mask" v-if="actionState"></div>
     <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
       :leave-active-class="proxy?.animate.rankingWindow.leave">
       <div class="confirmDiaBg" v-if="actionState">
@@ -474,9 +472,11 @@ defineExpose({
                 0% {
                   opacity: 1;
                 }
+
                 50% {
                   opacity: 0;
                 }
+
                 100% {
                   opacity: 1;
                 }
@@ -486,9 +486,11 @@ defineExpose({
                 0% {
                   opacity: 0;
                 }
+
                 50% {
                   opacity: 1;
                 }
+
                 100% {
                   opacity: 0;
                 }

src/views/game/components/basketball.vue

@@ -17,12 +17,19 @@ const canvasRef = ref(null);
 const props = defineProps({
   type: {
     type: String,
-    default: false
+    default: ""
+  },
+  currentGameArea: {
+    type: String,
+    default: ""
+  },
+  areaStateList: {
+    type: Array,
+    default: () => []
   },
 });
 
 const data = reactive<any>({
-  bodyposeData: {},//姿态信息
   clientObj: {},//浏览器对象
   boxes: [],//四个点坐标
   proportion: null,//人框和屏幕比例
@@ -30,7 +37,7 @@ const data = reactive<any>({
   direction: null,//跑动
 });
 
-const { bodyposeData, clientObj, boxes, proportion, myThrow, direction } = toRefs(data);
+const { clientObj, boxes, proportion, myThrow, direction } = toRefs(data);
 
 /**
  * 监听投篮
@@ -84,24 +91,23 @@ const getInit = (e: any) => {
     result.push(arr.slice(i, i + 2));
   }
   //console.log("result", result)
-  bodyposeData.value = result;
-  if (boxes.value.length == 0) {
-    // speckText("识别成功");
-    // proxy?.$modal.msgWarning(`识别成功`);
-    let arr = e.data.result.boxes;
-    boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
-    proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
-  }
-  getCanvas();
+  // if (boxes.value.length == 0) {
+  //   // speckText("识别成功");
+  //   // proxy?.$modal.msgWarning(`识别成功`);
+  //   let arr = e.data.result.boxes;
+  //   boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
+  //   proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
+  // }
+  getCanvas(result);
 };
 
-const getCanvas = () => {
+const getCanvas = (result: any) => {
   //过肩或者过鼻子都算投篮
-  let leftA = bodyposeData.value[6][1];//右肩Y
-  let rightA = bodyposeData.value[5][1];//左肩Y
-  let leftB = bodyposeData.value[10][1];//右手Y
-  let rightB = bodyposeData.value[9][1];//左手Y
-  let bizi = bodyposeData.value[0][1];//鼻子Y
+  let leftA = result[6][1];//右肩Y
+  let rightA = result[5][1];//左肩Y
+  let leftB = result[10][1];//右手Y
+  let rightB = result[9][1];//左手Y
+  let bizi = result[0][1];//鼻子Y
 
   if (leftB < leftA || rightB < rightA || leftB < bizi || rightB < bizi) {
     myThrow.value = 1;
@@ -131,7 +137,7 @@ const getCanvas = () => {
   // console.log("人体中心", pointB);
   // console.log("offset", offset)
   // console.log("proportion.value",proportion.value)
-  const originalPoints = bodyposeData.value;
+  const originalPoints = result;
   // 计算缩放后坐标
   const postData = originalPoints.map((point: any) => {
     const newX = (point[0] - pointB.x) * proportion.value + pointB.x;
@@ -903,6 +909,11 @@ onMounted(() => {
     width: document.querySelector('.game-container').offsetWidth,
     height: document.querySelector('.game-container').offsetHeight,
   }
+  let obj: any = props.areaStateList.find((item: any) => {
+    return item.area == props.currentGameArea
+  })
+  boxes.value = obj.boxes;
+  proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
   initGame();
 });
 

src/views/game/components/football.vue

@@ -70,12 +70,19 @@ const canvasRef = ref(null);
 const props = defineProps({
   type: {
     type: String,
-    default: false
+    default: ""
+  },
+  currentGameArea: {
+    type: String,
+    default: ""
+  },
+  areaStateList: {
+    type: Array,
+    default: () => []
   },
 });
 
 const data = reactive<any>({
-  bodyposeData: {},//姿态信息
   clientObj: {},//浏览器对象
   boxes: [],//四个点坐标
   proportion: null,//人框和屏幕比例
@@ -84,7 +91,7 @@ const data = reactive<any>({
   direction: null,//跑动
 });
 
-const { bodyposeData, clientObj, boxes, proportion, myThrow, myTimer, direction } = toRefs(data);
+const { clientObj, boxes, proportion, myThrow, myTimer, direction } = toRefs(data);
 
 // 游戏状态管理
 const currentScene = ref('start');
@@ -1256,27 +1263,26 @@ const getInit = (e: any) => {
     result.push(arr.slice(i, i + 2));
   }
   //console.log("result", result)
-  bodyposeData.value = result;
-  if (boxes.value.length == 0) {
-    // speckText("识别成功");
-    // proxy?.$modal.msgWarning(`识别成功`);
-    let arr = e.data.result.boxes;
-    boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
-    proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
-  }
-  getCanvas();
+  // if (boxes.value.length == 0) {
+  //   // speckText("识别成功");
+  //   // proxy?.$modal.msgWarning(`识别成功`);
+  //   let arr = e.data.result.boxes;
+  //   boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
+  //   proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
+  // }
+  getCanvas(result);
 };
 
 
-const getCanvas = () => {
+const getCanvas = (result: any) => {
 
-  let leftA = { x: bodyposeData.value[12][0], y: bodyposeData.value[12][1] };//大腿
-  let leftB = { x: bodyposeData.value[14][0], y: bodyposeData.value[14][1] };//膝盖
-  let leftC = { x: bodyposeData.value[16][0], y: bodyposeData.value[16][1] };//脚
+  let leftA = { x: result[12][0], y: result[12][1] };//大腿
+  let leftB = { x: result[14][0], y: result[14][1] };//膝盖
+  let leftC = { x: result[16][0], y: result[16][1] };//脚
 
-  let rightA = { x: bodyposeData.value[11][0], y: bodyposeData.value[11][1] };//大腿
-  let rightB = { x: bodyposeData.value[13][0], y: bodyposeData.value[13][1] };//膝盖
-  let rightC = { x: bodyposeData.value[15][0], y: bodyposeData.value[15][1] };//脚
+  let rightA = { x: result[11][0], y: result[11][1] };//大腿
+  let rightB = { x: result[13][0], y: result[13][1] };//膝盖
+  let rightC = { x: result[15][0], y: result[15][1] };//脚
 
   let jiaodu1 = calculateAngleAtB(leftA, leftB, leftC)
   let jiaodu2 = calculateAngleAtB(rightA, rightB, rightC)
@@ -1310,7 +1316,7 @@ const getCanvas = () => {
   // console.log("人体中心", pointB);
   // console.log("offset", offset)
   // console.log("proportion.value",proportion.value)
-  const originalPoints = bodyposeData.value;
+  const originalPoints = result;
   // 计算缩放后坐标
   const postData = originalPoints.map((point: any) => {
     const newX = (point[0] - pointB.x) * proportion.value + pointB.x;
@@ -1437,15 +1443,21 @@ function calculateAngleAtB(pointA, pointB, pointC) {
 }
 
 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,
+  }
+  let obj: any = props.areaStateList.find((item: any) => {
+    return item.area == props.currentGameArea
+  })
+  boxes.value = obj.boxes;
+  proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
+  initGame();
 });
 
 

src/views/game/components/fruit.vue

@@ -15,15 +15,30 @@ const emit = defineEmits(['confirmExit']);
 const gameRef = ref(null); // 用于保存游戏实例的ref
 const canvasRef = ref(null);
 
+//父值
+const props = defineProps({
+  type: {
+    type: String,
+    default: ""
+  },
+  currentGameArea: {
+    type: String,
+    default: ""
+  },
+  areaStateList: {
+    type: Array,
+    default: () => []
+  },
+});
+
 const data = reactive<any>({
-  bodyposeData: {},//姿态信息
   clientObj: {},//浏览器对象
   boxes: [],//四个点坐标
   proportion: null,//人框和屏幕比例
   scaleRatio: 2.2,//素材比例
 });
 
-const { bodyposeData, clientObj, boxes, proportion, scaleRatio } = toRefs(data);
+const { clientObj, boxes, proportion, scaleRatio } = toRefs(data);
 
 /**
  * 初始化
@@ -35,21 +50,20 @@ const getInit = (e: any) => {
     result.push(arr.slice(i, i + 2));
   }
   // console.log("result", result)
-  bodyposeData.value = result;
-  if (boxes.value.length == 0) {
-    // speckText("识别成功");
-    // proxy?.$modal.msgWarning(`识别成功`);
-    let arr = e.data.result.boxes;
-    boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
-    proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
-  }
-  getCanvas();
+  // if (boxes.value.length == 0) {
+  //   // speckText("识别成功");
+  //   // proxy?.$modal.msgWarning(`识别成功`);
+  //   let arr = e.data.result.boxes;
+  //   boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
+  //   proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
+  // }
+  getCanvas(result);
 };
 
 /**
  * 绘图
 */
-const getCanvas = () => {
+const getCanvas = (result: any) => {
   const canvas: any = canvasRef.value;
   const ctx = canvas.getContext('2d');
   // 清空整个画布
@@ -72,7 +86,7 @@ const getCanvas = () => {
   // console.log("人体中心", pointB);
   // console.log("offset", offset)
   // console.log("proportion.value",proportion.value)
-  const originalPoints = bodyposeData.value;
+  const originalPoints = result;
   // 计算缩放后坐标
   const postData = originalPoints.map((point: any) => {
     const newX = (point[0] - pointB.x) * proportion.value + pointB.x;
@@ -1677,15 +1691,21 @@ const getActiveScene = () => {
 };
 
 onBeforeMount(() => {
-  clientObj.value = {
-    width: document.documentElement.clientWidth,
-    height: document.documentElement.clientHeight,
-  }
-  scaleRatio.value = clientObj.value.height / 480;
+
 });
 
 // 初始化游戏
 onMounted(() => {
+    clientObj.value = {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+  }
+  scaleRatio.value = clientObj.value.height / 480;
+  let obj: any = props.areaStateList.find((item: any) => {
+    return item.area == props.currentGameArea
+  })
+  boxes.value = obj.boxes;
+  proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
   // 获取容器尺寸
   const container = document.getElementById('game');
   // 初始化工具类

src/views/game/components/humanBody.vue

@@ -8,15 +8,29 @@
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const canvasRef = ref(null);
+//父值
+const props = defineProps({
+  type: {
+    type: String,
+    default: ""
+  },
+  currentGameArea: {
+    type: String,
+    default: ""
+  },
+  areaStateList: {
+    type: Array,
+    default: () => []
+  },
+});
 
 const data = reactive<any>({
-  bodyposeData: {},//姿态信息
   clientObj: {},//浏览器对象
   boxes: [],//四个点坐标
   proportion: null,//人框和屏幕比例
 });
 
-const { bodyposeData, clientObj, boxes, proportion } = toRefs(data);
+const { clientObj, boxes, proportion } = toRefs(data);
 
 /**
  * 初始化
@@ -27,23 +41,22 @@ const getInit = (e: any) => {
   for (let i = 0; i < arr.length; i += 3) {
     result.push(arr.slice(i, i + 2));
   }
-  console.log("result", result)
-  bodyposeData.value = result;
-  if (boxes.value.length == 0) {
-    // speckText("识别成功");
-    // proxy?.$modal.msgWarning(`识别成功`);
-    let arr = e.data.result.boxes;
-    boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
-    proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
-  }
+  // console.log("result", result)
+  // if (boxes.value.length == 0) {
+  //   // speckText("识别成功");
+  //   // proxy?.$modal.msgWarning(`识别成功`);
+  //   let arr = e.data.result.boxes;
+  //   boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
+  //   proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
+  // }
   //绘制图案
-  getCanvas();
+  getCanvas(result);
 };
 
 /**
  * 绘图
 */
-const getCanvas = () => {
+const getCanvas = (result: any) => {
   const canvas: any = canvasRef.value;
   const ctx = canvas.getContext('2d');
   // 清空整个画布
@@ -66,7 +79,7 @@ const getCanvas = () => {
   // console.log("人体中心", pointB);
   // console.log("offset", offset)
   // console.log("proportion.value",proportion.value)
-  const originalPoints = bodyposeData.value;
+  const originalPoints = result;
   // 计算缩放后坐标
   const postData = originalPoints.map((point: any) => {
     const newX = (point[0] - pointB.x) * proportion.value + pointB.x;
@@ -137,6 +150,11 @@ onMounted(() => {
     width: document.querySelector('.game-container').offsetWidth,
     height: document.querySelector('.game-container').offsetHeight,
   }
+  let obj: any = props.areaStateList.find((item: any) => {
+    return item.area == props.currentGameArea
+  })
+  boxes.value = obj.boxes;
+  proportion.value = (clientObj.value.height / (boxes.value[0].y - boxes.value[1].y)).toFixed(2);
 })
 
 onBeforeUnmount(() => {

src/views/game/index.vue

@@ -26,37 +26,37 @@
         <div class="columns" v-if="currentGame == 'bodyposecontroller'">
           <template v-if="currentGameArea.length == 2">
             <div class="item left">
-              <HumanBody ref="humanBodyLeftRef" type="left"></HumanBody>
+              <HumanBody ref="humanBodyLeftRef" type="left" :currentGameArea="currentGameArea[0]" :areaStateList="areaStateList"></HumanBody>
             </div>
             <div class="item right">
-              <HumanBody ref="humanBodyRightRef" type="right"></HumanBody>
+              <HumanBody ref="humanBodyRightRef" type="right" :currentGameArea="currentGameArea[1]" :areaStateList="areaStateList"></HumanBody>
             </div>
           </template>
           <template v-else>
-            <HumanBody ref="humanBodyLeftRef" type="left"></HumanBody>
+            <HumanBody ref="humanBodyLeftRef" type="left" :currentGameArea="currentGameArea[0]" :areaStateList="areaStateList"></HumanBody>
           </template>
         </div>
         <!---篮球投篮-->
         <div class="columns" v-if="currentGame == 'game_basketball'">
           <div class="item left">
-            <Basketball ref="basketballLeftRef" type="left"></Basketball>
+            <Basketball ref="basketballLeftRef" type="left" :currentGameArea="currentGameArea[0]" :areaStateList="areaStateList"></Basketball>
           </div>
           <div class="item right">
-            <Basketball ref="basketballRightRef" type="right"></Basketball>
+            <Basketball ref="basketballRightRef" type="right" :currentGameArea="currentGameArea[1]" :areaStateList="areaStateList"></Basketball>
           </div>
         </div>
         <!---足球带球-->
         <div class="columns" v-if="currentGame == 'game_football'">
           <div class="item left">
-            <Football ref="footballLeftRef" type="left"></Football>
+            <Football ref="footballLeftRef" type="left" :currentGameArea="currentGameArea[0]" :areaStateList="areaStateList"></Football>
           </div>
           <div class="item right">
-            <Football ref="footballRightRef" type="right"></Football>
+            <Football ref="footballRightRef" type="right" :currentGameArea="currentGameArea[1]" :areaStateList="areaStateList"></Football>
           </div>
         </div>
         <!---切水果-->
         <div class="columns" v-if="currentGame == 'game_fruit'">
-          <Fruit ref="fruitRef" @confirmExit="getExitGame"></Fruit>
+          <Fruit ref="fruitRef" @confirmExit="getExitGame" :currentGameArea="currentGameArea[0]"  :areaStateList="areaStateList"></Fruit>
         </div>
       </div>
     </Transition>
@@ -264,8 +264,8 @@ const getExitGame = (type: any) => {
  * 开始游戏
  */
 const getStartGame = (data: any) => {
-  start.value = true;
   areaStateList.value = data;
+  start.value = true;
 };