Проект "Машинки"

Машинки (у вигляді графічного об'єкта прямокутник) рухаються по екрану по горизонтальній траєкторії


Властивості об'єкта:

Колір машинки

Координата Х

Координата У

Швидкість руху

Налаштування setup() - при створенні об'єкта

Надати машинці колір

Надати машинці місце розташування

Надати машинці швидкість

Малювання draw() - при оновленні робочої області

Замалювати попередній результат

Намалювати машинку заданого кольору в заданих координатах

Оновити координати відповідно до значень швидкості

Processing p5.js 
Клас Автомобіль
class Car { 
color c;
float xpos;
float ypos;
float xspeed;

Конструктор об'єкта (опис властивостей)
Car (color tempC, float tempXpos, float tempYpos, float tempXspeed)  {    
c = tempC;   
xpos = tempXpos;   
ypos = tempYpos;   
xspeed = tempXspeed;   
}
Функціонал (методи)
 Показати
void display() {
   stroke(0);
   fill(c);
   rect(xpos,ypos,20,10);
}
 Переміститись
void drive() {
   xpos = xpos + xspeed;
   if (xpos > width) {   xpos = 0;   }
  }
}

class Car {
  constructor(tempC, tempXpos, tempYpos, tempXspeed) {
    this.c = tempC;
    this.xpos = tempXpos;
    this.ypos = tempYpos;
    this.xspeed = tempXspeed;
  }
  display() {
    stroke(0);
    fill(this.c);
    rect(this.xpos, this.ypos, 20, 10);
  }

  drive() {
    this.xpos = this.xpos + this.xspeed;
    if (this.xpos > width) {this.xpos = 0;}
  }
}

Основний проект

Processing p5.js 
Car myCar;
void setup()  {    
size(400,400);
myCar = new Car(color(255,0,0),0,100,2);   
}    
void draw()  {    
background(255);  
myCar.drive();   
myCar.display();  
} 

let myCar;
function setup() {
  createCanvas(windowWidth, windowHeight);
  myCar = new Car(color(255, 0, 0), 0, 100, 2);
}
function draw() {
  background(255);
  myCar.drive();
  myCar.display();
}


Для додавання нового об'єкта

Processing p5.js
Оголосити 
Car myCar2;
Створити 
myCar2 = new Car(color(0,0,255),0,10,1);
Запустити 
myCar2.drive();
myCar2.display();
Оголосити 
let myCar2;
Створити 
myCar2 = new Car(color(0,0,255),0,10,1);
Запустити 
myCar2.drive();
myCar2.display();


Об'єкти можна зберігати у масиві.

Processing p5.js

Оголошується масив cars об'єктів Car[], у якому резервується пам'ять під 10 таких об'єктів new Car[10].

Car[] cars = new Car[10];

Для створення цих об'єктів потрібно скористатись циклом:

for (int i=0; i<10; i++) {
  cars[i] = new Car(color(255,0,0),i*20,i*20,i+1);
}

Для обробки об'єктів теж потрібен цикл:

for (int i=0; i<10; i++) {
   cars[i].drive();
   cars[i].display();
}
 Достатньо вказати, що змінна є списком/масивом, не вказуючи розміру. 
let cars = [];
Цикл створення об'єктів:
  for (let i = 0; i <  10; i++) {
    cars[i] = new Car(color(255, 0, 0), i * 10, i * 10, random() * 2);
  }
Цикл обробки об'єктів:
  for (let i = 0; i < 10; i++) {
    cars[i].drive();
    cars[i].display();
  }
Last modified: Wednesday, 16 November 2022, 6:17 AM