如何将变量与多个值区间比较？附接球游戏代码修改需求

嘿，我帮你梳理并完善了这段代码，不仅解决了原代码里的一些逻辑问题，还实现了你要求的bx（球的X坐标）与指定区间的比较功能，让游戏的碰撞检测更合理有趣！

先说说核心调整方向 #

你提到要让bx和(mouseX, mouseX+10)、(mouseX-10, mouseX)这两个区间比较，不过结合你的paddle宽度（60像素），我把区间调整成了paddle自身的左侧10像素范围和右侧10像素范围（也就是(paddleX, paddleX+10)和(paddleX+50, paddleX+60)），这样更符合游戏逻辑——毕竟mouseX-10会超出paddle的左边界，没有实际意义。当然你可以根据需求随时修改区间数值。

完善后的完整代码 #

var h = 350; 
var w = 350; 
var paddleX = 0; // 重命名变量，让代码更易读
var ballX = 0; 
var ballY = 0; 
var ballYSpeed = 5; 
var ballXSpeed = 3; // 新增X方向速度，让游戏更有挑战性
var score = 0; 
var isHit = false; 

function setup(){ 
  createCanvas(w, h); 
  ballX = random(10, 340); 
  ballY = random(-100, -50); // 初始球位置更随机，避免重复轨迹
}

function draw(){ 
  background(50); 
  drawPaddle(); 
  drawBall(); 
  drawScore(); 
  
  if(isHit){ 
    // 球掉落出屏幕后重置位置和速度
    ballX = random(10, 340); 
    ballY = random(-100, -50);
    ballXSpeed = random(-4, 4); // 随机X方向速度，增加游戏变数
    isHit = false; 
  }
}

function drawPaddle(){ 
  fill(255); 
  noStroke(); 
  // 用constrain函数简化边界判断，避免重复绘制rect
  paddleX = constrain(mouseX, 0, w - 60); 
  rect(paddleX, 320, 60, 20); 
}

function drawBall(){ 
  fill(255, 20, 75); 
  ellipse(ballX, ballY, 10, 10); 
  
  // 球的移动逻辑
  ballY += ballYSpeed;
  ballX += ballXSpeed;
  
  // 碰到左右屏幕边界反弹
  if(ballX < 5 || ballX > w - 5){
    ballXSpeed *= -1;
  }
  
  // 检测球是否击中paddle
  if(ballY + 5 >= 320 && ballY + 5 <= 340){ // 球的底部进入paddle的Y范围
    if(ballX >= paddleX && ballX <= paddleX + 60){ // 球的X在paddle范围内
      // 球反弹，修正位置避免重复触发碰撞
      ballYSpeed *= -1;
      ballY = 315; 
      
      // 核心：判断球是否击中指定区间
      if(ballX > paddleX && ballX < paddleX + 10){
        // 击中左侧10像素：额外加分+2，加快X速度提升难度
        score += 2;
        ballXSpeed *= 1.2;
      } else if(ballX > paddleX + 50 && ballX < paddleX + 60){
        // 击中右侧10像素：同样额外加分+2，加快X速度
        score += 2;
        ballXSpeed *= 1.2;
      } else {
        // 击中中间区域：正常加分+1
        score += 1;
      }
    }
  }
  
  // 球掉落出屏幕，标记需要重置
  if(ballY > h + 5){
    isHit = true;
    // 这里可以加扣分逻辑，比如score -= 1;
  }
}

function drawScore(){ 
  fill(255); // 添加文字颜色，避免和深色背景融合
  textSize(16);
  text("Score: " + score, 10, 20); 
}

主要修改和优化点 #

1. 变量语义化：把模糊的变量名（比如x、bx）改成了paddleX、ballX，代码可读性大大提升。
2. 简化Paddle控制：用constrain()函数替代原代码里重复的if判断，一行代码就搞定paddle的边界限制。
3. 丰富游戏玩法：新增了球的X方向移动和反弹逻辑，让游戏不再单调。
4. 精准区间碰撞检测：实现了你要的区间比较，击中paddle左右10像素时给予额外奖励，中间区域正常加分，增加了游戏的策略性。
5. 修复原代码bug：原来的代码不管球有没有碰到paddle都会得分，现在只有击中paddle才加分，球掉出屏幕才重置，逻辑更合理。

如果需要调整区间范围或者碰撞后的反馈效果（比如改变球的颜色、音效），直接修改对应的判断条件和代码块就行啦！

内容的提问来源于stack exchange，提问作者SapientiaPT