Invader 04

Invader クラス、Grid クラスを作ろう

Invaderとは？

Invaderとは敵のことです。

Gridとは？

GridとはInvaderの集団のことです。

---

準備

• フォルダの中にsrcフォルダを作成し、その中にInvader.jsとGrid.jsファイルを作成しましょう。
• index.jsファイルの一番上に、Gridのimportを追加しましょう。
• グローバル変数にgridsを入れておく配列(Array)を作成しましょう。
• グローバル変数にgridsにGridインスタンスを追加しましょう。

import { Grid } from "./src/Grid.js" // NEW!!
import { Player } from "./src/Player.js"
import { Projectile } from "./src/Projectile.js"

...

// -------------------------------------------
//  VARIABLES
// -------------------------------------------
// ゲームで使われる変数をここで設定
globalThis.player = new Player()
// Projectileクラスを入れておく配列
globalThis.projectiles = []

// NEW!!
// Gridクラスを入れておく配列
globalThis.grids = []


// NEW!!
// Gridを1つgrids配列に入れる
globalThis.grids.push(new Grid())

---

Invader.jsのポイント

constructorの理解

• constructorはpositionだけを引数として受け取ります。
• new Image()で画像が設定されていることを確認。
• 画像の大きさをscaleで調整しています。

update()メソッドにProjectileの位置を示す便利な値を設定

• center, top, bottom, left, rightは後でProjectileインスタンスに対してコードを書く時に便利になるから設定をしておきます。

// -------------------------------------------
//  INVADER CLASS
// -------------------------------------------
// 敵1騎
export class Invader {
  // コンストラクタ：Playerインスタンスをはじめて作成される時に呼び出される
  // インスタンスを作成する時(new ??)、渡す引数
  // Object形式で引数を渡していることに注意
  // ex. {position: {x: 1, y: 2}}
  constructor({ position }) {
    // velocityはフレームごとに動く距離
    this.velocity = {
      x: 0,
      y: 0,
    }

    const image = new Image()
    image.src = "./assets/invader.png"

    image.onload = () => {
      const scale = 0.65
      this.image = image
      this.width = image.width * scale
      this.height = image.height * scale

      this.position = {
        x: position.x,
        y: position.y,
      }
    }
  }

  //  DRAW METHOD -------------------------
  // Classをどのように画面上に描かれるかを定義する
  draw() {
    globalThis.ctx.drawImage(
      this.image,
      this.position.x,
      this.position.y,
      this.width,
      this.height
    )
  }

  //  UPDATE METHOD -------------------------
  // draw()を呼び、1フレームごとにどのように数値が変化するかを設定するメソッド
  update({ velocity }) {
    if (!this.image) return

    this.draw()
    this.position.x += velocity.x
    this.position.y += velocity.y

    // positionの変化に合わせて数値を更新
    // 真ん中の位置(x,y)
    this.center = {
      x: this.position.x + this.width / 2,
      y: this.position.y + this.height / 2,
    }

    // top, bottom, left, rightの位置を設定・更新
    this.top = this.position.y
    this.bottom = this.position.y + this.height
    this.left = this.position.x
    this.right = this.position.x + this.width
  }

  // invaderがランダムでprojectileを打つ
  // TODO
}

---

Grid.jsのポイント

constructorの理解

• constructorは引数を受け取りません。
• this.invaders変数の中にInvaderクラスのインスタンスを格納します。
• columnsとrowsはInvader集団の列数、行数をランダムで設定するために使用します。
• this.widthはInvader集団、つまりGrid全体の幅を計算しています。

draw()の理解

• draw()はInvaderクラスが担当するためありません。

update()メソッドにProjectileの位置を示す便利な値を設定

• update()メソッドの中の以下の部分に注目する必要があります。
• 以下のコードはGridが画面に右もしくは左に達した時に下に下がる、つまりyの値をその時だけ更新するためのコードです。
• その後、横に進む方向を逆にします。

// yが常に動かないようにする
this.velocity.y = 0

// 敵集団(grid)が壁にあたったら逆のy方向に移動をする
// gridの右端xがcanvasの右端以上の時、もしくはgridの左端xが0以下の時
if (this.right >= globalThis.canvas.width || this.position.x <= 0) {
  // this.velocityを逆向きにし、y位置を30ピクセル下に移動をさせる
  this.velocity.x = -this.velocity.x * 1.15
  this.velocity.y = 30
}

import { Invader } from "./Invader.js"

// -------------------------------------------
//  GRID CLASS
// -------------------------------------------
// GridクラスはInvaderの集団を格納するときのためのクラス
export class Grid {
  // コンストラクタ：Playerインスタンスをはじめて作成される時に呼び出される
  constructor() {
    this.position = {
      x: 0,
      y: 0,
    }
    // velocityはフレームごとに動く距離
    this.velocity = {
      x: 3,
      y: 0,
    }

    this.invaders = []

    //  invaderの列数columnsと行数rowsをランダムに生成
    const columns = Math.floor(Math.random() * 10 + 5)
    const rows = Math.floor(Math.random() * 5 + 2)

    this.width = columns * 40

    //  invaderのGridを作成する
    for (let x = 0; x < columns; x++) {
      for (let y = 0; y < rows; y++) {
        this.invaders.push(new Invader({ position: { x: x * 40, y: y * 40 } }))
      }
    }
  }

