前回で敵の描写をしましたが、コンストラクタの解説を忘れていました。
これはオブジェクトを複数扱うのにとても便利です。
そのため、今回は敵オブジェクトでコンストラクタについて説明します。
実は弾オブジェクトもコンストラクタを使っています。
今回の学習を終えた後に敵と弾を見比べてみてください。
前回のコードで敵関連でコンストラクタに関連するものを抜粋しました。
sprite.js
// 敵クラス
class Enemy {
constructor(x, y, w, h, speed) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.speed = speed;
}
// 敵を描画
show() {
fill(255, 0, 0);
rect(this.x, this.y, this.w, this.h);
}
// 敵を移動させる
move(direction) {
this.x += direction * enemySpeed;
}
// 敵を下に移動させる
shiftDown() {
this.y += 20;
}
}まず、敵のクラスです。
クラスとは、オブジェクトの設計図を指します。
オブジェクトが何かというと、言葉で表すのは難しいです。
プログラムで物を表現するものだと思ってください。
constructorでインスタンス生成する際、引数で初期化します。
インスタンス生成は後で説明します。
showとmove、shiftDownはskethc.jsでenemy.moveの様に使うことができます。
sketch.js
//今回書き加えたところです
let enemies = [];
let rows = 5; //行
let cols = 10; //列
let enemyWidth = 40; //敵の幅
let enemyHeight = 20; //敵の高さ
let spacing = 10; //敵と敵のスペース
let enemySpeed = 0.5;
let direction = 1; // 移動の方向（1: 右、-1: 左）
function setup() {
// 敵を初期化
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
//敵それぞれの列
let x = col * (enemyWidth + spacing) + 50;
//敵それぞれの行
let y = row * (enemyHeight + spacing) + 50;
//敵オブジェクトを動的配列に追加（インスタンス生成）
enemies.push(new Enemy(x, y, enemyWidth, enemyHeight, enemySpeed));
}
}
}
//描画
function draw() {
let shouldReverse = false;
// まず全ての敵を移動させる
for (let i = 0; i < enemies.length; i++) {
enemies[i].show();
enemies[i].move(direction);
// もし端に達していたら反転フラグを立てる
if (enemies[i].x > width - enemies[i].w || enemies[i].x < 0) {
shouldReverse = true;
}
}
// 端に到達したら方向を反転し、隊列を下に移動させる
if (shouldReverse) {
direction *= -1; // 方向を反転
for (let i = 0; i < enemies.length; i++) {
enemies[i].shiftDown(); // 敵を下に移動
}
}
}new Enemyのところでインスタンスを生成しています。
インスタンスとは、実際に作ったオブジェクトになります。
// もし端に達していたら反転フラグを立てる
のところでfor文回して一つでも壁に当たったら反転フラグが変更するようになっています。
※インスタンス生成やコンストラクタ宣言は言語によって違います。
それではまた次回
コメント