tropsCode/src/views/game/basketball.vue

<template>
  <div class="game-container">
    <canvas id="canvas" @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>
  </div>
</template>

<script setup name="Basketball" lang="ts">
import { onMounted, ref, reactive, onBeforeUnmount } from 'vue';
import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
import { useWebSocket } from '@/utils/bodyposeWs';
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const { bodyposeWs, startDevice, checkBodypose, openBodypose, terminateBodypose, suspendBodypose, resumeBodypose, getBodyposeState, closeWS } = useWebSocket();
const canvasRef = ref(null);

const data = reactive<any>({
  bodyposeData: {},//姿态信息
  bodyposeState: false,//姿态识别窗口状态
  parameter: {},//参数
  deviceInfo: {},//设备信息
  againNum: 0,//再次启动次数
  againTimer: null,//定时状态
  wsState: false,//WS状态
  clientObj: {},//浏览器对象
  boxes: [],//四个点坐标
  proportion: null,//人框和屏幕比例
  myThrow: 0,//0放下1举投
  direction: null,//跑动
});

const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj, boxes, proportion, myThrow, direction } = toRefs(data);

/**
 * 监听投篮
 */
watch(
  () => myThrow.value,
  (newData, oldData) => {
    console.log("ppp", oldData, newData)
    if (newData == 1) {
      console.log("投篮")
      handleMouseDown();
      setTimeout(() => {
        handleMouseUp();
      }, 100)

    } else {

    }
  },
  { immediate: true }
);

/**
 * 监听跑动
 */
watch(
  () => direction.value,
  (newData, oldData) => {
    nextTick(() => {
      if (newData > oldData) {
        gameState.keyRight = true;
        gameState.keyLeft = false;
      } else {
        gameState.keyLeft = true;
        gameState.keyRight = false;

      }
    });
  },
  { immediate: true }
);

/**
 * 初始化
 */
const getInit = async () => {
  console.log("触发姿态识别")
  let deviceid = localStorage.getItem('deviceid') || '';
  if (!deviceid) {
    proxy?.$modal.msgError(`请重新登录绑定设备号后使用`);
    return false;
  }
  bodyposeState.value = true;
  if (wsState.value) {
    proxy?.$modal.msgWarning(`操作过快，请稍后重试`);
    setTimeout(() => {
      bodyposeState.value = false;
    }, 1000)
    return false;
  }
  speckText("正在姿态识别");
  proxy?.$modal.msgWarning(`正在姿态识别`);
  bodyposeWs((e: any) => {
    //console.log("bodyposeWS", e)
    if (e?.wksid) {
      wsState.value = true;
      //获取设备信息
      startDevice({ deviceid: deviceid });
      console.log("获取设备信息")
    }
    if (e?.type == 'fe_device_init_result') {
      //接收设备信息并发送请求
      if (e?.device_info) {
        deviceInfo.value = e.device_info;
        getCheckBodypose();
        console.log("返回设备信息，检查是否支持姿态识别")
      } else {
        proxy?.$modal.msgError(`设备信息缺失，请重新登录绑定设备号后使用`);
      }
    }
    if (e?.cmd == 'check_bodyposecontroller_available') {
      let handcontroller_id = deviceInfo.value.handcontroller_id;
      if (e?.code == 0) {
        //查看姿态识别状态，如果不处于关闭就先关闭再重新启动（可能会APP退出然后工作站还在运行的可能性）
        getBodyposeState(handcontroller_id);
        againNum.value = 0;
        againTimer.value = null;
        clearTimeout(againTimer.value);
        console.log("查看姿态识别状态")
      } else {
        //尝试多次查询姿态识别状态
        if (againNum.value <= 2) {
          againTimer.value = setTimeout(() => {
            getCheckBodypose();
          }, 500)
          againNum.value++;
        } else {
          let msg = "";
          if (e.code == 102402) {
            msg = `多次连接失败请重试，姿态识别模块被占用`;
          } else {
            msg = `多次连接失败请重试，姿态识别模块不可用，code：${e.code}`;
          }
          proxy?.$modal.msgWarning(msg);
          againNum.value = 0;
          againTimer.value = null;
          clearTimeout(againTimer.value);
          getCloseBodypose();//直接关闭 
        }

      }
    }
    if (e?.cmd == 'get_bodyposecontroller_state') {
      let handcontroller_id = deviceInfo.value.handcontroller_id;
      //state说明: 0：关闭，3：空闲，36：工作中
      if ([3, 36].includes(e.state)) {
        getCloseBodypose();
        proxy?.$modal.msgWarning(`请重新姿态识别`);
      } else {
        openBodypose(handcontroller_id);
      }
    }
    if (e?.type == 'bodyposecontroller_result') {
      let arr = e.data.result.keypoints;
      let result = [];
      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);
      }
      getCanvas();
    }
    if (e?.cmd == 'terminate_bodyposecontroller') {
      if (e?.code == 0) {
        closeWS();
        bodyposeState.value = false;
      }
    }
    if (e?.type == 'disconnect') {
      wsState.value = false;
    }
  });
};


