​

let up = 1;

let down = 1;

let left = 1;

let right = 1;

​

let led_button = 0;

​

let animal = 9;

​

let start;

let title;

​

let playerSheet;

let playerSprites = [];

let direction = 3;

let playerStep = 0;

let x;

let y;

let playerSpeed = 3;

​

let zoo;

let owl;

let lion;

let hungryLion;

let option_1;

let option_2;

let option_3;

let option_4;

let option_x;

let option_y;

let sheep;

let shavedSheep;

​

let razor;

let razor_y;

let spriteAnimal;

let sprites = []; // cat sprite

let step = 0;

let sprite_x = 0;

let speed = 8;

​

let music;

let owl_sound;

let cat_sound;

let sheep_sound;

​

let sleep;

​

function setup() {

  createCanvas(1795, 700);

  // cat spritesheet

  let w = int(spriteAnimal.width / 6);

  let h = int(spriteAnimal.height / 1);

​

  for (let y = 0; y < 1; y++) {

    sprites[y] = [];

    for (let x = 0; x < 6; x++) {

      sprites[y][x] = spriteAnimal.get(x * w, y * h, w, h);

    }

  }

​

  //player spritesheet

  let player_w = int(playerSheet.width / 12);

  let player_h = int(playerSheet.height / 4);

​

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

    playerSprites[y] = [];

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

      playerSprites[y][x] = playerSheet.get(

        x * player_w,

        y * player_h,

        player_w,

        player_h

      );

    } // iterate over rows

  } // iterate over columns

​

  x = width / 2;

  y = height - 40;

​

  imageMode(CENTER);

​

  razor_y = height / 2 + 120;

​

  option_x = width / 5 - 155;

  option_y = (height * 2) / 3 - 92;

​

  music.setVolume(0.25);

  sheep_sound.setVolume(0.3);

  cat_sound.setVolume(0.6);

}

​

​

function preload() { // load all the media resources

  start = loadImage("background.jpg");

  title = loadImage("title.png");

  zoo = loadImage("zoo-background.jpg");

  owl = loadImage("owl.png");

  lion = loadImage("lion.png");

  sheep = loadImage("sheep.png");

  spriteAnimal = loadImage("sprite-animal.png");

  sleep = loadImage("zzz.png");

  shavedSheep = loadImage("shaved-sheep.png");

  razor = loadImage("razor.png");

  sheep_sound = loadSound("sheep.mp3");

  hungryLion = loadImage("hungry-lion.png");

  option_1 = loadImage("option_1.png");

  option_2 = loadImage("option_2.png");

  option_3 = loadImage("option_3.png");

  option_4 = loadImage("option_4.png");

​

  music = loadSound("background-music.mp3");

  owl_sound = loadSound("owl-sound.mp3");

  cat_sound = loadSound("cat-sound.mp3");

  playerSheet = loadImage("walking.png");

}

​

let level = 0;

​

let tint_a = 255;

​

let hasPlayed = false;

​

let option = 1;

​

