Javascript 模拟球在画布边界中反弹 var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var h=画布高度； var w=画布宽度； var sAngle=0； var-numB=10； 无功转速=50； var dt=0.01； 常数PI=Math.PI； 函数resetCanvas（）{ canvas.width=canvas.width； }; 函数createBalls（）{ for（var i=1；i

不确定这是否是您唯一的问题，但您的if语句没有达到您预期的效果。例如：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var h = canvas.height;
var w = canvas.width;
var sAngle = 0;
var numB = 10; 
var speed = 50;
var dt = 0.01;
const PI = Math.PI;
function resetCanvas () {
  canvas.width = canvas.width;
};
function createBalls (){
for(var i = 1; i <= numB; i++){ 
if (i % 2 == 0) {
  window['ball' + i] = 
  {r:10, color:"white", x:w*Math.random(), y:h*Math.random(), v:speed}} else {
   window['ball' + i] = 
  {r:10, color:"white", x:w*Math.random(), y:h*Math.random(), v:-1 *speed}};
      }
    }
  createBalls();
function drawBalls () {
for (var i = 1; i <= numB; i++) {
ctx.beginPath();
ctx.arc(window['ball' + i].x, window['ball' + i].y, window['ball' + i].r, sAngle, 2*PI);
ctx.fillStyle = window['ball' + i].color;
ctx.fill();
ctx.strokeStyle = window['ball' + i].color;
ctx.stroke();
    }
}
drawBalls();
function moveBalls () {
for (var i = 1; i <= numB; i++) {
if (0 < window['ball' + i].x < w && 0 < window['ball' + i].y < h) 
{window['ball' + i].x = window['ball' + i].x + window['ball' + i].v * dt; 
window['ball' + i].y = window['ball' + i].y + window['ball' + i].v * dt}
if (window['ball' + i].x < 0 || window['ball' + i].x > w) 
{window['ball' + i].x = window['ball' + i].x + ((-1) * window['ball' + i].v * dt); 
window['ball' + i].y = window['ball' + i].y + window['ball' + i].v * dt}
if (window['ball' + i].y < 0 || window['ball' + i].y > h) 
{window['ball' + i].y = window['ball' + i].y + ((-1) * window['ball' + i].v * dt);
window['ball' + i].x = window['ball' + i].x + window['ball' + i].v * dt}
    }
}
function animate () {
resetCanvas();
drawBalls();
moveBalls();
};
setInterval(animate, 100 * dt);

原因是表达式

0

像

（0

一样执行，第一部分

（0

返回true（1）或false（0），这两个值都可能小于

w

，因此表达式总是

true

例如，请尝试以下代码段：

设x=7；
log（“Nope:，x，”是介于0和6之间的：，0

此外，边缘处理不正确。我猜您希望它们反弹吗

让我们看看代码：

if (0 < window["ball" + i].x && window["ball" + i].x < w && 
    0 < window["ball" + i].y && window["ball" + i].y < h)

这将导致球向相反方向反弹

尽管如此，这个代码仍然不是很完美，因为在现实中速度有维度分量，即x速度和y速度

使用局部变量，尤其是使用球的数组，代码的可读性要高得多。我可能稍后会回来对速度进行量纲化，但代码现在是这样的：

if (x < 0 || x > w || y < 0 || y > h) {
  v *= -1
}

const canvas=document.getElementById（“canvas”）；
常数高度=canvas.clientHeight；
const width=canvas.clientWidth；
canvas.height=高度；
画布宽度=宽度；
const ctx=canvas.getContext（“2d”）；
常数h=画布高度；
const w=画布宽度；
const-sAngle=0；
常数numB=10；
恒速=50；
常数dt=0.01；
常数PI=Math.PI；
const balls=createBalls（）；
函数resetCanvas（）{
canvas.width=canvas.width；
}
函数createBalls（）{
常数球=[]；
for（设i=1；i{
ctx.beginPath（）；
ctx.arc（ball.x，ball.y，ball.r，sAngle，2*PI）；
ctx.fillStyle=ball.color；
ctx.fill（）；
ctx.strokeStyle=ball.color；
ctx.stroke（）；
});
}
函数moveBalls（）{
balls.forEach（ball=>{
常数{x，y}=球；
if（x<0 | | x>w | | y<0 | | y>h）{
ball.v*=-1
}
ball.x=x+ball.v*dt；
ball.y=y+ball.v*dt
});
}
函数animate（）{
重置画布（）；
牵引杆（）；
移动球（）；
};
设置间隔（动画，100*dt）；

尽可能使用标准代码格式进行缩进应该会对您的长远发展有所帮助谢谢。我试着这样写，但球仍然会浮到角落。也许是计算新速度的问题？

if (window['ball' + i].x < 0 || window['ball' + i].x > w) {
  window['ball' + i].x = window['ball' + i].x + ((-1) * window['ball' + i].v * dt);
  window['ball' + i].y = window['ball' + i].y + window['ball' + i].v * dt
}

if (x < 0 || x > w) {
  x = x + ((-1) * v * dt);
  y = y + v * dt
}

if (x < 0 || x > w || y < 0 || y > h) {
  v *= -1
}

const canvas = document.getElementById("canvas");
const height = canvas.clientHeight;
const width = canvas.clientWidth;
canvas.height = height;
canvas.width = width;
const ctx = canvas.getContext("2d");
const h = canvas.height;
const w = canvas.width;
const sAngle = 0;
const numB = 10;
const speed = 50;
const dt = 0.01;
const PI = Math.PI;
const balls = createBalls();

function resetCanvas() {
  canvas.width = canvas.width;
}

function createBalls() {
  const balls = [];
  for (let i = 1; i <= numB; i++) {
    const ball = createBall();
    if (i % 2 == 0) {
      ball.v *= -1;
    }
    balls.push(ball);
  }
  return balls;
}

function createBall() {
  return { r: 10, color: "white", x: w * Math.random(), y: h * Math.random(), v: speed };
}

function drawBalls() {
  balls.forEach(ball => {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, sAngle, 2 * PI);
    ctx.fillStyle = ball.color;
    ctx.fill();
    ctx.strokeStyle = ball.color;
    ctx.stroke();
  });
}

function moveBalls() {
  balls.forEach(ball => {
    const { x, y } = ball;

    if (x < 0 || x > w || y < 0 || y > h) {
      ball.v *= -1
    }
    ball.x = x + ball.v * dt;
    ball.y = y + ball.v * dt
  });
}
function animate() {
  resetCanvas();
  drawBalls();
  moveBalls();
};
setInterval(animate, 100 * dt);