Question

我想让白色矩形像交通一样在屏幕上移动，并在光线为红色时停止。我已经开始使用移动方法，对于处理js来说是全新的。目前汽车的距离是正确的，但我不确定如何移动thtis循环并在屏幕上移动，直到红色灯为止。

let counter = 0;
let lightorder = 0;

//setup the enviroment i.e. roads, lines on roads and trees
void setup() {

size(1330, 720);
background(96, 153, 25);

//Roads

noStroke();
fill(100);
rect(0, 200 + 10, 1330, 300);
rect(520, 0, 300, 1500);


//Lines on road

fill(255);
rect(0, 340, 90, 30);

rect(200, 340, 90, 30);
rect(400, 340, 90, 30);
rect(860, 340, 90, 30);
rect(1060, 340, 90, 30);
rect(1260, 340, 90, 30);
rect(655, 75, 30, 90);
rect(655, 575, 30, 90);

for(int i=0; i < 10; i++){
      move(i = i +20)
}

}


//work out light order and assign and fill shapes on traffic lights according
void draw() {



determineLightOrder();
trafficLight();
trafficLight2();
trafficLight3();
trafficLight4();

}

void move(int p){
rect(p, 230, 200, 70);
rect(p, 400, 200, 70);
}



//determine if traffic light is red, yellow or green and fill shape 
accordingly
void trafficLight() {

let is_red_light = lightorder == 2;
let is_yellow_light = lightorder == 1;
let is_green_light = lightorder == 0;

stroke(250);
fill(0);
rect(10 + 550, 10 + 80, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 550, 30 + 80, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 550, 60 + 80, 20, 20);
}

// green ligh

if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 550, 90 + 80, 20, 20);

}

}

 void trafficLight2() {

//declare light color variables 
let is_red_light = lightorder == 0;
let is_yellow_light = lightorder == 2;
let is_green_light = lightorder == 1;

stroke(250);
fill(0);
rect(10 + 850, 10 + 215, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 850, 30 + 215, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 850, 60 + 215, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 850, 90 + 215, 20, 20);
}

}

//same code as the trafficLight2 different position of lights
void trafficLight3() {

stroke(250);
fill(0);
rect(10 + 420, 10 + 380, 40, 100);

let is_red_light = lightorder == 0;
let is_yellow_light = lightorder == 2;
let is_green_light = lightorder == 1;

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 420, 30 + 380, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 420, 60 + 380, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 420, 90 + 380, 20, 20);
}

}

 //same code as trafficLight1 different position of lights
 void trafficLight4() {

let is_red_light = lightorder == 2;
let is_yellow_light = lightorder == 1;
let is_green_light = lightorder == 0;

stroke(250);
fill(0);
rect(10 + 730, 10 + 525, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 730, 30 + 525, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 730, 60 + 525, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 730, 90 + 525, 20, 20);
}


}

//determine the light order
void determineLightOrder() {

counter++;

if (counter == 200) {
    counter = 0;
    lightorder = 0;
}
else if (counter == 50) {
    lightorder = 1;
}
else if (counter == 70) {
    lightorder = 2;
}
  }

Answer 1

Stack Overflow并非真正针对一般＆＃34;我如何做到这一点＆＃34;输入问题。这是特定的＆＃34;我试过X，期望Y，但得到了Z而不是＃34;输入问题。但我会在一般意义上尝试提供帮助：

我在Processing中写了关于动画的this tutorial，我强烈建议你阅读。但基本上，您需要将程序的状态（例如，矩形的位置）存储在变量（或多个变量）中。使用这些变量绘制场景，然后随时间更改这些变量以创建动画。

Break your problem down into smaller pieces并一次一张。你能创建一个显示单个移动方块的简单程序吗？然后在给定某个标准的情况下停止该方格。然后添加第二个方块。继续按照这样的小步骤继续前进，如果您遇到特定步骤，请发布MCVE以及更具体的问题。祝你好运。

如何让矩形在屏幕上移动处理js

1 个答案: