10_4：ロボットの配列 p5.js JavaScript

配列を使用すると、多数ある要素が扱いやすくなります。

次のリンクをクリックすると、実際の動作が確認できます。「ロボットの配列」

let robotImage;
const bots = []; // Robotオブジェクトを入れる配列を宣言

function preload() {
    robotImage = loadImage('robot1.svg');
}

function setup() {
    createCanvas(720, 480);
    // 作成するRobotオブジェクトの数
    const numRobots = 20;

    // numRobots分Robotオブジェクトを作成し、bots配列に入れる
    for (let i = 0; i < numRobots; i++) {
        const x = random(-40, width - 40);
        const y = map(i, 0, numRobots, -100, height - 200);
        bots[i] = new Robot(robotImage, x, y);
    }
}

function draw() {
    background(204);
    // bots配列に入れたRobotのupdate()とdisplay()メソッドを呼び出す
    for (let i = 0; i < bots.length; i++) {
        bots[i].update();
        bots[i].display();
    }
}


// Robotクラス
class Robot {
    constructor(img, tempX, tempY) {
        // プロパティの初期値を設定
        this.xpos = tempX;
        this.ypos = tempY;
        this.angle = random(0, TWO_PI);
        this.botImage = img;
        this.yoffset = 0.0;
    }

    update() {
        this.angle += 0.05;
        this.yoffset = sin(this.angle) * 20;
    }
    display() {
        image(this.botImage, this.xpos, this.ypos + this.yoffset);
    }
}