let sprites = [];

let direction = 1;

let step = 0;

let x;

let y;

let speed = 7;

let stepSpeed = 60;

let animationTimer;

​

​

function preload() {

  spritesheet = loadImage("walk-sprite.png");

}

​

function setup() {

  createCanvas(600, 600);

  x = width/2;

  y = height-100;

​

  // let w = spritesheet.width / 17;

  // let h = spritesheet.height / 2;

​

//   x = width/2;

//   y = height/2;

  // width = 67 pixels

  // height = 115 pixels

  for(x = 0; x<17; x++) {

    sprites.push(spritesheet.get((77*x)+38, 10, 70, 90));

  }

​

  imageMode(CENTER);

}

​

function draw() {

  background(0);

​

​

    if(keyIsDown(LEFT_ARROW)) {

      x -= 1;

      if(frameCount % 15 == 0) {

    step = (step + 1) % 17;

  }

    }

    if(keyIsDown(RIGHT_ARROW)) {

      x += 1;

      if(frameCount % 15 == 0) {

    step = (step + 1) % 17;

  }

    }

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

}

​

​

// TODO

function backgroundChange(x) {

  if(x == 0) {

    // background snow

  }

}

​

​

// function keyPressed() {

//   // use the javascript setInterval function that will

//   // call a function repeatedly at a given milliseconds interval

//   // supply setInterval with a function that will run the animation steps

//   // but first! clear any interval that already might be running

//   // to account for accidental multiple keypresses

//   clearInterval(animationTimer)

//   // then set the interval

//   animationTimer = setInterval(() => {

//     step = (step + 1) % 17;

//   }, stepSpeed); // stepSpeed is our global variable that is the milliseconds for the interval

// }

​

// function keyReleased() {

//   // when a key is released clear the interval

//   clearInterval(animationTimer);

// }