p5.js Web Editor | Hit The Island

xxxxxxxxxx
let balls = [];
let paddles = [];
let menu = 0;
​
function setup() {
  createCanvas(600, 600);
  for (let i = 0; i < 3; i++) {
    balls.push(new Ball(random(width), 30));
  }
  paddles.push(new Paddle(width / 2, height - 20));
}
​
function introScreen() {
  background("red");
}
​
function endScreen() {
  background("blue");
}
​
function draw() {
  if (menu == 0) {
    introScreen();
    if (mouseIsPressed) {
      menu = menu + 1;
      gameplay();
    }
  } else {
    if (menu == 1) {
      gameplay();
      if (balls.length === 0) {
        menu = menu + 1;
      }
    } else if (menu == 2) {
      endScreen();
      if (mouseIsPressed) {
        menu = 0;
      }
    }
  }
}
​
function gameplay() {
  background(51);
​
  
  for (let ball of balls) {
    ball.display();
    ball.update();
  }
​
​
  for (let paddle of paddles) {
    paddle.display();
  }
​
​
  for (let ball of balls) {
    if (ball.hitsWall()) {
      ball.bounceWall();
    }
    for (let paddle of paddles) {
      if (ball.hitsPaddle(paddle)) {
        ball.bouncePaddle(paddle);
      }
    }
  }
​
​
  for (let i = balls.length - 1; i >= 0; i--) {
    if (balls[i].offScreen()) {
      balls.splice(i, 1);
    }
  }
​
  if (balls.length === 0) {
    clear();
​
    if (mouseIsPressed) {
      balls.push(new Ball(random(width), 30));
    }
  }
}
​
function keyPressed() {
 
  if (keyCode === LEFT_ARROW) {
    paddles[0].move(-40);
  } else if (keyCode === RIGHT_ARROW) {
    paddles[0].move(40);
  }
​
​
  if (keyCode === 32) {
    balls[0].launch();
  }
}
​
class Ball {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0.1);
    this.radius = 10;
    this.maxSpeed = 10;
  }
​
  display() {
    noStroke();
    fill(255);
    ellipse(this.position.x, this.position.y, this.radius * 2, this.radius * 2);
  }
​
  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxSpeed);
    this.position.add(this.velocity);
  }
​
  hitsWall() {
    return (
      this.position.x < this.radius ||
      this.position.x > width - this.radius ||
      this.position.y < this.radius
    );
  }
​
  bounceWall() {
    if (this.position.x < this.radius) {
      this.position.x = this.radius;
      this.velocity.x *= -1;
    } else if (this.position.x > width - this.radius) {
      this.position.x = width - this.radius;
      this.velocity.x *= -1;
    } else {
      this.velocity.y *= -1;
    }
  }
​
  hitsPaddle(paddle) {
    let distance = dist(
      this.position.x,
      this.position.y,
      paddle.position.x,
      paddle.position.y
    );
    return (
      distance < this.radius + paddle.width / 2 &&
      this.position.y < paddle.position.y
    );
  }
​
  bouncePaddle(paddle) {
    let angle = map(
      this.position.x - paddle.position.x,
      -paddle.width / 2,
      paddle.width / 2,
      -PI / 3,
      PI / 2
    );
​
    this.velocity.y *= -1;
    this.velocity.x = map(
      this.position.x - paddle.position.x,
      -paddle.width / 2,
      paddle.width / 2,
      -this.maxSpeed,
      this.maxSpeed
    );
  }
​
  offScreen() {
    return this.position.y > height + this.radius;
  }
​
  launch() {
    if (this.velocity.y === 0) {
      this.velocity = createVector(0, -this.maxSpeed);
    }
  }
}
​
class Paddle {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.width = 100;
    this.height = 20;
  }
​
  display() {
    noStroke();
    fill(255);
    rectMode(CENTER);
    rect(this.position.x, this.position.y, this.width, this.height, 20, 30);
  }
​
  move(amount) {
    this.position.x += amount;
    this.position.x = constrain(
      this.position.x,
      this.width / 2,
      width - this.width / 2
    );
  }
}
​
Cookies

Sketch Files

Console

Preview
