let sprites = [];

​

let direction = 0;

let step = 0;

​

let x;

let y;

let speed = 10;

​

function preload() {

  spritesheet = loadImage("walking.png");

}

​

function setup() {

  createCanvas(400, 400);

​

  let w = int(spritesheet.width / 12);

  let h = int(spritesheet.height / 4);

​

  for (let j = 0; j < 4; j++) {

    sprites[j] = [];

    for (let i = 0; i < 12; i++) {

      sprites[j][i] = spritesheet.get(w * i, h * j, w, h);

    }

  }

​

  x = width / 2;

  y = height / 2;

  image(sprites[direction][step], x, y);

}

​

function draw() {

  // background(220);

}

​

function keyPressed() {

  if (keyCode == UP_ARROW) {

    direction = 3;

    y -= speed;

  }

​

  if (keyCode == DOWN_ARROW) {

    direction = 0;

    y += speed;

  }

​

  if (keyCode == LEFT_ARROW) {

    direction = 1;

    x -= speed;

  }

​

  if (keyCode == RIGHT_ARROW) {

    direction = 2;

    x += speed;

  }

​

  step = (step + 1) % 12;

​

  background(0);

  image(sprites[direction][step], x, y);

}

​