  //  UPDATE METHOD -------------------------
  // draw()を呼び、1フレームごとにどのように数値が変化するかを設定するメソッド
  update() {
    this.position.x += this.velocity.x
    this.position.y += this.velocity.y

    // positionの変化に合わせて数値を更新
    // 真ん中の位置(x,y)
    this.center = {
      x: this.position.x + this.width / 2,
      y: this.position.y + this.height / 2,
    }

    // top, bottom, left, rightの位置を設定・更新
    this.top = this.position.y
    this.bottom = this.position.y + this.height
    this.left = this.position.x
    this.right = this.position.x + this.width

    // yが常に動かないようにする
    this.velocity.y = 0

    // 敵集団(grid)が壁にあたったら逆のy方向に移動をする
    // gridの右端xがcanvasの右端以上の時、もしくはgridの左端xが0以下の時
    if (this.right >= globalThis.canvas.width || this.position.x <= 0) {
      // this.velocityを逆向きにし、y位置を30ピクセル下に移動をさせる
      this.velocity.x = -this.velocity.x * 1.15
      this.velocity.y = 30
    }
  }
}

index.jsのポイント

animate()関数の中にGrid用のアニメーションコードを確認

• Gridを生成するアニメーション
  • forループはgrids配列の後ろからループしています。
  • grids配列の中のGridインスタンスを一つ受け取り、そのインスタンスの中にあるinvaders配列の中をさらにforループをしています。
  • Invaderインスタンスを一つ受け取り、それの.update()メソッドを呼び出し、アニメーションを作成しています。
• Gridを生成するアニメーション
  • globalThis.randomInterval(ミリ秒)間隔でGridが生成されます。
  • randomIntervalの数値にglobalThis.spawnBufferをたされます。
  • 時間が進むと（globalThis.framesが進むと）globalThis.spawnBuffer -= 100によってspawnBufferの数値が減っていきます。
  • つまり、時間が経つとrandomIntervalの間隔は短くなり、Gridが生成される間隔ば短くなります。難易度が上がっていきます。

function animate() {
 ...
  // Grid配列のアニメーション -------------------------
  // Invader集団のアニメーション

  // NEW!!
  // Gridsの配列をループ
  for (let i = globalThis.grids.length - 1; i >= 0; i--) {
    const grid = globalThis.grids[i]
    grid.update()

    // 100フレームごとにgridにいる一騎のinvaderからprojectileをshootする
    // TODO

    // Gridの中にあるInvader配列をループする
    for (let j = grid.invaders.length - 1; j >= 0; j--) {
      const invader = grid.invaders[j]
      if (!invader.position) continue
      invader.update({ velocity: grid.velocity })

      // Bomb配列をループ
      // TODO

      //  ProjectileとInvaderの衝突判定をする
      // TODO
    }
  }

  // Gridを生成するアニメーション -------------------------
  // 敵(grid）を作成する
  // randomIntervalごとにGridを生成する
  if (globalThis.frames % globalThis.randomInterval === 0) {
    // spawnBufferが0以下なら0、それ以外はspawnBufferに設定する
    // spawnBufferはGridが生成される間隔の最低値
    globalThis.spawnBuffer =
      globalThis.spawnBuffer < 0 ? 0 : globalThis.spawnBuffer

    // Gridを生成
    globalThis.grids.push(new Grid())

    // randomIntervalを新たに設定
    globalThis.randomInterval = Math.floor(
      Math.random() * 500 + globalThis.spawnBuffer
    )

    // framesをゼロに戻す
    globalThis.frames = 0
    // spawnBufferを100msずつ減らす（敵がだんだん速く動く）
    globalThis.spawnBuffer -= 100
  }
  ...
}

addEventListener("keydown", ...)のスペースキーの挙動を確認

• スペースキーを押した時に新しいProjectileインスタンスを作成しましょう。(new Projectile(...))

//  KEYDOWN -------------------------
globalThis.addEventListener("keydown", ({ key }) => {
  switch (key) {
    case "a": {
      globalThis.keys.a.pressed = true
      break
    }
    case "d": {
      globalThis.keys.d.pressed = true
      break
    }
    case " ": {
      globalThis.keys.space.pressed = true
      // NEW!!
      globalThis.projectiles.push(
        new Projectile({
          position: {
            x: globalThis.player.center.x,
            y: globalThis.player.top,
          },
          velocity: {
            x: 0,
            y: -10,
          },
        })
      )
      break
    }
  }
})

確認

• 画面上にInvaderの集団、Gridが飛ぶことを確認しましょう。