/**
 * 查询姿态识别状态
*/
const getCheckBodypose = () => {
  let handcontroller_id = deviceInfo.value.handcontroller_id;
  //检查是否支持姿态识别
  checkBodypose(handcontroller_id);
};

/**
 * 关闭姿态识别
*/
const getCloseBodypose = () => {
  let handcontroller_id = deviceInfo.value.handcontroller_id;
  terminateBodypose(handcontroller_id);
  bodyposeState.value = false;
  speckCancel(); //停止播报
  setTimeout(() => {
    if (wsState.value) {
      closeWS();
    }
  }, 3000)
};


const getCanvas = () => {
  //过肩或者过鼻子都算投篮
  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

  if (leftB > leftA || rightB > rightA || leftB > bizi || rightB > bizi) {
    myThrow.value = 1;
  } else {
    myThrow.value = 0;
  }

  const canvas: any = canvasRef.value;
  const ctx = canvas.getContext('2d');
  // 清空整个画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 保存当前状态 
  ctx.save();
  function calculateOffset(a: any, b: any) {
    return {
      x: b.x - a.x,
      y: b.y - a.y
    };
  }
  const pointA = { x: clientObj.value.width / 2, y: clientObj.value.height / 2 };
  const pointB = { x: (boxes.value[2].x + boxes.value[0].x) / 2, y: (boxes.value[3].y + boxes.value[1].y) / 2 };
  const offset = calculateOffset(pointA, pointB);
  ctx.translate(-offset.x, -offset.y);
  // console.log("Canvas分辨率", clientObj.value);
  // console.log("人体图片四点坐标", boxes.value)
  // console.log("Canvas中心", pointA);
  // console.log("人体中心", pointB);
  // console.log("offset", offset)
  // console.log("proportion.value",proportion.value)
  const originalPoints = bodyposeData.value;
  // 计算缩放后坐标
  const postData = originalPoints.map((point: any) => {
    const newX = (point[0] - pointB.x) * proportion.value + pointB.x;
    const newY = (point[1] - pointB.y) * proportion.value + pointB.y;
    return [newX, newY];
  });
  // console.log("原始坐标：", originalPoints);
  // console.log("缩放后坐标：", postData);

  direction.value = postData[0][0] - offset.x - (94 / 2);//鼻子X
  //绘制头部
  const point1 = { x: postData[4][0], y: postData[4][1] };
  const point2 = { x: postData[3][0], y: postData[3][1] };
  // 计算椭圆参数
  const centerX = (point1.x + point2.x) / 2; // 椭圆中心X
  const centerY = (point1.y + point2.y) / 2; // 椭圆中心Y
  const distance = Math.sqrt(
    Math.pow(point2.x - point1.x, 2) +
    Math.pow(point2.y - point1.y, 2)
  ); // 两个焦点之间的距离
  const radiusX = distance * 0.5; // 水平半径（可调整）
  const radiusY = distance * 0.6; // 垂直半径（可调整）
  // 1. 绘制填充椭圆
  ctx.beginPath();
  ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
  ctx.fillStyle = 'red'; // 填充颜色
  ctx.fill(); // 填充
  // 2. 绘制边框
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.stroke();
  // 绘制每个点
  postData.forEach((point: any, index: number) => {
    //眼睛鼻子不显示
    if (![0, 1, 2].includes(index)) {
      const [x, y] = point;
      ctx.beginPath();
      ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.stroke();
    }
  });
  // 根据点关系连线
  const arr = [[10, 8], [8, 6], [6, 5], [5, 7], [7, 9], [6, 12], [5, 11], [12, 11], [12, 14], [14, 16], [11, 13], [13, 15]]
  arr.forEach((point: any) => {
    let index1 = point[0];
    let index2 = point[1];
    //连线
    const dian1 = { x: postData[index1][0], y: postData[index1][1] };
    const dian2 = { x: postData[index2][0], y: postData[index2][1] };
    // 绘制连线
    ctx.beginPath();
    ctx.moveTo(dian1.x, dian1.y); // 起点
    ctx.lineTo(dian2.x, dian2.y); // 终点
    ctx.strokeStyle = 'red'; // 线条颜色
    ctx.lineWidth = 3; // 线条宽度
    ctx.stroke(); // 描边
  });
  ctx.restore(); // 恢复状态


};

