9_1：OOP型ロボット p5.js JavaScript

ソフトウェアオブジェクトは、メソッド(関数)とプロパティ(変数)を1つの単位にまとめたものです。次のサンプルのRobotクラスでは、作成するロボットオブジェクトのすべてを定義しています。１つ１つのRobotオブジェクトは、位置と画面に描画する画像を保持する自分自身のプロパティのセットを持ち、位置を更新し、画像を表示するメソッドを持っています。

setup()のbotlとbot2のパラメータは、x座標とy座標、ロボットを表すための.svgファイルを指定します。tempXとtempYパラメータはコンストラクタに渡され、xposとyposプロパティに割り当てられます。imgパラメータは画像の読み込むに使用されます。オブジェクト(otlとbot2)はそれぞれ、自分自身の位置に異なる画像を描画します。これは、それぞれが自分のコンストラクタを通して渡された自分用の値を持っているからです。

var img1;
var img2;
var bot1;
var bot2;

function preload() {
    img1 = loadImage('robot1.svg');
    img2 = loadImage('robot2.svg');
}

function setup() {
    createCanvas(720, 480);
    bot1 = new Robot(img1, 90, 80);
    bot2 = new Robot(img2, 440, 30);
}

function draw() {
    background(204);

    // 左のロボットを更新して表示
    bot1.update();
    bot1.display();

    // 右のロボットを更新して表示
    bot2.update();
    bot2.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);
    }
}