constructor(filename){

    this.image = loadImage(filename)

    this.width = 100

    this.height = 100

    this.x = 0

    this.y = 0

    this.highlight = 0 //1 is red highlight, 2 is green highlight

  }

  calcSize(){

    let newwidth = this.height*this.imagewidth/this.imageheight

    let newheight = this.width*this.imageheight/this.imagewidth

    this.width = max(1, min(newwidth, this.width))

    this.height = max(1, min(newheight, this.height))

  }

  setup(width, height){

    this.imagewidth = width

    this.imageheight = height

    this.calcSize()

  }

  draw(width = this.width, height = this.height){

    this.width = width

    this.height = height

    this.calcSize()

    image(this.image, this.x, this.y, this.width, this.height)

    if (this.highlight==1){

      push()

      noFill()

      strokeWeight(6)

      stroke(255,0,0)

      rect(this.x, this.y, this.width, this.height)

      pop()

    }

    if (this.highlight==2){

      push()

      noFill()

      strokeWeight(6)

      stroke(0,255, 100)

      rect(this.x, this.y, this.width, this.height)

      pop()

    }

​

  }

  isIn(x,y){

    this.calcSize()

    if (x>=this.x && y >=this.y && x<=this.x+this.width && y<=this.y+this.height)

      return true

    return false

  }

}

​

class Question{

  constructor(answerpool, question, answerindex){

    this.question = question

    this.answerpool = answerpool

    this.answerindex = answerindex

    this.optionchoice = []

    for (let i=0;i<answerpool.length;i++)

      if (i!=this.answerindex)

        this.optionchoice.push(i)

    this.attempts = 0

    this.generateOptions()

​

  }

  randomshuffle(iter=100){

    let ind1, ind2, temp

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

      ind1 = int(random(this.optionchoice.length))

      ind2 = int(random(this.optionchoice.length))

      temp = this.optionchoice[ind1]

      this.optionchoice[ind1] = this.optionchoice[ind2]

      this.optionchoice[ind2] = temp

    }

  }

  notIn(array, num){

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

      if (array[i]==num)

        return false

    }

    return true

  }

  generateOptions(){

    this.randomshuffle()

    this.options = []

    this.answer = int(random(4))

    for (let i=0;i<4;i++)

      this.options.push(this.answerpool[this.optionchoice[i]])

    this.options[this.answer] = this.answerpool[this.answerindex]

  }

  render(){

    //render question

    this.question.x = questionpane[0]+3

    this.question.y = questionpane[1]+3

    this.question.width = questionpane[2]- questionpane[0]-5

    this.question.height = questionpane[3] - questionpane[1]-5

    this.question.draw()

    //render options

    let owidth = (answerpane[2] - answerpane[0])/2 -5

    let oheight = (answerpane[3] -answerpane[1])/2 - 5

    this.options[0].x = answerpane[0] +3

    this.options[0].y = answerpane[1] + 3

    this.options[0].draw(owidth, oheight)

    this.options[1].x = answerpane[0] + owidth + 3

    this.options[1].y = answerpane[1] + 3

    this.options[1].draw(owidth, oheight)

    this.options[2].x = answerpane[0] +3

    this.options[2].y = answerpane[1] + oheight + 3

    this.options[2].draw(owidth, oheight)

    this.options[3].x = answerpane[0] + owidth + 3

    this.options[3].y = answerpane[1] + oheight + 3

    this.options[3].draw(owidth, oheight)

  }

  correct(){

    score = score + 1

    if (score<hiscore)

      gainscoresound.play()

    else hiscoresound.play()

    newQuestion()

    if (this.attempts==0)

      diff[index] += 3

    else if(this.attempts==1)

      diff[index] +=2

    else if(this.attempts==2)

      diff[index] +=3

    else diff[index] +=4

    setDiff()

  }

  wrong(){

    loseheartsound.play()

    life = life -1

    this.attempts++

  }

  mouseClick(x,y){

    if(this.options[0].isIn(x,y)){

      if (this.answer ==0){

        this.options[0].highlight[2]

        this.correct()

      }

      else {

        this.options[0].highlight[1]

        this.wrong()

      }

      this.options[0].draw()

    }

    else if (this.options[1].isIn(x,y)){

      if (this.answer ==1){

        this.options[1].highlight[2]

        this.correct()

      }

      else {

        this.options[1].highlight[1]

        this.wrong()

      }

      this.options[1].draw()

    }

    else if (this.options[2].isIn(x,y)){

      if (this.answer ==2){

        this.options[2].highlight[2]

        this.correct()

      }

      else {

        this.options[2].highlight[1]

        this.wrong()

      }

      this.options[2].draw()

    }

    else if (this.options[3].isIn(x,y)){

      if (this.answer ==3){

        this.options[3].highlight[2]

        this.correct()

      }

      else {

        this.options[3].highlight[1]

        this.wrong()

      }

      this.options[3].draw()

    }

  }

}

