constructor(_imgInfo, _x, _y) {

    this.x = _x;

    this.y = _y;

    this.velocity = 2;

    this.delay = 100;

    this.imgInfo = _imgInfo;

    this.currentImgs = this.getDirectionImgs("down");

    this.currentIndex = 0;

    this.lastUpdate = 0;

  }

​

  getDirectionImgs(dir) {

    for (let i = 0; i < this.imgInfo.length; i++) {

      if (this.imgInfo[i].direction == dir) {

        return this.imgInfo[i].imgs;

      }

    }

  }

​

  checkKeys() {

    if (keyIsDown(LEFT_ARROW)) {

      this.currentImgs = this.getDirectionImgs("side");

      this.x -= this.velocity;

    }

​

    if (keyIsDown(RIGHT_ARROW)) {

      this.currentImgs = this.getDirectionImgs("side");

      this.x += this.velocity;

    }

​

    if (keyIsDown(UP_ARROW)) {

      this.currentImgs = this.getDirectionImgs("up");

      this.y -= this.velocity;

    }

​

    if (keyIsDown(DOWN_ARROW)) {

      this.currentImgs = this.getDirectionImgs("down");

      this.y += this.velocity;

    }

  }

​

  draw() {

    this.checkKeys();

​

    if (millis() > this.lastUpdate + this.delay) {

      this.currentIndex = (this.currentIndex + 1) % this.currentImgs.length;

      this.lastUpdate = millis();

    }

​

    let currentImg = this.currentImgs[this.currentIndex];

​

    push();

    translate(this.x, this.y);

    translate(-currentImg.width / 2, -currentImg.height / 2);

    image(currentImg, 0, 0);

    pop();

  }

}

​

let spriteInfo = [

  { direction: "down", imgCount: 6, imgs: [] },

  { direction: "side", imgCount: 6, imgs: [] },

  { direction: "up", imgCount: 6, imgs: [] },

];

​

function preload() {

  for (let si = 0; si < spriteInfo.length; si++) {

    let info = spriteInfo[si];

    let name = info.direction;

    for (let ii = 0; ii < info.imgCount; ii++) {

      let mImg = loadImage("./sprites/" + name + "/tile00" + ii + ".png");

      info.imgs.push(mImg);

    }

  }

}

​

let mHero;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  mHero = new Character(spriteInfo, width / 2, height / 2);

}

​

function draw() {

  background(220);

  mHero.draw();

}

​