Model 1# boxed game

let ball;
let hoop;
let score =0;
let startTime;
let gameDuration = 100;
let xpos, ypos;
let soundFile;

//--------------------------------------
function setup() {
  createCanvas(600, 400);

  
  ball = new Ball();
  hoop = new Hoop(width - 50, height / 2, 50, 25);
  
  let resetButton = createButton("Reset Score");
  resetButton.position(width/60, height-25);
  resetButton.mousePressed(resetScore);
  
  startTime = millis();
}
//--------------------------------------------------------
function draw() {
  background(255);

  ball.update();
  ball.display();
  ball.checkBoundaries();
  ball.applyFriction();

  
  hoop.display();
  if (ball.checkCollision(hoop)) {
    console.log("You scored!");
    score++;
  }
  textSize(24);
  fill(0, 0, 0);
  text("Score: " + score, 10, 30);
  
   let elapsedTime = (millis() - startTime) / 1000;
    if (elapsedTime >= gameDuration) {
    console.log("Time's up!");     
    noLoop();
    }
  
  text("Time remaining: " + (gameDuration - elapsedTime).toFixed(1), 350, 400);
  
}

//----------------------------------------------
function mousePressed() {
  ball.throw(createVector(mouseX, mouseY));
  let force = createVector(mouseX, mouseY);
  force.sub(ball.pos);
  force.normalize();
  force.mult(-0.2);
  ball.applyForce(force);
  soundFile.play();
}
//============================================================
class Ball {
  constructor() {
    this.pos = createVector(width/2, height/2);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0.98);
    this.friction = 0.98;
    this.airResistance = 0.999;
  }
//:::::::::::::::::::::::::::::::::::::::::::::::
  throw(target) {
    this.vel = p5.Vector.sub(target, this.pos);
    this.vel.setMag(5);
  }
//:::::::::::::::::::::::::::::::::::::::::::::::
  update() {
    let friction = this.vel.copy();
    friction.mult(-1);
    friction.normalize();
    friction.mult(this.friction);
    this.applyForce(friction);

    this.vel.mult(this.airResistance);
    this.pos.add(this.vel);
  }
//::::::::::::::::::::::::::::::::::::::::::::::
  display() {
    fill(255, 0, 0);
    ellipse(this.pos.x, this.pos.y, 25, 25);
  }
//:::::::::::::::::::::::::::::::::::::::::::
   checkBoundaries() {
    if (this.pos.x < 0 || this.pos.x > width) {
      this.vel.x *= -1;
    }
    if (this.pos.y < 0 || this.pos.y > height) {
      this.vel.y *= -1;
    }
  }
//::::::::::::::::::::::::::::::::::::::::::
    applyFriction() {
    let friction = this.vel.copy();
    friction.normalize();
    friction.mult(0.5);
    this.applyForce(friction);
  }
//:::::::::::::::::::::::::::::::::::::::
  checkCollision(hoop) {
    let x1 = this.pos.x;
    let y1 = this.pos.y;
    let x2 = hoop.x;
    let y2 = hoop.y;
    let w2 = hoop.width;
    let h2 = hoop.height;

    if (x1 > x2 && x1 < x2 + w2 && y1 > y2 && y1 < y2 + h2) 
      return true;
   else 
      return false;
  }
    
//:::::::::::::::::::::::::::::::::::
  applyForce(force) {
    this.acc.add(force);
  }
}
//---------------------------------------------------------
class Hoop {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y/2;
    this.width = width+width/2;
    this.height = height/6;
  }

  display() {
    fill(100, 100, 200);
    rect(this.x-this.width/2, this.y - this.height, this.width, this.height);   
}
}
//-------------------------------------------
function resetScore() {
  score = 0;
}