​

//picbuttons

let pictures=[], picturewords = [], postfix = [], prefix = []

let picturesJSON, picturewordsJSON, postfixJSON, prefixJSON

// UI elements

let scorepane, hiscorepane, lifepane, questionpane, answerpane

let score=0, maxlife = 5, life = maxlife, hiscore = 0

let gainscoresound, gameoversound, hiscoresound, hiscorewinsound, loseheartsound, ingame

​

let questions = [], question, index, diff = []

​

function setDiff(){

  for (let i=0;i<diff.length;i++)

    localStorage.setItem('d' + i.toString(), diff[i])

}

​

function getDiff(){

  for (let i=0; i<diff.length;i++)

    diff[i] = int(parseFloat(localStorage.getItem('d' + i.toString())))

}

​

function randPick(freq){

  // first invert

  let myfreq = []

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

    if (freq[i] == 0)

      myfreq.push(0)

    else myfreq.push(max(freq)-freq[i]+1)

  }

  //now cumulate

  myfreq.unshift(0)

  for (let i=1;i<myfreq.length;i++)

    myfreq[i] = myfreq[i] + myfreq[i-1]

​

  //exaggerate the effect

  for (let i=1;i<myfreq.length;i++)

    myfreq[i]*=100

  //now pick

  let pick = random(max(myfreq))

  //find index

  let index = 0

  for (let i=0;i<myfreq.length-1;i++){

    if(pick>=myfreq[i]&&pick<myfreq[i+1])

      return i

  }

}

​

function preload(){

  if (localStorage.getItem('hiscore')==null){

    hiscore = 0

    localStorage.setItem('hiscore',0)

  }

  else hiscore = localStorage.getItem('hiscore')

  // load all sounds

  gainscoresound = loadSound('sounds/gainscore.mp3')

  gameoversound = loadSound('sounds/gameover.mp3')

  hiscoresound = loadSound('sounds/hiscore.mp3')

  hiscorewinsound = loadSound('sounds/hiscorewin.mp3')

  loseheartsound = loadSound('sounds/loseheart.mp3')

  ingame = loadSound('sounds/deathparade.mp3')

​

  // load all the json files

  picturesJSON = loadJSON('pictures.json')

  picturewordsJSON = loadJSON('picturewords.json')

  postfixJSON = loadJSON('postfix.json')

  prefixJSON = loadJSON('prefix.json')

  // load all the picbuttons

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

    file = ('00' + i).substr(-2) + '.png'

    filename = 'pictures/' + file

    pictures.push(new PicButton(filename))

    filename = 'picturewords/' + file

    picturewords.push(new PicButton(filename))

  }

  for (let i=1; i<=20;i++){

    file = ('00' + i).substr(-2) + '.png'

    filename = 'postfix/' + file

    postfix.push(new PicButton(filename))

    filename = 'prefix/' + file

    prefix.push(new PicButton(filename))    

  }

  //create all questions

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

    questions.push(new Question(picturewords, pictures[i], i))

  }

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

    questions.push(new Question(prefix, postfix[i], i))

​

  }

  //local storage of difficulties

  for (let i=0;i<questions.length;i++)

      diff.push(0)

  if (localStorage.getItem('first')==null){//playing for the first time

    localStorage.setItem('first', false)

    setDiff()

  }

  else getDiff()

