Javascriptでシューティングゲームを作る #4 class

前回の内容

ゲームを作るというよりは、基礎知識の確認が主たるものとなってしまっている感もあるが、併行してやっていきたい。前回の内容は以下の通りだ。

Javascriptでシューティングゲームを作る #3 Element , Elementオブジェクト

星classの作成

さて、ここでは、フィールドに星を表示させるために、星クラスを作成する。オブジェクト指向というやつだ。自分もオブジェクト指向は使い慣れていない。星クラスの中には、コンストラクタとdraw()、update()メソッドが書かれてある。
良い機会だ。ここで一旦、「class クラス」についてみていきたい。

//ランダム、乱数を作成する関数
function rand(min,max){
  return Math.floor(Math.random()*(max-min+1))+min;
}
//星クラス
class Star{
    constructor(){
      this.x = rand(0,FIELD_W)<<8;//x座標
      this.y = rand(0,FIELD_H)<<8;//y座標
      this.vx= 0;//ベクトル、横
      this.vy = rand(30,200);//ベクトル、縦。1フレームで、1ピクセルは動かない
      this.sz = rand(1,2);//サイズ

      draw(){//星の描画
        con.fillStyle = rand(0,2) != 0?"66f":"#8af";
        con.fillRect(this.x>>8,this.y>>8,this.sz,this.sz);
      }

      update(){//毎フレームでどれだけ動くか
        this.x += this.vx;
        this.y += this.vy;
        if(this.y>FIELD_H<<8){
          this.y = 0;
          this.x = rand(0,FIELD_W)<<8;
        }
      }
    }

classとは

まずお約束の「class」とは何なのか。以下、MDNより。
ここでは関数であると書かれてある。実際のところ、関数、メソッドの違いすらも曖昧だ。

クラスは実は「特別な関数」であり、関数式と関数宣言の 2 通りで関数が定義できるように、クラス構文にはクラス式とクラス宣言という 2 つの定義方法

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes(2020/09/04参照)

cf, JavaScript初心者にclassを伝える(2020/09/04参照)

※記事の内容は随時アップデートさせていただく。classについては、自分自身理解が浅いのでまとめ直したい。