日常开发

src/components/ActionConfirmWindow/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <Transition :enter-active-class="proxy?.animate.mask.enter">
+      <div class="mask" v-if="actionState"></div>
+    </Transition>
+    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
+      :leave-active-class="proxy?.animate.rankingWindow.leave">
+      <div class="confirmDiaBg" v-if="actionState">
+        <div class="confirmDiaWindow">
+          <div class="confirmDiaWindow-con">
+            <div class="pic">
+              <div v-for="item in areaStateList" :key="item.area">
+                {{ item.state }}
+              </div>
+            </div>
+            <div class="name">
+              <template v-if="currentGame == 'game_fruit'">玩法：挥动双手切开水果，失败三次结束游戏</template>
+              <template v-if="currentGame == 'game_basketball'">玩法：身体左右移动对准篮筐，双手投篮</template>
+              <template v-if="currentGame == 'game_football'">玩法：身体左右移动躲避雪糕筒，踢腿射门</template>
+            </div>
+          </div>
+        </div>
+        <div @click="getExit" class="close"></div>
+      </div>
+    </Transition>
+  </div>
+
+</template>
+<script setup lang="ts">
+const { proxy } = getCurrentInstance() as any;
+const emit = defineEmits(['confirmExit']);
+
+const data = reactive<any>({
+  currentGame: "",
+  currentGameArea: [],
+  actionState: false,//窗口状态
+  areaStateList: [],
+});
+
+const { currentGame, currentGameArea, actionState, areaStateList } = toRefs(data);
+
+
+
+onBeforeMount(() => {
+})
+
+onMounted(() => {
+})
+
+/**
+ * 初始化
+ */
+const getInit = (e: any) => {
+  let area = e.ctrl_name.replace('bodyposecontroller_', '');
+  let arr = e.data.result.boxes;
+  let myArr = e.data.result.keypoints;
+  let result = [];
+  for (let i = 0; i < myArr.length; i += 3) {
+    result.push(myArr.slice(i, i + 2));
+  }
+  //console.log("result", result)
+  if (currentGame.value == 'bodyposecontroller') {
+
+  }
+  if (currentGame.value == 'game_basketball') {
+    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) {
+      let myIndex = areaStateList.value.findIndex((item: any) => {
+        return item.area == area;
+      })
+      let boxes = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }];
+      areaStateList.value[myIndex].state = true;
+      areaStateList.value[myIndex].boxes = boxes;
+    }
+  }
+  if (currentGame.value == 'game_football') {
+
+  }
+  if (currentGame.value == 'game_fruit') {
+
+  }
+};
+
+
+/**
+ * 打开
+ */
+const getOpen = async (game: any, area: any) => {
+  currentGame.value = game;
+  currentGameArea.value = area;
+  let list = area.map((item: any) => {
+    let obj = {
+      area: item,
+      state: false
+    }
+    return obj;
+  }) || [];
+  areaStateList.value = list;
+  actionState.value = true;
+};
+
+/**
+ * 关闭
+*/
+const getExit = () => {
+  actionState.value = false;
+  emit('confirmExit', {});
+};
+
+//暴露给父组件用
+defineExpose({
+  getOpen,
+  getInit
+})
+</script>
+<style lang="scss" scoped>
+.mask {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 998;
+}
+
+.confirmDiaBg {
+  width: 70rem;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  margin-left: calc(70rem / -2);
+  margin-top: calc(((70rem / 2) + 3.2rem) / -2);
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+
+  .confirmDiaWindow {
+    border-radius: 1.6rem;
+    opacity: 1;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    background: linear-gradient(62deg, #092941 -85%, #2A484B 96%);
+
+    .confirmDiaWindow-con {
+      padding: 25px;
+
+      .pic {
+
+        width: 100%;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .name {
+        width: 100%;
+        color: #ffffff;
+        font-size: 2.8vh;
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  .close {
+    margin: 0 auto;
+  }
+}
+</style>

src/types/components.d.ts

@@ -7,7 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ActionConfirmWindow: typeof import('./../components/ActionConfirmWindow/index.vue')['default']
     ChooseStudent: typeof import('./../components/ChooseStudent/index.vue')['default']
+    copy: typeof import('./../components/Window copy/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']

src/views/game/components/basketball.vue

@@ -103,7 +103,7 @@ const getCanvas = () => {
   let rightB = bodyposeData.value[9][1];//左手Y
   let bizi = bodyposeData.value[0][1];//鼻子Y
 
-  if (leftB > leftA || rightB > rightA || leftB > bizi || rightB > bizi) {
+  if (leftB < leftA || rightB < rightA || leftB < bizi || rightB < bizi) {
     myThrow.value = 1;
   } else {
     myThrow.value = 0;

src/views/game/index.vue

@@ -61,6 +61,7 @@
       </div>
     </Transition>
     <div class="close" v-if="currentGame" @click="getExitGame"></div>
+    <ActionConfirmWindow ref="actionConfirmRef" @confirmExit="getExitGame(1)"></ActionConfirmWindow>
   </div>
 </template>
 
@@ -76,6 +77,8 @@ import HumanBody from "./components/humanBody.vue";
 import Basketball from "./components/basketball.vue";
 import Football from "./components/football.vue";
 import Fruit from "./components/fruit.vue";
+const router = useRouter();
+const { proxy } = getCurrentInstance() as any;
 const humanBodyLeftRef = ref();
 const humanBodyRightRef = ref();
 const basketballLeftRef = ref();
@@ -83,9 +86,8 @@ const basketballRightRef = ref();
 const footballLeftRef = ref();
 const footballRightRef = ref();
 const fruitRef = ref();
+const actionConfirmRef = ref();
 
-const router = useRouter();
-const { proxy } = getCurrentInstance() as any;
 const { bodyposeWs, startDevice, checkBodypose, openBodypose, terminateBodypose, suspendBodypose, resumeBodypose, getBodyposeState, closeWS } = useWebSocket();
 
 const data = reactive<any>({
@@ -94,7 +96,7 @@ const data = reactive<any>({
   bodyposeState: false,//姿态识别窗口状态
   deviceInfo: {},//设备信息
   currentGame: "",//当前游戏
-  currentGameArea: "",//当前游戏区
+  currentGameArea: [],//当前游戏区
 });
 const { projectList, wsState, bodyposeState, deviceInfo, currentGame, currentGameArea } = toRefs(data);
 
@@ -144,13 +146,18 @@ const getInit = async () => {
       if (e?.code == 0) {
         getBodyposeState(area);
       } else {
+        setTimeout(() => {
+          checkBodypose(area);
+        }, 500)
       }
     }
     if (e?.cmd == 'get_bodyposecontroller_state') {
       let area = e.ctrl_name.replace('bodyposecontroller_', '');
       //state说明: 0：关闭，3：空闲，36：工作中
       if ([3, 36].includes(e.state)) {
-        terminateBodypose(area);
+        setTimeout(() => {
+          terminateBodypose(area);
+        }, 500)
       } else {
         openBodypose(area);
       }
@@ -160,6 +167,9 @@ const getInit = async () => {
         return false;
       }
       let area = e.ctrl_name.replace('bodyposecontroller_', '');
+      //传给预备窗口
+      actionConfirmRef.value.getInit(e);
+      //传给游戏窗口
       if (currentGame.value == 'bodyposecontroller') {
         if (currentGameArea.value.length == 2) {
           if (area == currentGameArea.value[0]) {
@@ -209,7 +219,8 @@ const getJump = (data: any) => {
     router.push({ path: '/game/test' });
   } else {
     currentGame.value = data.exam_name;
-    currentGameArea.value = data.area_test_id.split(",");
+    currentGameArea.value = data.area_test_id?.split(",") || [];
+    actionConfirmRef.value.getOpen(currentGame.value,currentGameArea.value);
     currentGameArea.value.forEach((item: any) => {
       checkBodypose(item);
     })
@@ -227,20 +238,26 @@ const getExit = () => {
 /**
  * 退出游戏
  */
-const getExitGame = () => {
-  proxy?.$modal.confirm("确定退出吗？").then(() => {
-    let obj = projectList.value.find((item: any) => {
-      return item.exam_name == currentGame.value
-    })
-    let myList = obj.area_test_id.split(",");
-    myList.forEach((item: any) => {
+const getExitGame = (type:any) => {
+  if (type == 1) {
+    currentGameArea.value.forEach((item: any) => {
       terminateBodypose(item);
     })
     currentGame.value = "";
-  }).finally(() => {
-  });
+  } else {
+    proxy?.$modal.confirm("确定退出吗？").then(() => {
+      currentGameArea.value.forEach((item: any) => {
+        terminateBodypose(item);
+      })
+      currentGame.value = "";
+    }).finally(() => {
+    });
+  }
+
+
 };
 
+
 onBeforeMount(async () => {
   getInit();
 });
@@ -407,7 +424,7 @@ $waiPadding: 6.51rem;
   width: 100vw;
   height: 100vh;
   position: absolute;
-  z-index: 999;
+  z-index: 990;
   left: 0;
   top: 0;
   display: flex;
@@ -436,7 +453,7 @@ $waiPadding: 6.51rem;
 }
 
 .close {
-  z-index: 9999;
+  z-index: 991;
   position: fixed;
   bottom: 35px;
   left: 50%;