​

}

​

function newQuestion(){

  //always maintain 2 1 difficulty if possible

  let count = 0

  //count how many 1s are there

  for (let i=0;i<diff.length;i++)

    if (diff[i]==1)

      count++

  //keep at least 2 1 difficulty

  for (let i=0; i<diff.length && count<1;i++){

    if (diff[i]==0){

      diff[i]=1

      count++

    }

  }

  setDiff()

  index = randPick(diff)

  question = questions[index]

  question.attempts = 0

  question.generateOptions()

}

​

​

function setup() {

  ingame.play()

  // setup all the picbuttons

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

    pictures[i].setup(picturesJSON[i][0], picturesJSON[i][1])

    picturewords[i].setup(picturewordsJSON[i][0], picturewordsJSON[i][1])

  }

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

    prefix[i].setup(prefixJSON[i][0], prefixJSON[i][1])

    postfix[i].setup(postfixJSON[i][0], postfixJSON[i][1])

  }

  createCanvas(windowWidth, windowHeight);

  scorepane = [0,0,width/4, height/10]

  hiscorepane = [width/4, 0, width/4, height/10]

  lifepane = [width/2, 0, width/2, height/10]

  questionpane = [0, height/10, width, height/2]

  answerpane = [0, height/2, width, height]

  ingame.setVolume(0.35)

  newQuestion()

}

​

function drawUI(){

  background(220)

  push()

  stroke(0)

  fill(255)

  rect(scorepane[0], scorepane[1], scorepane[2], scorepane[3])

  rect(hiscorepane[0], hiscorepane[1], hiscorepane[2], hiscorepane[3])

  rect(lifepane[0], lifepane[1], lifepane[2], lifepane[3])

  rect(questionpane[0], questionpane[1], questionpane[2], questionpane[3])

  rect(answerpane[0], answerpane[1], answerpane[2], answerpane[3])

  //draw the lives

  lifestring = "  "

  for (let i = 0; i<life; i++)

    lifestring = lifestring + '\u{1F496}'

  for (let i=0; i<maxlife-life; i++)

    lifestring = lifestring + '\u{1F5A4}'

  textAlign(LEFT, CENTER)

  textSize((lifepane[3]-lifepane[1])*0.7)

  text(lifestring, lifepane[0], lifepane[3]/2)

  //write the score

  textAlign(RIGHT, CENTER)

  textSize((scorepane[3]-scorepane[1])*0.6)

  text(score.toString() + '  ', scorepane[0] + scorepane[2], scorepane[1] + scorepane[3]/2)

  // write the hiscore

  fill(100, 0, 200)

  textAlign(RIGHT, CENTER)

  textSize((hiscorepane[3] - hiscorepane[1])*0.6)

  text(hiscore.toString() + ' ', hiscorepane[0] + hiscorepane[2], hiscorepane[1] + hiscorepane[3]/2)

  pop()

}

​

function drawGameEnd(){

  background(225)

  gameoversound.play()

  textSize(min(width, height)/7)

  fill(255,0,0)

  textAlign(CENTER, CENTER)

  text('\u{1F4A3}\u{1F494}\nGAME \nOVER!! \n Your score \n is ' + score.toString(),width/2,height/2)

  noLoop()

}

​

function drawHiScore(){

  background(225)

  hiscorewinsound.play()

  textSize(min(width, height)/7)

  fill(0,200,100)

  textAlign(CENTER, CENTER)

  text('\u{1F60D}\nHi Score! \n ' + score.toString(), width/2, height/2)

  noLoop()

}

​

function gameEnd(){

  ingame.stop()

  if (score<=hiscore)

    drawGameEnd()

  else {

    localStorage.setItem('hiscore', score)

    drawHiScore()

  }

}

​

function draw() {

  if (!ingame.isPlaying())

    ingame.play()

  strokeWeight(3)

  if(life>0){

    drawUI()

    question.render()

  }

  else

    gameEnd()

​

  // image(p1.image,p1.x, p1.y, p1.width, p1.height)

}

​

function mouseClicked(){

  question.mouseClick(mouseX, mouseY)

}