Javascript 需要JS HTMLCanvas帮助

我正在尝试创建一个游戏（在开始阶段）。我正在尝试创建在画布上反弹的球，我创建了球，随机化了它们，并为它们设置了动画。 但是当试图添加边界时，我似乎只能让球作为一个对象，而不是单独的对象。如果NumShapes更改为1，则它可以正常工作

if( shapes[i].x<0 || shapes[i].x>width) dx=-dx; 
if( shapes[i].y<0 || shapes[i].y>height) dy=-dy;

---

见此：

var-ctx；
numShapes变种；
变量形状；
变量dx=5；//X轴上的速度
变量dy=5；//Y轴上的速度
var ctx=canvas.getContext（'2d'）；
var width=canvas.width；
var height=canvas.height；
函数init（）//在HTML的画布上绘制
//在此调用函数不会在setInterval中运行它们
{
numShapes=10；
形状=[]；
纱窗（）；
ctx=canvas.getContext（'2d'）；
setInterval（draw，10）；//使用嵌套函数运行draw函数
制作形状（）；
}
函数绘图（）{
清除（）；
drawShapes（）；
}
函数clear（）{
clearRect（0，0，width，height）；//通过width和height变量清除画布
}
函数makeShapes（）{
var i；
var tempRad；
var-tempR；
var tempG；
var tempB；
var tempX；
var tempY；
颜色；
对于（i=0；i宽度）dx=-dx；
if（shapes[i].y<0 | | shapes[i].y>height）dy=-dy；
}
}
函数drawScreen（）{
//背景
ctx.fillStyle='#EEEEEE'；
ctx.fillRect（0，0，宽度，高度）；
//盒子
ctx.strokeStyle='#000000'；
ctx.strokeRect（1，1，宽度-2，高度-2）；
}

画布{
边框：1px实心#333；
}

这是我的后备内容。

您的

dx

和

dy

是全局的，它们对于您模拟的每个球对象都应该是唯一的。在渲染循环中将它们清除为0（

draw

），或者实际实现一个

ball

object/class来保存该对象特有的变量

当您执行碰撞检测时，您会更改

dx

和

dy

，这两个值将保持在下一个球对象上，因为它们是全局的

您的小提琴，编辑为每个形状添加本地dx和dy：

tempDx=Math.random（）*5；//随机DX值
tempDy=Math.random（）*5；//随机DY值
形状[i].x+=形状[i].dx；//增加形状的X值
形状[i].y+=形状[i].dy；//增加形状的Y值
if（shapes[i].xwidth）shapes[i].dx=-shapes[i].dx；
if（shapes[i].yheight）shapes[i].dy=-shapes[i].dy；

你的移动也应该是每个形状，而不是通用的，所以将它们声明为数组，并在创建形状时加快速度。或者将形状的运动集成到形状对象中，而不是在小提琴外部，以便解决问题：正如建议的那样，为每个形状添加一个局部dx和dy。使用我添加到小提琴中的代码编辑您的答案，现在看起来很可靠。显然，我的知识非常有限，我如何创建一个类/对象，然后将形状推到画布上？我的想法是让形状可以点击，这种方法会更好吗？感谢编辑@AndrueAnderson，通过一个例子更好！Noobcoder从类似的东西开始，然后从那里开始工作。感谢链接和帮助。干杯，伙计们

   shapes[i].x+=dx;
   shapes[i].y+=dy;

tempDx = Math.random()*5; // random DX value 
tempDy = Math.random()*5; // random DY value

shapes[i].x+=shapes[i].dx;// increases the X value of Shape
shapes[i].y+=shapes[i].dy;// increases the Y value of Shape

if( shapes[i].x<0 || shapes[i].x>width) shapes[i].dx= - shapes[i].dx; 
if( shapes[i].y<0 || shapes[i].y>height) shapes[i].dy= -shapes[i].dy;