使多个对象在屏幕上移动

Question

从代码中，我真的不知道如何使对象（树，道路，云）转到x = 400并在屏幕超出x = 0时离开屏幕，以便动画将永远连续。

聚苯乙烯。我为所有希望它们移动的对象使用名为“movex”的变量。

Ps.2我使用Khan学院网站来做这件事。

谢谢!! :)

noStroke();
var x = 200;
var y = 255;
var movex = 200;
var sunsize = 50;

draw = function() {

//sky
background(207, 237, 255);

//sun
fill(255, 64, 0);
ellipse(139, y - 10, sunsize, sunsize);

//mountain
fill(209, 170, 86);
arc(95, y + 80, 331, 174, 180, 360);
fill(138, 91, 40);
arc(414, y + 80, 507, 340, 180, 360);

//cloud
fill(255, 255, 255);
ellipse(movex + 105, 120, 96, 21);
ellipse(movex + 75, 105, 73, 30);
ellipse(movex + 44, 120 , 84, 28);

//cloud2
ellipse(movex + 200, 50, 65, 21);
ellipse(movex + 239, 61, 73, 25);
ellipse(movex + 244, 50, 106, 35);

//cloud3
ellipse(movex - 120, 50, 65, 21);
ellipse(movex - 95, 61, 73, 25);
ellipse(movex - 85, 50, 106, 35);
//tree
fill(158, 105, 6);
rect(movex - 157, y - 40, 35, 150);

fill(20, 158, 15);
ellipse(movex - 165, y - 20, 80, 60);
ellipse(movex - 105, y - 30, 80, 60);

fill(73, 227, 38);
ellipse(movex - 165, y - 50,80,60);
ellipse(movex - 105, y - 400,80,60);

fill(20, 158, 15);
ellipse(movex - 135, y - 90,110,80);

//tree2
fill(158, 105, 6);
rect(movex - 10, y - 40, 35, 150);

fill(20, 158, 15);
ellipse(movex - 10, y - 20, 80, 60);
ellipse(movex + 50, y - 30, 80, 60);

fill(73, 227, 38);
ellipse(movex + 10, y - 70, 100, 80);
ellipse(movex - 105, y - 400, 80, 60);

//tree3
fill(158, 105, 6);
rect(movex + 155, y - 30, 35, 150);

fill(20, 158, 15);
ellipse(movex + 155, y, 60, 50);
ellipse(movex + 175, y - 30, 60, 49);
ellipse(movex + 205, y, 60, 50);

//road
fill(0, 0, 0);
rect(0, y + 80, 1000, 65);
fill(255, 255, 255);
rect(movex - 190, y + 100, 35, 18);
rect(movex - 95, y + 100, 35, 18);
rect(movex - 5, y + 100, 35, 18);
rect(movex + 80, y + 100, 35, 18);
rect(movex + 160, y + 100, 35, 18);


//car
fill(240, 99, 56);
quad(x - 144, y + 30, x - 81, y + 30, x - 50, y + 80, x - 171, y + 80);
rect(x - 185, y + 76, 159, 30);
fill(204, 190, 190);
rect(x -117, y + 44, 32, 25);
fill(87, 87, 87);
ellipse(x - 140, y + 105, 35, 35);
ellipse(x - 65, y + 105, 35, 35);

sunsize ++;

};

这是我工作的形象!!

Answer 1

首先，你的问题和给定的代码令人困惑。在代码中，将 movex 作为形状的x值的位置。相反，您应该使用已定义但未使用的变量 x 。 所以在我的答案而不是 movex 作为形状的x值的位置我将使用 x ，我将假设 movex 是实际上你希望增加x值的数字。

一个简单，简单，单行的方法就是添加：

x += movex;

这将通过movex每个循环连续增加形状的x位置。

另外，既然你正在使用它画画，我建议使用

translate(x, y);

这样，您只需输入数字，而不必每次都输入x和y。