function draw() {

  led_button = 0;

  if (serialActive) {

    if (!music.isPlaying()) {

      music.play();

    }

  }

  fill("#5E4827");

  if (level == 0) {

    led_button = 1;

    image(start, width / 2, height / 2);

    image(title, width / 2, height / 2, 650, 250);

    textAlign(CENTER);

    textSize(21);

    textFont("Verdana");

    textStyle(BOLD);

    text("Press Red Button to Start", width / 2, 550);

    x = width / 2;

    y = height - 40;

​

    razor_y = height / 2 + 120;

    option_x = width / 5 - 155;

    option_y = (height * 2) / 3 - 92;

    tint_a = 255;

    hasPlayed = false;

    direction = 3;

  }

​

  // level 1

  if (level == 1) {

    tint_a = 255;

    razor_y = height / 2 + 120;

    hasPlayed = false;

    if (frameCount % playerSpeed == 0) {

      playerStep = (playerStep + 1) % 12;

    }

    option_x = width / 5 - 155;

    option_y = (height * 2) / 3 - 92;

    option = 1; // reset the opption in lion

    sprite_x = 0; // reset the spritesheet

    animal = 9;

    image(zoo, width / 2, height / 2, 1795, 700);

    image(playerSprites[direction][playerStep], x, y);

    image(owl, width / 6, (height * 2) / 3 + 20, 100, 100);

    image(lion, (width * 3) / 4, (height * 2) / 3 + 25, 200, 200);

    image(sheep, width / 3, height / 2 + 20, 100, 100);

    image(sprites[0][1], width / 4 + 500, height / 2 + 50, 100, 100);

​

    led_button = 0;

​

    if (y > 0) {

      if (up == 0) {

        y -= playerSpeed;

        direction = 3;

      }

    }

    if (y < height - size) {

      if (down == 0) {

        y += playerSpeed;

        direction = 0;

      }

    }

    if (x > 0) {

      if (left == 0) {

        x -= playerSpeed;

        direction = 1;

      }

    }

    if (x < width - size) {

      if (right == 0) {

        x += playerSpeed;

        direction = 2;

      }

    }

​

    // owl collider

    if (

      x <= width / 6 + 80 &&

      y <= (height * 2) / 3 + 100 &&

      y >= (height * 2) / 3 - 180 &&

      x >= width / 6 - 180

    ) {

      animal = 0;

      led_button = 1;

    }

    //  lion collider

    if (

      x >= (width * 3) / 4 - 250 &&

      y <= (height * 2) / 3 + 150 &&

      y >= (height * 2) / 3 - 200 &&

      x <= (width * 3) / 4 + 150

    ) {

      animal = 1;

      led_button = 1;

    }

    // sheep collider

    if (

      x <= width / 3 + 100 &&

      x >= width / 3 - 170 &&

      y <= height / 2 + 100 &&

      y >= height / 2 - 160

    ) {

      animal = 2;

      led_button = 1;

    }

    // sprite animal collider

    if (

      x >= width / 4 + 330 &&

      x <= width / 4 + 590 &&

      y <= height / 2 + 120 &&

      y >= height / 2 - 110

    ) {

      animal = 3;

      led_button = 1;

    }

  }

​

  // level 2

  if (level == 2) {

    led_button = 0;

    image(zoo, width / 2, height / 2, 1795, 700);

​

    //owl

    if (animal == 0) {

      image(owl, width / 6, (height * 2) / 3 + 20, 200, 200);

      if (!owl_sound.isPlaying()) {

        owl_sound.play();

      }

    }

​

    // lion

    if (animal == 1) {

      image(hungryLion, (width * 3) / 4, (height * 2) / 3 + 25, 200, 200);

      push();

      noFill();

      strokeWeight(10);

      stroke(173, 255, 47);

      rect(option_x, option_y, 310, 160, 20); // option

      pop();

      image(option_1, width / 5, (height * 2) / 3 - 10, 300, 150);

      image(option_2, width / 5 + 350, (height * 2) / 3 - 10, 300, 150);

      image(option_3, width / 5, (height * 2) / 3 + 160 - 10, 300, 150);

      image(option_4, width / 5 + 350, (height * 2) / 3 + 160 - 10, 300, 150);

      led_button = 1;

      switch (option) {

        case 1:

          if (right == 0) {

            option = 2;

            option_x += 350;

          } else if (down == 0) {

            option = 3;

            option_y += 160;

          }

          break;

        case 2:

          if (left == 0) {

            option = 1;

            option_x -= 350;

          } else if (down == 0) {

            option = 4;

            option_y += 160;

          }

          break;

        case 3:

          if (right == 0) {

            option = 4;

            option_x += 350;

          } else if (up == 0) {

            option = 1;

            option_y -= 160;

          }

          break;

        case 4:

          if (left == 0) {

            option = 3;

            option_x -= 350;

          } else if (up == 0) {

            option = 2;

            option_y -= 160;

          }

          break;

​

        default:

          break;

      }

    }

​

    // sheep

    if (animal == 2) {

      push();

      if (tint_a > 10) {

        tint(255, tint_a);

        tint_a -= 2;

      } else {

        if (!sheep_sound.isPlaying() && !hasPlayed) {

          sheep_sound.play();

          hasPlayed = true;

        }

        image(shavedSheep, width / 3, height / 2 + 20, 120, 200);

        led_button = 1; // allow exit this level;

        tint(255, 0);

      }

      image(sheep, width / 3, height / 2 + 20, 200, 200);

      image(razor, width / 3, razor_y, 120, 120);

      pop();

      razor_y -= 2;

    }

    if (animal == 3) {

      if (sprite_x > width + 50) {

        led_button = 1;

      } else {

        if (frameCount % speed == 0) {

          step = (step + 1) % 6;

        }

        sprite_x += speed;

        // paint the sprite

        image(sprites[0][step], sprite_x, height / 2);

        if (!cat_sound.isPlaying()) {

          cat_sound.play();

        }

      }

    }

  }

​

  if (level == 3) {

    image(zoo, width / 2, height / 2, 1795, 700);

    if (animal == 0) {

      image(sleep, width / 5, height / 3, 200, 200);

    }

    if (animal == 1) {

      image(hungryLion, (width * 3) / 4, (height * 2) / 3 + 25, 400, 400);

    }

    led_button = 1;

  }

}

let reset = false;

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

  if (key =="r") {

    reset = true;

  }

}

​

// This function will be called by the web-serial library

// with each new *line* of data. The serial library reads

// the data until the newline and then gives it to us through

// this callback function

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

  if (data != null) {

    // make sure there is actually a message

    // split the message

    let readFromArduino = split(trim(data), ",");

    print(readFromArduino);

    if (readFromArduino.length == 5) {

      up = readFromArduino[0];

      down = readFromArduino[1];

      left = readFromArduino[2];

      right = readFromArduino[3];

      level = readFromArduino[4];

    }

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    if (reset) {

      level = 0;

      reset = false;

    }

    let sendToArduino =

      animal + "," + led_button + "," + level + "," + option + "\n";

    print(sendToArduino);

    writeSerial(sendToArduino);

  }

}

​

​