敵描写(p5.js)

今回は敵を沢山描写します。
ですが今回はとりあえず描写するところまで行きます。
今後、あたり判定でもしかしたら移動の部分が変わるかもしれません。
その辺、ご了承ください。

まず、敵のクラス。
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;
  }
}

補足すると、wで横の長さ、hで縦の長さを現しています。
sketch.jsは以下の様に書き換えてください。

// プレイヤーの座標
let x, y; 

// 四角のサイズ
let gridSize = 40; 

let bullets = [];

//今回書き加えたところです
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() {
  createCanvas(800, 400);
  x = width / 2;
  y = height - 40;

  //今回書き加えたところです
  // 敵を初期化
  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() {
　//背景の濃さ
  background(220);

　let shouldReverse = false;
  
  for (let bullet of bullets){
    bullet.display(); 
    bullet.move();
  }
  
  //キャラクター描画関数
  drawCharacter();

  //今回書き加えたところです
  // まず全ての敵を移動させる
  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(); // 敵を下に移動
    }
  }
}

//キャラクター描画関数
function drawCharacter() {
  fill('red');
  square(x, y, gridSize);
}

// キーボードイベントを処理する関数
function keyPressed() {

　switch(keyCode){
　　// 左に移動
    case LEFT_ARROW:
        x = max(x - gridSize, 0); 
        break;
　　// 右に移動
    case RIGHT_ARROW:
        x = min(x + gridSize, width - gridSize); 
        break;
　　// 上に移動
    case UP_ARROW:
        y = max(y - gridSize, 0); 
        break;
　　// 下に移動
    case DOWN_ARROW:
        y = min(y + gridSize, height - gridSize); 
        break;
  }
  
  if(key == ' '){
    let bullet = new Bullet(x + 20, y);
    bullets.push(bullet);
  }
  
  redraw(); // 描画を更新
}

今回、書くところが多かったので、説明は今回追加した行それぞれにコメントアウトの形で載せました。
読むのに苦労すると思いますが、コードを読む練習としていいかもしれません。

それではまた次回。