// 游戏主类的响应式状态
const gameState = reactive({
  balls: [],
  hoops: [],
  texts: [],
  res: {},
  score: 0,
  started: false,
  gameOver: false,
  ballX: (640 - 93) / 2, // 篮球初始X坐标（居中）
  ballY: 680, // 篮球初始Y坐标（底部）
  ballVel: 300,
  ballAngleVel: 100,
  ballAngle: 0,
  ballsShot: 1,
  ballCharge: 0,
  time: 60,
  toNextSecond: 1,
  sound: false,
  state: 'menu',
  click: false,
  canvas: null,
  ctx: null,
  animationFrameId: null,
  then: 0,
  // 新增：键盘控制相关状态
  keyLeft: false,
  keyRight: false,
  spaceShoot: false,    // 空格键投篮状态
  exitTimer: null, // 用于存储退出定时器ID
  bounceHeight: 20, // 拍球高度
  bounceSpeed: 2,   // 拍球速度
  bouncePhase: 0,   // 拍球相位（0-2π）
});

// 篮筐类
class Hoop {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.points = [
      { x: x + 7, y: y + 18 },
      { x: x + 141, y: y + 18 }
    ];
  }

  drawBack(ctx, game) {
    drawImage(
      ctx,
      game.res['/static/images/basketball/hoop.png'],
      this.x,
      this.y,
      0, 0, 148, 22, 0, 0, 0
    );
  }

  drawFront(ctx, game) {
    drawImage(
      ctx,
      game.res['/static/images/basketball/hoop.png'],
      this.x,
      this.y + 22,
      0, 22, 148, 178 - 22, 0, 0, 0
    );
  }
}

// 篮球类
class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.speed = 100;
    this.canBounce = true;
    this.angle = 270;
    this.gravity = 0;
    this.falling = false;
    this.bounces = 0;
    this.scored = false;
    this.drawAngle = 0;
    this.angleVel = 100;
    this.solid = false;
    this.z = 1;
  }

  setAngle(angle) {
    this.angle = angle;
    this.vx = this.speed * Math.cos(this.angle * Math.PI / 180);
    this.vy = this.speed * Math.sin(this.angle * Math.PI / 180);
    this.gravity = 0;
  }

  shoot(power) {
    this.speed = power + Math.floor(Math.random() * 40) * 1;
    this.setAngle(270);
  }

  update(delta) {
    this.y += this.gravity * delta;
    this.gravity += 1500 * delta;
    this.x += this.vx * delta;
    this.y += this.vy * delta;

    if (this.vx > 500) this.vx = 500;
    if (this.vy > 500) this.vy = 500;

    if (this.y < 300) {
      this.solid = true;
    }

    if (this.gravity > this.speed) {
      this.falling = true;
    }

    if (this.x + 47 > clientObj.value.width) {
      this.vx = this.vx * -1;
      this.x = clientObj.value.width - 47;
    }

    if (this.x - 47 < 0) {
      this.vx = this.vx * -1;
      this.x = 47;
    }

    this.drawAngle += this.angleVel * delta;
  }

  draw(ctx, game) {
    drawImage(
      ctx,
      game.res['/static/images/basketball/ball.png'],
      Math.floor(this.x - (93 / 2)),
      Math.floor(this.y - (93 / 2)),
      0, 0, 93, 93, 93 / 2, 93 / 2,
      this.drawAngle
    );
  }
}

