日常开发

src/views/game/basketball.vue

@@ -311,7 +311,11 @@ const gameState = reactive({
   canvas: null,
   ctx: null,
   animationFrameId: null,
-  then: 0
+  then: 0,
+  // 新增：键盘控制相关状态
+  keyLeft: false,
+  keyRight: false,
+  spaceShoot: false,    // 空格键投篮状态
 });
 
 // 篮筐类
@@ -476,6 +480,30 @@ const handleTouchEnd = () => {
   gameState.click = false;
 };
 
+// 键盘事件处理函数
+const handleKeyDown = (event: KeyboardEvent) => {
+  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: KeyboardEvent) => {
+  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');
@@ -587,14 +615,30 @@ const update = (delta) => {
   }
 
   if (gameState.state === 'play') {
-    // 更新篮球横向移动
-    gameState.ballX += gameState.ballVel * delta;
+    // // 更新篮球横向移动
+    // gameState.ballX += gameState.ballVel * delta;
+    // if (gameState.ballX > 640 - 93) {
+    //   gameState.ballVel = -gameState.ballVel;
+    //   gameState.ballX = 640 - 93;
+    // }
+    // if (gameState.ballX < 0) {
+    //   gameState.ballVel = -gameState.ballVel;
+    //   gameState.ballX = 0;
+    // }
+
+    // 键盘控制篮球移动
+    if (gameState.keyLeft) {
+      gameState.ballX -= gameState.ballVel * delta;
+    }
+    if (gameState.keyRight) {
+      gameState.ballX += gameState.ballVel * delta;
+    }
+    
+    // 边界检查
     if (gameState.ballX > 640 - 93) {
-      gameState.ballVel = -gameState.ballVel;
       gameState.ballX = 640 - 93;
     }
     if (gameState.ballX < 0) {
-      gameState.ballVel = -gameState.ballVel;
       gameState.ballX = 0;
     }
 
@@ -668,8 +712,9 @@ const update = (delta) => {
       gameState.state = 'over';
     }
 
-    // 处理投篮逻辑
-    if (gameState.click && gameState.ballY <= 950) {
+    // 处理投篮逻辑（修改后）
+    const isShooting = gameState.click || gameState.spaceShoot; // 鼠标或键盘触发投篮
+    if (isShooting && gameState.ballY <= 950) {
       if (gameState.balls.length < 1) {
         const ball = new Ball(gameState.ballX + (93 / 2), gameState.ballY);
         ball.drawAngle = gameState.ballAngle;
@@ -789,6 +834,10 @@ const initGame = async () => {
   resizeToWindow();
   window.addEventListener('resize', resizeToWindow);
 
+  // 添加键盘事件监听
+  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keyup', handleKeyUp);
+
   await loadResources();
 
   // 添加篮筐