p5.jsでスネークゲーム作成

　突発性難聴で左耳が死んだ(余計な情報)
p5.jsを初めて使うのでスネークゲームを作ってみた。

p5.js

コード

    let snake;
    let apple;

    const canvasSizeWidth = 400;
    const canvasSizeHeight = 400;
    const frameRateValue = 10;
    const cell = 20;
    let cellSizeWidth;
    let cellSizeHeight;

    //初期設定
    function setup() {
      snake = new Snake();
      apple = new Apple();

      cellSizeWidth = floor(canvasSizeWidth / cell);
      cellSizeHeight = floor(canvasSizeHeight / cell);

      createCanvas(canvasSizeWidth, canvasSizeHeight);
      frameRate(frameRateValue);
    }

    //描画
    function draw() {
      background(51);
      snake.Update();
      snake.Death();

      if (snake.headPosition.x === apple.position.x && snake.headPosition.y === apple.position.y) {
        snake.Growth();
        apple.Pop();
      }

      snake.Draw();
      apple.Draw();
    }

    //キー入力
    function keyPressed() {
      if (keyCode === UP_ARROW) {
        snake.Direction(0, -1);
      } else if (keyCode === DOWN_ARROW) {
        snake.Direction(0, 1);
      } else if (keyCode === LEFT_ARROW) {
        snake.Direction(-1, 0);
      } else if (keyCode === RIGHT_ARROW) {
        snake.Direction(1, 0);
      } else if (key == ' ') {
        //snake.grow();
      }
    }

    class Snake {
      //コンストラクタ
      constructor() {
        this.Init();
      }

      Init() {
        this.body = [createVector(cell - 1, 0)];
        this.headPosition = createVector(cell - 1, 0);
        this.directionVector = createVector(0, 0);
      }

      //移動方向の設定
      Direction(x, y) {
        if (this.directionVector.x != -x || this.directionVector.y != -y) {
          this.directionVector.x = x;
          this.directionVector.y = y;
        }
      }

      //死
      Death() {
        //境界から出て死亡
        if (this.headPosition.x < 0 || this.headPosition.x >= cell || this.headPosition.y < 0 || this.headPosition.y >= cell) {
          this.Init();
        }

        //自身に当たって死亡
        for (let i = 0; i < this.body.length; i++) {
          if (this.body[i].x === this.headPosition.x && this.body[i].y === this.headPosition.y) {
            this.Init();
          }
        }
      }

      //成長
      Growth() {
        this.body.push(this.headPosition);
      }

      //更新
      Update() {
        this.body.unshift(createVector(this.headPosition.x, this.headPosition.y));
        this.body.pop();
        this.headPosition.x += this.directionVector.x;
        this.headPosition.y += this.directionVector.y;
      }

      //描画
      Draw() {
        fill(255, 255, 255);
        rect(this.headPosition.x * cellSizeWidth, this.headPosition.y * cellSizeHeight, cellSizeWidth, cellSizeHeight);

        fill(0, 255, 0);
        for (let i = 0; i < this.body.length; i++) {
          rect(this.body[i].x * cellSizeWidth, this.body[i].y * cellSizeHeight, cellSizeWidth, cellSizeHeight);
        }
      }
    }

    //リンゴクラス
    class Apple {
      //コンストラクタ
      constructor() {
        this.position = createVector(5, 5);
      }

      //描画
      Draw() {
        fill(255, 0, 0);
        rect(this.position.x * cellSizeWidth, this.position.y * cellSizeHeight, cellSizeWidth, cellSizeHeight);
      }

      //出現
      Pop() {
        this.position.x = floor(random(0, cell));
        this.position.y = floor(random(0, cell));
      }
    }