constructor(IB,S1,S2,F1){//receive all needed variables as in images and sound

    this.BG=IB;//the background

    this.S1=S1;

    this.playbool=false;//boolean to start game

    this.helpbool=false;//boolean to open help page

  }

  show(){//this shows the designs in the page

    this.BG.resize(windowWidth,windowHeight);

    image(this.BG,0,0);//displayign background

    textAlign(CENTER);

    this.createhelp();//calling the help function for the help page

    this.playbox();//calling the playbox buttin function

    return this.playbool;//this returns true if the play button is pressed

  }

  playbox(){

    fill(150,180,40);

      if(mouseX>windowWidth*0.4&&mouseX<(windowWidth*0.4)+350&&mouseY>windowHeight*0.7&&mouseY<(windowHeight*0.7)+150){

      fill(150,0,0);//creating the hover effect

    }

    if(mouseX>windowWidth*0.4&&mouseX<(windowWidth*0.4)+350&&mouseY>windowHeight*0.7&&mouseY<(windowHeight*0.7)+150&&mouseIsPressed){

      S2.pause();// the play is pressed, play pause the background music and play the in game music

      this.S1.play();//pausing the first sound

      this.playbool=true;//sets the playboolean to true 

    }

    rect(windowWidth*0.4,windowHeight*0.7,350,150,60);

    fill(0);

    textFont(F1);

    textSize(70);

    textAlign(LEFT);

    text("Play",windowWidth*0.4+160,windowHeight*0.7+90);

  }

  createhelp(){

    fill(100);

    if(dist(mouseX,mouseY,windowWidth*0.8,windowHeight*0.3)<=30){

      fill(60);//create hover effect

    }

    if(dist(mouseX,mouseY,windowWidth*0.8,windowHeight*0.3)<=30&&mouseIsPressed){

      this.helpbool=true;//set boolean to open help page

    }

    circle(windowWidth*0.8,windowHeight*0.3,60);//these following code just creates the help button

    fill(255,255,0);

    textSize(30);

    textFont(NORMAL);

    text("?",windowWidth*0.8,windowHeight*0.3);

  }

}