// 弹出文字类
class PopText {
  constructor(string, x, y) {
    this.string = string;
    this.x = x;
    this.y = y;
    this.vy = -500;
    this.opacity = 1;
  }

  update(delta) {
    this.y += this.vy * delta;
    this.vy += 1000 * delta;

    if (this.vy > 0 && this.opacity > 0) {
      this.opacity -= 2 * delta;
    }

    if (this.opacity <= 0) {
      this.opacity = 0;
    }
  }

  draw(ctx, game) {
    ctx.globalAlpha = this.opacity;
    game.drawText(ctx, this.string, this.x + 15, this.y);
    ctx.globalAlpha = 1;
  }

}

// 工具函数：绘制旋转图像
function drawImage(ctx, image, x, y, sx, sy, w, h, rx, ry, a) {
  ctx.save();
  ctx.translate(x + rx, y + ry);
  ctx.rotate(a * Math.PI / 180);
  ctx.drawImage(image, sx, sy, w, h, -rx, -ry, w, h);
  ctx.restore();
}

// 事件处理函数
const handleMouseDown = () => {
  gameState.click = true;
};

const handleMouseUp = () => {
  gameState.click = false;
};

const handleTouchStart = () => {
  gameState.click = true;
};

const handleTouchEnd = () => {
  gameState.click = false;
};

// 键盘事件处理函数
const handleKeyDown = (event: any) => {
  if (gameState.state !== 'play') return;

  if (event.key === 'ArrowLeft') {
    gameState.keyLeft = true;
  } else if (event.key === 'ArrowRight') {
    gameState.keyRight = true;
  } else if (event.key === ' ') { // 空格键触发投篮
    event.preventDefault(); // 防止页面滚动
    gameState.spaceShoot = true;
  }
};

const handleKeyUp = (event: any) => {
  if (event.key === 'ArrowLeft') {
    gameState.keyLeft = false;
  } else if (event.key === 'ArrowRight') {
    gameState.keyRight = false;
  } else if (event.key === ' ') { // 空格键释放
    gameState.spaceShoot = false;
  }
};

// 游戏方法
const setupCanvas = () => {
  gameState.canvas = document.getElementById('canvas');
  gameState.canvas.width = clientObj.value.width;
  gameState.canvas.height = clientObj.value.height;
  // gameState.canvas.width = document.documentElement.clientWidth / 2;
  // gameState.canvas.height = document.documentElement.clientHeight;
  gameState.ctx = gameState.canvas.getContext('2d');
};

const resizeToWindow = () => {
  // const w = gameState.canvas.width / gameState.canvas.height;
  // const h = window.innerHeight;
  // const ratio = h * w;
  // gameState.canvas.style.width = Math.floor(ratio) + 'px';
  // gameState.canvas.style.height = Math.floor(h) + 'px';
};

const drawLoadingScreen = () => {
  const ctx = gameState.ctx;
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 700, clientObj.value.width);
  ctx.textAlign = 'center';
  drawText(ctx, 'Loading...', clientObj.value.width / 2, 700 / 2, 40);
  ctx.textAlign = 'left';
};

const getResources = () => {
  const images = [
    '/static/images/basketball/background.png',
    '/static/images/basketball/title.png',
    '/static/images/basketball/ball.png',
    '/static/images/basketball/hoop.png'
  ];

  const sounds = [
    '/static/images/basketball/bounce_1.wav'
  ];

  return gameState.sound ? images.concat(sounds) : images;
};

