.

src/pages/game/algorithm/cage.js

@@ -1,54 +1,73 @@
 // 辅助逻辑的颜色,
-const colorList = ['#f5222d', '#d4380d', '#d46b08', '#d48806', '#d4b106', '#7cb305', '#389e0d', '#08979c', '#096dd9', '#531dab']
-import { desginRadius, desginCageRadius, cageNum, scale, primaryColor } from './design';
+const colorList = [
+  "#f5222d",
+  "#d4380d",
+  "#d46b08",
+  "#d48806",
+  "#d4b106",
+  "#7cb305",
+  "#389e0d",
+  "#08979c",
+  "#096dd9",
+  "#531dab",
+];
+import {
+  desginRadius,
+  desginCageRadius,
+  cageNum,
+  scale,
+  primaryColor,
+} from "./design";
 
 // 绘制目标轿厢
 export function drawTargeCages({ two, center }) {
   // 摩天轮半径
   const wheelRaduis = desginRadius * scale;
-  const perAngle = Math.PI / cageNum // 2 * Math.PI / ( cageNum * 2 ) 分成 轿厢 * 2 的分数, 最终效果是每隔一个空白，一个轿厢
+  const perAngle = Math.PI / cageNum; // 2 * Math.PI / ( cageNum * 2 ) 分成 轿厢 * 2 的分数, 最终效果是每隔一个空白，一个轿厢
   const offsetAngle = perAngle / 2;
   // 轿厢半径
-  const cageRadius = desginCageRadius * scale;
-  
+  const cageRadius = desginCageRadius * scale - 1;
+
   // 绘制
-  const list = Array(cageNum).fill().map((_, inx) => {
-    const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
-    // const endAngle = startAngle + perAngle
-
-    // 1、计算扇形边上的中心坐标
-    const cx = center.x + Math.cos(startAngle + perAngle / 2) * wheelRaduis
-    const cy = center.y + Math.sin(startAngle + perAngle / 2) * wheelRaduis
-
-    // 2、轿厢
-    const rect = two.makeCircle(cx, cy, cageRadius);
-    rect.id = `mnt-${inx}`
-    // rect.fill = colorList[inx] // 取消这个注释, 有助于梳理逻辑
-    rect.noFill()
-    rect.stroke = primaryColor
-    rect.linewidth = 2
-    rect.dashes = [4]
-    rect.__$angle = startAngle;  // 轿厢的初始弧度
-    rect.__$mnt = null; // 当前实体轿厢 也就是已经被击中的轿厢
-
-    return rect
-  })
+  const list = Array(cageNum)
+    .fill()
+    .map((_, inx) => {
+      const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
+      // const endAngle = startAngle + perAngle
+
+      // 1、计算扇形边上的中心坐标
+      const cx = center.x + Math.cos(startAngle + perAngle / 2) * wheelRaduis;
+      const cy = center.y + Math.sin(startAngle + perAngle / 2) * wheelRaduis;
+
+      // 2、轿厢
+      const rect = two.makeCircle(cx, cy, cageRadius);
+      rect.id = `mnt-${inx}`;
+      // rect.fill = colorList[inx] // 取消这个注释, 有助于梳理逻辑
+      rect.noFill();
+      rect.stroke = primaryColor;
+      rect.linewidth = 2;
+      rect.dashes = [4];
+      rect.__$angle = startAngle; // 轿厢的初始弧度
+      rect.__$mnt = null; // 当前实体轿厢 也就是已经被击中的轿厢
+
+      return rect;
+    });
 
   // 是否击中
   const checkHit = (bullet) => {
     // next 是否继续下一轮验证
     // error 是否发生了错误
-    let res = { next: true, error: false }
+    let res = { next: true, error: false };
 
     // 可接受校验偏差范围
     const offset = cageRadius / 3;
-    
+
     const rect2 = bullet.getBoundingClientRect();
-    const x = rect2.left + rect2.width / 2
-    const y = rect2.top + rect2.height / 2
+    const x = rect2.left + rect2.width / 2;
+    const y = rect2.top + rect2.height / 2;
 
     // 如果子弹 y 坐标超过警戒线
-    if (y < (center.y + wheelRaduis + offset)) {
+    if (y < center.y + wheelRaduis + offset) {
       res.next = false;
       res.error = true;
       return res;
@@ -58,24 +77,23 @@ export function drawTargeCages({ two, center }) {
     const cage = list.filter((it) => {
       const rect = it.getBoundingClientRect();
 
-      const left = rect.left + offset
-      const right = rect.right - offset
-      const top = rect.top + offset
-      const bottom = rect.bottom - offset
+      const left = rect.left + offset;
+      const right = rect.right - offset;
+      const top = rect.top + offset;
+      const bottom = rect.bottom - offset;
 
       // 如果当前子弹的中心点位于目标轿厢矩形范围内
       // 则代表击中
-      return x >= left && x <= right &&
-        y >= top && y <= bottom;
-    })[0]
+      return x >= left && x <= right && y >= top && y <= bottom;
+    })[0];
 
     // 未找到对应的目标轿厢
     if (!cage) {
       res.next = true;
       res.error = false;
       return res;
-    };
-    
+    }
+
     // 如果目标轿厢已经挂载了一个
     if (cage.__$mnt) {
       res.next = false;
@@ -90,11 +108,11 @@ export function drawTargeCages({ two, center }) {
     res.next = false;
     res.error = false;
     return res;
-  }
+  };
 
   return {
     list,
     cageRadius,
     checkHit,
-  }
+  };
 }

src/utils/api.js

@@ -29,7 +29,6 @@ export const gameOver = () => request(`/api/wx/game/over`, { method: 'post' })
 
 /**
  * @游戏排行榜
- *
  */
 //
 export const gameTop = () => request(`/api/wx/top`, { method: 'get' })