[^]游戏：调整游戏难度&&精简代码

wangyupo · wangyupo · commit 4b3e02973c88 · 2022-03-24T00:22:35.000+08:00
diff --git a/src/views/game/components/Config.vue b/src/views/game/components/Config.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed, watch, onMounted } from "vue";
+import { computed } from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 
diff --git a/src/views/game/components/Enemy.vue b/src/views/game/components/Enemy.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed, onMounted, watch } from "vue";
-import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
+import { ref, computed, onMounted, watch } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
 import { ElNotification } from "element-plus";
 import loadsh from "lodash";
 import { useStore } from "vuex";
diff --git a/src/views/game/components/Fail.vue b/src/views/game/components/Fail.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed, watch, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import loadsh from "lodash";
 import { useStore } from "vuex";
 const store = useStore();
diff --git a/src/views/game/components/Figure.vue b/src/views/game/components/Figure.vue
@@ -5,17 +5,34 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed, onMounted, watch } from "vue";
-import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
+import { ref, computed, onMounted, watch } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
 import { useStore } from "vuex";
 const store = useStore();
 
 const jumpUp = ref(null);
 const jumpDown = ref(null);
+const jumpHeight = ref(600);
+const jumpPoor = ref(100);
 const brick = computed(() => store.state.game.brick);
 const figure = computed(() => store.state.game.figure);
 const game = computed(() => store.state.game.game);
 
+watch(
+  game,
+  (val) => {
+    if (!val.start) {
+      jumpHeight.value = 600;
+    } else {
+      if (jumpHeight.value <= 200) {
+        jumpPoor.value = 10;
+      }
+      jumpHeight.value = jumpHeight.value - jumpPoor.value;
+    }
+  },
+  { deep: true }
+);
+
 const figureJump = () => {
   figure.value.bottom += figure.value.speed;
   document.getElementById("figure").style.bottom = figure.value.bottom + "px";
@@ -43,7 +60,7 @@ const moveFn = (e) => {
       cancelAnimationFrame(jumpUp.value);
       jumpUp.value = null;
       jumpDown.value = requestAnimationFrame(figureDown);
-    }, 300);
+    }, jumpHeight.value);
   }
 };
 
diff --git a/src/views/game/components/Floor.vue b/src/views/game/components/Floor.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, computed, watch } from "vue";
+import { onMounted, computed, watch } from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 
diff --git a/src/views/game/components/GameMap.vue b/src/views/game/components/GameMap.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed, onMounted } from "vue";
+import { computed } from "vue";
 import Floor from "./Floor";
 import Figure from "./Figure";
 import Enemy from "./Enemy";
diff --git a/src/views/game/components/Score.vue b/src/views/game/components/Score.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed, watch, onMounted } from "vue";
+import { computed } from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 
@@ -18,7 +18,5 @@ const game = computed(() => store.state.game.game);
   position: absolute;
   top: 10px;
   right: 20px;
-  // left: 50%;
-  // transform: translateX(-50%);
 }
 </style>
diff --git a/src/views/game/index.vue b/src/views/game/index.vue
@@ -8,8 +8,8 @@
 
 <script setup>
 import Map from "./components/GameMap.vue";
-import { ref, reactive, onMounted, computed, watch } from "vue";
-import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
+import { ref, onMounted, computed } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
 import loadsh from "lodash";
 import { useStore } from "vuex";
 const store = useStore();
