let positionX = 10;

let particles = [];

let ramp = false;

let rampC = false;

let input, button, ans;

let constrainX = 600;

let bitFont;

let fontSize = 28;

let sceneNum=0;

​

function preload() {

  bitFont = loadFont('PixelFont.ttf');

}

​

function setup() {

  createCanvas(600, 400);

    textFont(bitFont);

​

  input = createInput();

  input.position(20, 175);

​

​

​

  me = new Me()

  road = new Road()

​

  for (let i = 0; i < 5; i += 2) {

    particles[i] = new Particles(20, 20, 20)

  }

​

  // restart = new Restart(260, 180, 90, 30);

  question = new Question()

}

​

​

function answer() {

  const response = input.value();

​

  for (let i = 0; i < 250; i += 50) {

​

    if (response == 'a') {

      fill(255)

      rect(200 + i, 350, 50, 50);

      ramp = true;

​

    } else if (response == 'b') {

      fill(255)

      rect(200, 50 + i, 50, 50)

      ramp = false;

​

    } else if (response == 'c') {

      fill(255)

      rect(200, 50, 50, 50 * i)

      rampC = !rampC;

​

    } else {

      ramp = false;

      push();

      fill(65, 170, 166)

      textSize(25)

      text('Choose one of the options', 20, 20)

      pop();

    }

  }

​

}

​

function draw() {

  background(0);

​

  me.body();

  me.move();

  me.home();

  me.checkCollision();

  road.body();

  // road.move();

  // restart.body();

  question.body();

​

  for (let i = 0; i < 5; i += 2) {

​

    particles[i].body();

    particles[i].move();

​

  }

  answer();

  hint();

  }

  switch (sceneNum) {

​

    case 0:

      console.log('scene 0')

      break;

    case 1:

      console.log('scene 1')

      break;

    case 2:

      console.log('scene 2')

  }

  function scene0() {

  background(0, 0, 255);

  console.log('scene 1');

}

​

function scene1() {

  background(255, 0, 0);

  console.log('scene 2');

}

​

function scene2() {

  background(0, 0, 255);

  console.log('scene 3');

}

​

​

​

class Particles {

​

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.w = 10;

    this.h = 10;

    this.c = color(random(255), random(255), random(255));

  }

​

​

  body() {

​

    fill(this.c)

    ellipse(this.x, this.y, this.w, this.h)

​

  }

  move() {

    this.y += 0.1

    this.x -= 0.1

​

    if (this.y > height) {

      this.y = 200

    }

​

  }

​

}

​

class Road {

​

  constructor() {

    this.x = 0;

    this.y = 350;

    this.w = width;

    this.h = 50;

    this.c = color(60);

​

​

  }

  body() {

    fill(this.c)

    rect(0, 350, 200, 50)

    rect(450, 350, 250, 50)

​

    push()

    fill(40);

​

  }

​

  move() {

    this.x -= 10;

​

    if (this.x < -200) {

      this.x = 350;

    }

  }

}

​

​

​

class Me {

​

  constructor(xx, xc, c) { // a special method that creates the car object

​

    this.x = 10;

    this.y = 300;

    this.w = 50;

    this.h = 50;

    this.c = color(0, 255, 0);

​

  }

​

  body() {

    fill(this.c);

    this.xc = constrain(positionY, 260, 400);

    this.xx = constrain(positionX, 10, constrainX);

    rect(this.xx, this.xc, this.w, this.h);

  }

​

  move() {

​

    //right

    if (keyIsDown(39)) {

      positionX += 3;

​

    }

    //falls if no ramp

    if (keyIsDown(39) && this.xx > 180 && ramp == false) {

      positionY += 20;

    }

    //walks on ramp if ramp is true

    if (keyIsDown(39) && ramp == true) {

      positionX += 3;

      constrainX = 650;

​

    }

    if (keyIsDown(39) && this.xx > 600) {

      positionX += 3;

      this.xx = 10;

    }

    if (keyIsDown(39) && rampC == true) {

      positionX += 3;

      constrainX = 150;

    }

​

    //back

    if (keyIsDown(37)) {

      positionX -= 7;

    }

    if (keyIsDown(37) && this.xx > 180 && this.xx > 350 && ramp == false) {

      positionY += 20;

    }

​

    if (positionY > 360) {

      positionX = 10

      positionY = 300

    }

​

// console.log(positionX)

​

    // jump

    //     if (keyIsDown(38)) {

    //       positionY -= 8;

    //       positionX++;

​

    //     } else {

    //       positionY = 300;

    //     }

​

  }

​

  checkCollision() {

    if (this.xc < 120) {

      console.log('bumped' + this.xx);

      this.w++;

​

      if (this.w > 90) {

        console.log('you dead')

        this.xx = 10;

      }

​

​

​

    }

  }

  home() {

    if (positionX > 560) {

      sceneNum++

      scene1();

      // console.log(sceneNum)

    }

​

​

  }

​

}

​

​

​

class Question {

​

  constructor() {

    this.x = 0;

    this.y = 350;

    this.w = width;

    this.h = 50;

    this.c = color(60);

    //pot holes

​

  }

  body() {

    push();

    fill(255)

    text("for (let x = 0; x < 250; x += 50){", 20, 80)

    text("a. rect(200 + x, 350, 50, 50);}", 20, 110)

    text("b. rect(200, 50 + x, 50, 50);}", 20, 135)

    text("c. rect(200, 50, 50, 50 * x)}", 20, 160)

​

    rect(0, 350, 200, 50)

    rect(450, 350, 250, 50)

    textSize(fontSize);

    // text("What is the most efficient way to build the suggested bridge?", 20, 50)

    text("Which option would build the suggested bridge?", 20, 50)

​

    push()

    fill(40);

    pop();

​

  }

​

​

}

​

// class Restart {

​

//   constructor(x, y, w, h) { // a special method that creates the object

​

//     this.x = x;

//     this.y = y;

//     this.w = w;

//     this.h = h;

//   }

​

//   body() {

//     fill(100, 101, 226);

//     rect(this.x, this.y, this.w, this.h);

​

//     fill(255);

//     textAlign(CENTER)

//     text("Play again", 300, height / 2);

//   }

​

//   checkClicked() {

//     if (scene3_X > this.x && scene3_X < this.x + this.w &&

//       scene3_Y > this.y && scene3_Y < this.y + this.h) {

//       console.log('again button clicked');

//       sceneNum = 1;

​

//       scene3_X = scene2_X;

//       scene3_Y = scene2_Y;

​

//       sound_track.loop();

//     }

//   }

// }

​

​

function hint() {

  fill(255, 255, 255, 40)

  for (let i = 0; i < 250; i += 50) {

​

    rect(200 + i, 350, 50, 50)

  }

​

}