敵を出現させよう

チャプター1完成形を確認しよう

​
​

チャプター2敵クラスを作ろう

敵はプレイヤーと色の違う正方形でX、Y座標x, y, 正方形の一辺の長さsize,X,Yの移動速度 speedX speedYのプロパティを持つ事にします。
また毎フレーム下にspeedYの速度、左右にspeedXの値で移動する事とします、壁にぶつかった場合は左右反対に跳ね返って移動します。
表示はプレイヤーの表示と同じように一辺の長さsizeの正方形を表示しましょう。
色はプレイヤーや背景と判別できる好きな色を設定しましょう。

2. 1 ヒント

• プレイヤーと違って下方向の移動があることに注意しよう。
• 毎フレーム、座標に速度の値を追加して行けば毎フレーム一定の速度で移動ができます。　　
• はみ出した時の判定はプレイヤーが画面からはみ出したときの判定を参考に記述しましょう。
• 跳ね返る処理は壁にぶつかったときにspeedXに-1をかけてみよう。
  ​

チャプター3敵を複数追加して移動、表示しよう

設計した敵クラスを使って一定間隔で敵を登場させましょう。追加のタイミングは60フレーム毎にしてください。
敵の移動X,Y軸速度はランダムにしてください。　　
敵は複数登場するので配列に格納しましょう。
　

3. 1 ヒント

• framecountで現在のフレーム数が取得できます　割り算の余りを求める計算%を使った計算を使って60フレーム毎の処理を作ってみよう。
• 配列のコード例
• 配列への値の追加はpush()メソッド
• 繰り返し処理はfor...of文
• ランダムな値はrandom()

3. 2 配列を扱うサンプルコード

サンプルコードを参考にして考えてみよう。
このコードではマウスをクリックすると配列に敵を追加します。
敵は移動します、表示しますとログを表示して、全体の敵の数も表示しています。

let enemys = [];

function draw() {
  for (let enemy of enemys) {
    enemy.move();
    enemy.display();
  }
  //敵の数の表示
  console.log("敵の数" + enemys.length);
}

function mousePressed() {
  enemys.push(new Enemy(10, 20, random(0,5), random(0,5)));
}

//敵クラス
class Enemy {

  //コンストラクタ
  constructor(x, y, size, speedX, speedY) {
 
  }

  //移動
  move() {
    console.log("移動します");
  }

  //表示
  display() {
    console.log("表示します");
  }
}