const drawText = (ctx, string, x, y, size = 30) => {
  ctx.font = size + 'px Contrail One';
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'white';
  ctx.strokeText(string, x, y);
  ctx.fillStyle = '#0098BF';
  ctx.fillText(string, x, y);
};

const playSound = (name) => {
  if (gameState.sound && gameState.res[name]) {
    gameState.res[name].currentTime = 0;
    gameState.res[name].play().catch(e => console.log('Sound play error:', e));
  }
};

const loadResources = () => {
  drawLoadingScreen();
  const resources = getResources();
  let loaded = 0;

  return new Promise((resolve) => {
    resources.forEach(resource => {
      const type = resource.split('.').pop();

      if (type === 'png') {
        const image = new Image();
        image.src = resource;
        image.addEventListener('load', () => {
          loaded++;
          gameState.res[resource] = image;
          if (loaded === resources.length) resolve();
        });
      } else if (['wav', 'mp3'].includes(type)) {
        const sound = new Audio();
        sound.src = resource;
        sound.addEventListener('canplaythrough', () => {
          loaded++;
          gameState.res[resource] = sound;
          if (loaded === resources.length) resolve();
        });
      }
    });
  });
};

const gameLoop = (timestamp) => {
  if (!gameState.then) gameState.then = timestamp;
  const delta = (timestamp - gameState.then) / 1000;

  // 更新游戏状态
  update(delta);
  // 绘制游戏
  draw();

  gameState.then = timestamp;
  gameState.animationFrameId = requestAnimationFrame(gameLoop);
};

