p5.js Web Editor | Go Goals

xxxxxxxxxx
var gameState = "home";
var homeImg, abt1, abt2, abt3, pg = 1, board, controlImg;
​
function preload(){
  homeImg = loadImage("Home.jpg");
  abt1 = loadImage("About/About1.jpg");
  abt2 = loadImage("About/About2.jpg");
  abt3 = loadImage("About/About3.jpg");
  board = loadImage("Board.jpg");
  controlImg = loadImage("Controls.png");
}
​
function setup() {
  createCanvas(4961/4, 3508/4);
}
​
function draw() {
  background(255);
  if(gameState === "home"){
    home();
  }
  else if(gameState === "about"){
    about();
  }
  else if(gameState === "controls"){
    controls();
  }
  else{
    play();
  }
}
​
function home(){
  imageMode(CENTER);
  image(homeImg,width/4,height/2,2481/4,height);
  createBtn(3*width/4, height/4,400,100, 10,"red",1,0,"Play", 40, 0);
  createBtn(3*width/4, height/2,400,100, 10,"red",1,0,"About", 40, 0);
  createBtn(3*width/4, 3*height/4,400,100, 10,"red",1,0,"Controls", 40, 0);
  if(btnPressed(3*width/4, height/4,400,100)){
    setTimeout(function(){gameState = "play";}, 300);
  }
  if(btnPressed(3*width/4, height/2,400,100)){
    setTimeout(function(){gameState = "about";}, 300);
  }
  if(btnPressed(3*width/4, 3*height/4,400,100)){
    setTimeout(function(){gameState = "controls";}, 300);
  }
}
​
function createBtn(x, y, w, h, r, col, borderW, borderCol, txt, txtSize, txtCol){
  if(mouseX > x-w/2 && mouseX < x+w/2 && mouseY > y-h/2 && mouseY < y+h/2){
    if(mouseIsPressed){
      col = "#800000";
    }
    else{
      col = "#ff8080";
    }
  }
  rectMode(CENTER);
  strokeWeight(borderW);
  stroke(borderCol);
  fill(col);
  rect(x,y,w,h,r);
  noStroke();
  fill(txtCol);
  textSize(txtSize);
  textAlign(CENTER);
  let xy = txtSize/4;
  if(txtSize < 40){
    text(txt, x, y + xy);
  }
  else{
    text(txt, x, y + xy + 5);
  }
}
​
function btnPressed(x, y, w, h){
  if(mouseIsPressed && mouseX > x-w/2 && mouseX < x+w/2 && mouseY > y-h/2 && mouseY < y+h/2){
    return true;
  }
  else{
    return false;
  }
}
​
function about(){
  imageMode(CENTER);
  createBtn(width/12, height/16,200,100, 10,"red",1,0,"< Back to Home", 25, 0);
  if(btnPressed(width/12, height/16,200,100)){
    setTimeout(function(){gameState = "home";}, 300);
  }
  if(pg === 1){
    image(abt1,width/2,height/2,2481/4,height);
    createBtn(7*width/8, 7*height/8,200,100, 10,"red",1,0,"Next Page >", 25, 0);
    if(btnPressed(7*width/8, 7*height/8,200,100)){
      setTimeout(function(){pg = 2;}, 300);
    }
  }
  else if(pg === 2){
    image(abt2,width/2,height/2,2481/4,height);
    createBtn(7*width/8, 7*height/8,200,100, 10,"red",1,0,"Next Page >", 25, 0);
    if(btnPressed(7*width/8, 7*height/8,200,100)){
      setTimeout(function(){pg = 3;}, 300);
    }
    createBtn(width/8, 7*height/8,200,100, 10,"red",1,0,"< Previous Page", 25, 0);
    if(btnPressed(width/8, 7*height/8,200,100)){
      setTimeout(function(){pg = 1;}, 300);
    }
  }
  else{
    image(abt3,width/2,height/2,2481/4,height);
    createBtn(width/8, 7*height/8,200,100, 10,"red",1,0,"< Previous Page", 25, 0);
    if(btnPressed(width/8, 7*height/8,200,100)){
      setTimeout(function(){pg = 2;}, 300);
    }
  }
}
​
function controls(){
  imageMode(CENTER);
  image(controlImg, width/2, height/2, width, height)
  createBtn(width/12, height/16,200,100, 10,"red",1,0,"< Back to Home", 25, 0);
  if(btnPressed(width/12, height/16,200,100)){
    setTimeout(function(){gameState = "home";}, 300);
  }  
}
​
function play(){
  imageMode(CENTER);
  image(board,width/2,height/2,width,height);
  // start --> 86, 776 | end --> 541, 253
  console.log(mouseX, mouseY)
}
Cookies

Sketch Files

Console

Preview
