javascript - 使球弹跳

//初始化常规设置变量

'''var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var h = canvas.height;
var w = canvas.width;
var sAngle = 0;
const PI = Math.PI;
var r = 10;
totalNum = 5;'''

//总num是所需的球数

//创建所有球的初始位置的函数

'''var initialPos = [];
function makePositions(){
for (var i = 1; i <= totalNum; i++)
{initialPos.push([i*100*Math.random(),i*100*Math.random()])}
console.log(initialPos);
}
makePositions();'''

//函数在数组makePositions的初始位置绘制球

function drawBalls (){
for (i = 0; i <= totalNum - 1; i++) {
ctx.beginPath();
ctx.arc(initialPos[i][0], initialPos[i][1], r, sAngle, 2*PI);
ctx.stroke();
ctx.fill();
}
}
  drawBalls();

//初始化变量以移动球

var dt = 0.01;
var vx = 50;
var vy = 50;

//用速度创造新的位置

function changePos (num){return num + vx*dt} //Chenges position based on velocity
and time
function changePos2 (num){return num - vx*dt} //Chenges position based on velocity
and time

var allPos = [];
function move () {
allPos = [];
var newPos;
for (j = 0; j <= totalNum - 1; j++){
if (0 < initialPos[j][0]< 500 && 0 < initialPos[j][1]< 500)
{newPos = initialPos[j].map(changePos)}
if (initialPos[j][0] < 0 || initialPos[j][0] > w)
{var newPos = [changePos2(initialPos[j][0]),changePos(initialPos[j][1])]}
if (initialPos[j][1] < 0 || initialPos[j][1] > h) {var newPos =
[changePos(initialPos[j][0]),changePos2(initialPos[j][1])]}
allPos.push(newPos);
}
initialPos = allPos;
console.log(allPos)
}

/ *将新位置推入数组allPos
map遍历数组intiialPos并在数组中的每个元素上执行changePos函数* /

//清除画布

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

//在新位置绘制球

function drawBalls2 (){
for (var i = 0; i <= totalNum - 1; i++) {
ctx.beginPath();
ctx.arc(allPos[i][0], allPos[i][1], r, sAngle, 2*PI);
ctx.stroke();
ctx.fill();
}
    }

//绘图球->移动球->重置画布->绘制

function ball (){
resetCanvas();
move();
drawBalls2();
}



setInterval(ball, 100 * dt);

我正在尝试使它在我的移动功能中，当球碰到画布边框时，它们朝相反的方向反弹，但是在我的移动功能中使用我当前的参数时，它不起作用。球聚集在一个角落，然后结冰。有想法该怎么解决这个吗？

最佳答案

通常，移动功能中存在多个缺陷。

1）0 < initialPos[j][0] < 500
在JavaScript中检查范围不能像这样工作。
这将归结为(0 < initialPos[j][0]) < 500。这被评估为0 or 1 < 500，在所有情况下都是如此。

2）initialPos[j].map(changePos)
当我正确理解initialPos是一个二维数组时，
包含一个数组，其中包含所有球的位置。
但是，使用map(changePos)会将X向量应用于球的X和Y坐标。

3）您不是永久更改给定球的矢量（球卡住的原因）
在您的极端情况下，您无法正确应用changePos2转换。
但是由于新位置将重新回到边界内，因此您将退回到正常的newPos = initialPos[j].map(changePos)过渡而无需更改移动方向。

为了解决这个问题，您需要一个包含每个球的向量的数组。
然后在移动循环内将此向量应用于球的位置。如果新位置不在比赛范围内，则将向量分量（x或y）反转，球将再次弹回墙壁。

关于javascript - 使球弹跳，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61206913/