JavaScript»オブジェクト指向»メソッド メソッドでバブルを操作する
ファイル名: js-oop/quest_00666.html
下のプログラムは、「たくさんのバブルをぽこぽこする」と同じことを、メソッドをつかって書いたものです。これをうつして、バブルをぽこぽこしてください。
ソースコード
class Bubble {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 0;
}
// バブルをすこし大きくするメソッド enlarge
enlarge() {
this.radius += 1;
}
// 引数で指定した数だけバブルを上にうごかすメソッド rise
rise(dy) {
this.y -= dy;
}
}
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 191, 255)";
// 表示中の泡オブジェクトを入れておく配列
let bubbles = [];
// 200ミリ秒ごとに新しい泡オブジェクトを作って配列 bubbles に入れる
setInterval(() => {
const x = Math.floor(Math.random() * (320 - 32));
const y = Math.floor(Math.random() * 320);
bubbles.push(new Bubble(x, y));
}, 200);
// 25ミリ秒ごとに画面を全部描きなおす
const repaint = function() {
context.clearRect(0, 0, 320, 320);
// 配列bubblesに入っているバブルを順に表示する
bubbles.forEach(b => {
context.beginPath();
context.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
context.fill();
b.rise(2);
b.enlarge();
});
// 半径が32以上になったバブルは配列から取りのぞく
bubbles = bubbles.filter(bubble => bubble.radius < 32);
};
setInterval(repaint, 25);
解説
メソッドとは、プロパティに設定する関数です。クラスを作る(=定義する)ときにメソッドを中に入れておくことで、そのオブジェクトがどう動作するかを明らかにしておけます。
このコードでは、44と45行目でそれぞれメソッドを実行しています。