日常开发

src/views/game/basketball.vue

@@ -2,8 +2,8 @@
   <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>
+    <!-- <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"
+      style="position:fixed;left: 0; top: 0;"></canvas> -->
   </div>
 </template>
 
@@ -365,7 +365,7 @@ class Hoop {
   update(delta) {
     // 计算新位置
     this.x += this.speed * this.direction * delta;
-    
+
     // 检测边界，反转方向
     if (this.x > this.originalX + this.range) {
       this.x = this.originalX + this.range;
@@ -374,7 +374,7 @@ class Hoop {
       this.x = this.originalX - this.range;
       this.direction = 1;
     }
-    
+
     // 更新碰撞检测点
     this.points = [
       { x: this.x + 7, y: this.y + 18 },
@@ -431,7 +431,7 @@ class Ball {
   }
 
   shoot(power) {
-    this.speed = power + Math.floor(Math.random() * 40) * 1;
+    this.speed = power;
     this.setAngle(270);
   }
 
@@ -742,7 +742,7 @@ const update = (delta) => {
 
                 const deg = angle * 180 / Math.PI;
                 if (deg > 0 && deg < 180) {
-                  ball.gravity = 750 + (ball.bounces * 50);
+                  ball.gravity = clientObj.value.height + (ball.bounces * 50);
                 }
 
                 ball.angleVel = -ball.angleVel;
@@ -756,7 +756,7 @@ const update = (delta) => {
       ball.update(delta);
 
       // 移除超出屏幕的球
-      if (ball.y > 700) {
+      if (ball.y > clientObj.value.height) {
         gameState.ballX = ball.x;
         gameState.balls.splice(i, 1);
       }
@@ -779,14 +779,18 @@ const update = (delta) => {
       if (gameState.balls.length < 1) {
         const ball = new Ball(gameState.ballX + (93 / 2), gameState.ballY);
         ball.drawAngle = gameState.ballAngle;
-        ball.shoot(1300);
+
+    // 使用计算好的力度投篮
+    const shootPower = calculateShootPower();
+    ball.shoot(shootPower);
+
         gameState.balls.push(ball);
         gameState.ballY = clientObj.value.height - 90;
       }
     }
 
     // 重置篮球位置
-    if (gameState.balls.length < 1 && gameState.ballY > 880) {
+    if (gameState.balls.length < 1 && gameState.ballY > clientObj.value.height) {
       gameState.ballY -= 100 * delta;
     }
 
@@ -819,6 +823,33 @@ const update = (delta) => {
   }
 };
 
+/**
+ * 计算确保超过篮筐的投篮力度
+ * @returns 计算后的投篮力度
+ */
+const calculateShootPower = () => {
+  // 获取篮筐最高位置（取所有篮筐中最高的y坐标）
+  const highestHoopY = Math.min(...gameState.hoops.map(hoop => hoop.y));
+  
+  // 计算需要超过篮筐的高度（额外增加200px安全距离）
+  const requiredHeightAboveHoop = 200;
+  
+  // 计算从当前位置到目标高度的距离
+  const distanceToTarget = gameState.ballY - (highestHoopY - requiredHeightAboveHoop);
+  
+  // 基础力度系数（可根据实际效果调整）
+  const powerCoefficient = 1.7;
+  
+  // 最小力度保障（防止过小的屏幕尺寸导致力度不足）
+  const minPower = clientObj.value.height;
+  
+  // 计算最终力度
+  const calculatedPower = distanceToTarget * powerCoefficient;
+  
+  // 返回确保超过篮筐的力度（取计算值和最小值中的较大者）
+  return Math.max(calculatedPower, minPower);
+};
+
 const draw = () => {
   const ctx = gameState.ctx;
   if (!ctx) return;
@@ -960,7 +991,7 @@ const initGame = async () => {
   // 添加篮筐
   gameState.hoops = [
     //new Hoop(110, 300),
-    new Hoop(clientObj.value.width / 2 - (148 / 2), 150),
+    new Hoop((clientObj.value.width - 148) / 2, 150),
     //new Hoop(clientObj.value.width - 148 - 110, 300),
   ];