如何在Javascript画布中使对象以三角形运动

Question

我已经创建了一个圆，我想用if语句制作它的动画，使它以三角形运动，并更改y/x坐标，但我所能做的就是来回移动，所以我想知道是否有人能帮忙？

我改变x/y参数的函数被称为"x"；三角形"；。

完整的js代码：

var canvas;
var ctx;
var w = 1000;
var h = 600;
var allCircles = [];

setUpCanvas();
createData(1);

animationLoop();


function animationLoop(){
clear();
circlesDrawUpdate(allCircles);
requestAnimationFrame(animationLoop);
}

function circlesDrawUpdate(a){
for(var i=0; i<a.length; i++){
circle(a[i]);
triangle(a[i]);
}
}
function createData(num){
for (var i=0; i<num; i++){
allCircles.push({
"x": w/2,
"y": h/2,
"dx": randn(100),
"dy": 3,
"r": 50,
"c":200+rand(180),
"a": 0.5,
})
}
}


function triangle(o){
var i;
o.x += o.dx;
o.y += o.dy;
if(o.y = h){
o.dy *= +1;
}
if(o.x> w || o.x < 0){
o.dx *=-1;

}
}

function clear(){
ctx.clearRect(0,0,w,h);
}

function circle(o){
ctx.beginPath();
ctx.arc(o.x,o.y,o.r,0,2*Math.PI);
ctx.fillStyle = "hsla("+o.c+", 100%, 50%, "+o.a+")";
ctx.fill();
}
function randn(r){
var result = Math.random()*r - r/2;
return result;
}
function randi(r){
var result = Math.floor(Math.random()*r);
return result;
}
function rand(r){
var result = Math.random()*r;
return result;
}
function setUpCanvas(){
canvas = document.querySelector("#myCanvas");
ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
canvas.style.border ="5px dashed purple";
}


console.log("Module 7 Exercise");

Answer 1

这就是你所说的"三角形运动"；？

function triangle(o) {
o.x += o.dx;
o.y += o.dy;
if(o.y == h || o.y == 0){
o.dy *= -1;
}
if(o.x >= w || o.x <= 0){
o.dx *=-1;
}
}

你的圆圈只来回移动的原因是因为三角形函数中的第一个条件，你指定了值('='(而不是比较('=='(。在每次函数调用中，o.dy变量都被更改为h，所以圆的y值总是等于画布高度。

另一个问题是，您应该将o.dy乘以-1来改变方向(与在o.dx中所做的相同(

最后一件事是检查画布的两侧(0和h(，而不仅仅是底部(h((同样，与o.dx中所做的相同(