const update = (delta) => {
  if (gameState.state === 'menu') {
    if (gameState.click) {
      gameState.state = 'play';
      gameState.click = false;
    }
    return;
  }

  if (gameState.state === 'play') {
    // // 更新篮球横向移动
    // gameState.ballX += gameState.ballVel * delta;
    // if (gameState.ballX > clientObj.value.width - 93) {
    //   gameState.ballVel = -gameState.ballVel;
    //   gameState.ballX = clientObj.value.width - 93;
    // }
    // if (gameState.ballX < 0) {
    //   gameState.ballVel = -gameState.ballVel;
    //   gameState.ballX = 0;
    // }

    // 键盘控制篮球移动
    if (gameState.keyLeft) {
      //gameState.ballX -= gameState.ballVel * delta;
      gameState.ballX = direction.value;
    }
    if (gameState.keyRight) {
      //gameState.ballX += gameState.ballVel * delta;
      gameState.ballX = direction.value;
    }

    // 边界检查
    if (gameState.ballX > clientObj.value.width - 93) {
      gameState.ballX = clientObj.value.width - 93;
    }
    if (gameState.ballX < 0) {
      gameState.ballX = 0;
    }

    // 更新所有篮球
    for (let i = gameState.balls.length - 1; i >= 0; i--) {
      const ball = gameState.balls[i];

      if (ball.falling) {
        // 检测与篮筐的碰撞
        gameState.hoops.forEach(hoop => {
          const cx = hoop.x + (148 / 2);
          const cy = hoop.y + 40;
          const dx = cx - ball.x;
          const dy = cy - ball.y;
          const mag = Math.sqrt(dx * dx + dy * dy);

          if (mag < 47 + 5 && !ball.scored) {
            ball.setAngle(90);
            gameState.score += 100;
            gameState.texts.push(new PopText('+ 100', hoop.x, hoop.y));
            ball.scored = true;
          }

          if (!ball.scored) {
            hoop.points.forEach(point => {
              const dx = point.x - ball.x;
              const dy = point.y - ball.y;
              const mag = Math.sqrt(dx * dx + dy * dy);
              const angle = Math.atan2(point.y - ball.y, point.x - ball.x);

              if (mag > 47 + 7 && !ball.canBounce) {
                ball.canBounce = true;
              }

              if (mag < 47 + 5 && ball.canBounce) {
                playSound('/static/images/basketball/bounce_1.wav');
                ball.bounces++;
                ball.setAngle((angle * 180 / Math.PI) + 180 + Math.floor(Math.random() * 5) - Math.floor(Math.random() * 5));
                ball.bounces = Math.min(ball.bounces, 3);

                const deg = angle * 180 / Math.PI;
                if (deg > 0 && deg < 180) {
                  ball.gravity = 750 + (ball.bounces * 50);
                }

                ball.angleVel = -ball.angleVel;
                ball.canBounce = false;
              }
            });
          }
        });
      }

      ball.update(delta);

      // 移除超出屏幕的球
      if (ball.y > 700) {
        gameState.ballX = ball.x;
        gameState.balls.splice(i, 1);
      }
    }

    // 更新计时器
    if (gameState.time > 0) {
      gameState.toNextSecond -= delta;
      if (gameState.toNextSecond <= 0) {
        gameState.time--;
        gameState.toNextSecond = 1;
      }
    } else {
      gameState.state = 'over';
    }

    // 处理投篮逻辑（修改后）
    const isShooting = gameState.click || gameState.spaceShoot; // 鼠标或键盘触发投篮
    if (isShooting && gameState.ballY <= clientObj.value.height) {
      if (gameState.balls.length < 1) {
        const ball = new Ball(gameState.ballX + (93 / 2), gameState.ballY);
        ball.drawAngle = gameState.ballAngle;
        ball.shoot(1300);
        gameState.balls.push(ball);
        gameState.ballY = clientObj.value.height - 90;
      }
    }

    // 重置篮球位置
    if (gameState.balls.length < 1 && gameState.ballY > 880) {
      gameState.ballY -= 100 * delta;
    }

    if (!gameState.click) {
      gameState.ballsShot = 0;
    }

    // 更新弹出文字
    gameState.texts.forEach((text, i) => {
      text.update(delta);
      if (text.opacity <= 0) {
        gameState.texts.splice(i, 1);
      }
    });

    // 更新篮球角度
    gameState.ballAngle += 100 * delta;

  }

  // 游戏结束状态处理
  if (gameState.state === 'over' && gameState.click) {
    gameState.gameOver = false;
    gameState.started = false;
    gameState.score = 0;
    gameState.time = 60;
    gameState.balls = [];
    gameState.state = 'menu';
    gameState.click = false;
  }
};

