p5.js Web Editor | Towering beef

xxxxxxxxxx
//declaring global variables
let balls = [];
let paddles = [];
let menu = 0;
let intro;
let end;
let ballsound;
let mainsound;
let endsound;
let gameoverplayed = true;
​
//function to create paddles
function createPaddles() {
  paddles = [];
  paddles.push(new Paddle(width / 2, height - 20));
  paddles.push(new ScorePaddle(width / 2, 20));
}
​
//function to reset game
function resetGame() {
  gameoverplayed = true;
​
  // Empty the balls array and create new balls
  balls = [];
  createPaddles();
  for (let i = 0; i < 3; i++) {
    balls.push(new Ball(height / 4));
  }
}
​
function setup() {
  createCanvas(600, 600);
  resetGame();
  // Setting the volume of the main background sound
  mainsound.setVolume(0.4);
}
​
//function to load sound and images
function preload() {
  intro = loadImage("intro.jpg");
  end = loadImage("end.jpg");
  ballsound = loadSound("ballsound.mp3");
  mainsound = loadSound("backgroundsong.mp3");
  endsound = loadSound("gameover.mp3");
}
​
//function for intro screen
function introScreen() {
  background(intro);
  textSize(32);
  textAlign(CENTER, CENTER);
  fill(255);
}
​
//function for game over screen
function endScreen() {
  background(end);
  textSize(32);
  textAlign(CENTER, CENTER);
  fill(255);
}
​
function draw() {
  // Checking which menu should be displayed
  if (menu === 0) {
    introScreen();
  } else if (menu === 1) {
    checkKeyPressed();
    gameplay();
  } else if (menu === 2) {
    endScreen();
    playgameover();
    mainsound.stop();
  }
​
  // Check for key presses to change the menu or reset the game
  if (keyIsPressed && key === "s") {
    menu = 1;
    mainsound.play();
  }
​
  if (keyIsPressed && key === "q") {
    menu = 0;
    balls = [];
    setup();
  }
​
  if (keyIsPressed && key === "p") {
    menu = 1;
    balls = [];
    setup();
  }
}
​
// Function to play the gameover sound
function playgameover() {
  if (gameoverplayed == true) {
    endsound.play();
    gameoverplayed = false;
  }
}
​
// The gameplay function
function gameplay() {
  background(225);
​
  // Update and display ball
  for (let ball of balls) {
    ball.update();
    ball.display();
  }
​
  // Check for collisions between each ball and each paddle
  for (let ball of balls) {
    for (let paddle of paddles) {
      paddle.display();
      if (paddle instanceof ScorePaddle) {
        paddle.hit(ball);
      }
    }
  }
​
  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) {
    menu = 2;
  }
}
​
//function for key controlls
function checkKeyPressed() {
  if (keyIsDown(LEFT_ARROW)) {
    paddles[0].move(-20);
  } else if (keyIsDown(RIGHT_ARROW)) {
    paddles[0].move(20);
  }
​
  if (keyCode === 32) {
    balls[0].launch();
  }
}
​
//Class for ball
class Ball {
  constructor(y) {
    this.position = createVector(width / 2, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0.1);
    this.radius = 10;
    this.maxSpeed = 15;
    this.paddleIndex = -1;
  }
  //method to display ball
  display() {
    noStroke();
    fill(0);
    ellipse(this.position.x, this.position.y, this.radius * 2, this.radius * 2);
  }
​
  //method to update the ball's position and velocity
  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxSpeed);
    this.position.add(this.velocity);
  }
​
  //method to check if the ball has hit the wall
  hitsWall() {
    return (
      this.position.x < this.radius ||
      this.position.x > width - this.radius ||
      this.position.y < this.radius
    );
  }
​
  //method to check if the ball has bounced off the walls
  bounceWall() {
    if (this.position.x < this.radius) {
      this.position.x = this.radius;
      this.velocity.x *= -1;
      ballsound.play(); // add this line to play the sound
    } else if (this.position.x > width - this.radius) {
      this.position.x = width - this.radius;
      this.velocity.x *= -1;
      ballsound.play(); // add this line to play the sound
    } else {
      this.velocity.y *= -1;
    }
  }
​
  //function to check if the ball has collided with the paddles
  hitsPaddle(paddle) {
    let ballTop = this.position.y - this.radius;
    let ballBottom = this.position.y + this.radius;
    let ballLeft = this.position.x - this.radius;
    let ballRight = this.position.x + this.radius;
​
    let paddleTop = paddle.position.y - (paddle.height / 2 + this.radius);
    let paddleBottom = paddle.position.y + (paddle.height / 2 + this.radius);
    let paddleLeft = paddle.position.x - (paddle.width / 2 + this.radius);
    let paddleRight = paddle.position.x + (paddle.width / 2 + this.radius);
​
    if (
      ballBottom >= paddleTop &&
      ballTop <= paddleBottom &&
      ballRight >= paddleLeft &&
      ballLeft <= paddleRight
    ) {
      paddle.score++;
      ballsound.play(); // Add this line to play the sound
      return true;
    } else {
      return false;
    }
​
​
  }
//method for bouncing ball off the paddle
  bouncePaddle(paddle) {
    let angle = map(
      this.position.x - paddle.position.x,
      -paddle.width / 2,
      paddle.width / 2,
      -PI / 3,
      PI / 2
    );
​
    this.velocity.y *= -2;
    this.velocity.x = map(
      this.position.x - paddle.position.x,
      -paddle.width / 2,
      paddle.width / 2,
      -this.maxSpeed,
      this.maxSpeed
    );
​
    if (paddle instanceof MobilePaddle) {
      this.velocity.y = -this.velocity.y;
    }
  }
​
  offScreen() {
    return this.position.y > height + this.radius;
  }
​
  launch() {
    if (this.velocity.y === 0) {
      this.velocity = createVector(0, -this.maxSpeed);
    }
  }
}
​
//class for player paddle
class Paddle {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.width = 100;
    this.height = 20;
  }
//method to display paddle
  display() {
    noStroke();
    fill(0);
    rectMode(CENTER);
    rect(this.position.x, this.position.y, this.width, this.height, 20, 30);
  }
//method to move the paddle
  move(amount) {
    this.position.x += amount;
    this.position.x = constrain(
      this.position.x,
      this.width / 2,
      width - this.width / 2
    );
  }
}
​
//class for static paddle at the roof of the canvas
class ScorePaddle {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.width = 100;
    this.height = 20;
​
    this.score = 0;
  }
//method to display paddle
  display() {
    noStroke();
    fill(0);
    rectMode(CENTER);
    rect(this.position.x, this.position.y, this.width, this.height, 20, 30);
    textSize(20);
    textAlign(CENTER);
    fill(0);
    text("Score: " + this.score, 50, 20);
  }
//nethod to check if the ball has hit the paddle
  hit(ball) {
    if (
      ball.position.x > this.position.x - this.width / 2 &&
      ball.position.x < this.position.x + this.width / 2 &&
      ball.position.y - ball.radius < this.position.y + this.height / 2 &&
      ball.position.y + ball.radius > this.position.y - this.height / 2
    ) {
      ball.bouncePaddle(this);
    }
  }
}
//additional class for player paddle paddle
class MobilePaddle extends Paddle {
  constructor(x, y, speed) {
    super(x, y);
    this.speed = speed;
  }
​
  move(direction) {
    this.position.x += direction * this.speed;
    this.position.x = constrain(
      this.position.x,
      this.width / 2,
      width - this.width / 2
    );
  }
}
​
Cookies

Sketch Files

Console

Preview