const draw = () => {
  const ctx = gameState.ctx;
  if (!ctx) return;

  // 绘制背景
  if (gameState.res['/static/images/basketball/background.png']) {
    const img = gameState.res['/static/images/basketball/background.png'];
    const canvasWidth = gameState.canvas.width;
    const canvasHeight = gameState.canvas.height;

    // 计算图片与画布的比例
    const imgRatio = img.width / img.height;
    const canvasRatio = canvasWidth / canvasHeight;

    let drawWidth, drawHeight, drawX = 0, drawY = 0;

    // 根据比例计算绘制尺寸
    if (canvasRatio > imgRatio) {
      // 画布更宽，按宽度缩放，高度可能超出
      drawWidth = canvasWidth;
      drawHeight = canvasWidth / imgRatio;
      drawY = (canvasHeight - drawHeight) / 2; // 垂直居中
    } else {
      // 画布更高，按高度缩放，宽度可能超出
      drawHeight = canvasHeight;
      drawWidth = canvasHeight * imgRatio;
      drawX = (canvasWidth - drawWidth) / 2; // 水平居中
    }

    // 绘制图片（可能裁剪边缘）
    ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
  }
  // 绘制菜单状态
  if (gameState.state === 'menu') {
    if (gameState.res['/static/images/basketball/title.png']) {
      ctx.drawImage(
        gameState.res['/static/images/basketball/title.png'],
        clientObj.value.width / 2 - (492 / 2),
        100
      );
    }
    ctx.textAlign = 'center';
    drawText(ctx, '请做投篮动作开始游戏', clientObj.value.width / 2, 520, 40);
  }

  // 绘制游戏状态
  if (gameState.state === 'play') {
    // 绘制篮筐背景
    gameState.hoops.forEach(hoop => hoop.drawBack(ctx, gameState));

    // 绘制正在下落的球
    gameState.balls.forEach(ball => {
      if (ball.falling) ball.draw(ctx, gameState);
    });

    // 绘制篮筐前景
    gameState.hoops.forEach(hoop => hoop.drawFront(ctx, gameState));

    // 绘制未下落的球
    gameState.balls.forEach(ball => {
      if (!ball.falling) ball.draw(ctx, gameState);
    });

    // 绘制当前可投掷的球
    if (gameState.balls.length < 1 && gameState.res['/static/images/basketball/ball.png']) {
      drawImage(
        ctx,
        gameState.res['/static/images/basketball/ball.png'],
        gameState.ballX,
        gameState.ballY,
        0, 0, 93, 93,
        45, 45,
        gameState.ballAngle
      );
    }

    // 绘制分数和时间
    // 更靠左的得分
    drawText(ctx, '得分: ' + gameState.score, 150, 70, 50);
    // 更靠右的时间
    drawText(ctx, '时间: ' + gameState.time, clientObj.value.width - 115, 70, 50);

    // 绘制弹出文字
    gameState.texts.forEach(text => text.draw(ctx, { drawText }));
  }

  // 绘制游戏结束界面
  if (gameState.state === 'over') {
    ctx.textAlign = 'center';
    drawText(ctx, 'Game Over', clientObj.value.width / 2, 200, 80);
    drawText(ctx, '成绩：' + gameState.score, clientObj.value.width / 2, 400, 50);
    ctx.textAlign = 'center';

    // 游戏结束后2秒自动退出
    if (!gameState.exitTimer) {
      gameState.exitTimer = setTimeout(() => {
        // 退出游戏，这里可以根据实际需求调整，比如返回主菜单或跳转到其他页面
        gameState.gameOver = false;
        gameState.started = false;
        gameState.score = 0;
        gameState.time = 60;
        gameState.balls = [];
        gameState.state = 'menu';
        gameState.click = false;
        gameState.exitTimer = null;

        // 如果需要跳转到其他页面，可以使用路由
        // router.push('/');
      }, 2000);
    }

    // 保留点击退出的功能
    if (gameState.click) {
      clearTimeout(gameState.exitTimer);
      gameState.gameOver = false;
      gameState.started = false;
      gameState.score = 0;
      gameState.time = 60;
      gameState.balls = [];
      gameState.state = 'menu';
      gameState.click = false;
      gameState.exitTimer = null;
    }
  }
};

// 初始化游戏
const initGame = async () => {
  setupCanvas();
  resizeToWindow();
  window.addEventListener('resize', resizeToWindow);

  // 添加键盘事件监听
  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('keyup', handleKeyUp);

  await loadResources();

  // 添加篮筐
  gameState.hoops = [
    new Hoop(110, 300),
    new Hoop(clientObj.value.width / 2 - (148 / 2), 120),
    new Hoop(clientObj.value.width - 148 - 110, 300),
  ];

  // 开始游戏循环
  gameState.animationFrameId = requestAnimationFrame(gameLoop);
  gameState.ballY = clientObj.value.height - 90;
};



// 生命周期钩子
onMounted(() => {
  initGame();
});

onBeforeMount(() => {
  clientObj.value = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  }
  getInit();
});

onBeforeUnmount(() => {
  closeWS();
  if (gameState.animationFrameId) {
    cancelAnimationFrame(gameState.animationFrameId);
  }
  // 清除退出定时器
  if (gameState.exitTimer) {
    clearTimeout(gameState.exitTimer);
  }
  window.removeEventListener('resize', resizeToWindow);
  window.removeEventListener('keydown', handleKeyDown);
  window.removeEventListener('keyup', handleKeyUp);
});
</script>

<style scoped>
.game-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  overflow: hidden;
}

#canvas {
  display: block;
  touch-action: none;
  user-select: none;
}
</style>