ChaimStanton/index.css

## index.css
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color:white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color:#444;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My first dynamic p5.js webpage</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<h1>P5.js Example 3 - AI Pong</h1>
	<p>
		A one-player version of the pong game where you compete against an AI
	</p>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="draw.js"></script>

</html>

## index.js
// This section sets up the variables for the ball
var ballX = 50; // sets the ball x coordinate to 50
var ballY = 50; // sets the balls y coordinate to 50
var ballSpeedX = 5; //sets the increasing speed amount, by changing the x axis value
var ballSpeedY = 3;// sets the increasing speed amount, by changing the y axis value

// This section sets up the player vairables
var player1Score = 0; //this is the value for the first player's score, you
var player2Score = 0;// this is the value for the second player's score, the program

// this makes a constant
const WINNING_SCORE = 3; // this is the value one of the players need to win

// this makes a boolean for if the player has won
var showingWinScreen = false;//it is false since no one has won

// this creates the paddles that move
var paddle1Y; //this creates the paddle for player 1
var paddle2Y; //this creates the paddle for player 2
const PADDLE_HEIGHT = 100; //this creates the constant height of a paddle, which will be used for later in the program for both paddles, so it can't change
const PADDLE_THICKNESS = 10;//this creates the constant width(thickness) of a paddle, for use later, so it can't change

function setup() {
  // This is run once at the beginning of the program
  createCanvas(800, 600);//width and height of the canvas
  paddle2Y = height / 2 - PADDLE_HEIGHT / 2; //this divides the height by 2 then divides paddle height by true then it subracts the first part by the second part and puts it in the vairable paddle2Y, this is what the computer uses to set where it is
  textAlign(CENTER); // sets the text to allign to the center to tell the user for the score
}

function draw() {
  //this moves 60bps and means that it repeats until program is stopped
  background(72,86,87);//background colour
  moveEverything(); // this calls the function for all the pices to move (Changes the values )
  drawEverything(); // this calls the function for outpututing everythig
}

function moveEverything() {
  //this is the function to move everything, ball and paddles
  if (showingWinScreen) {
    return; //if it is true then it puts winning screen but if false then doesn't and continues with the function
  }

  ballX += ballSpeedX; //this increases the balls speed by changing its x axis
  ballY += ballSpeedY; // this also increases the balls speed by changing its Y axis
  paddle1Y = mouseY - PADDLE_HEIGHT / 2; //moves the y axis using the mouse

  computerMovement(); //calls on computerMovement function

  var damp = 0.2; //creates a variable used for later

  if (ballX < 0) {
    if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
      ballSpeedX *= -1; //makes it look like it bounces off the wall and means that the paddle1Y missed the ball
      var deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
      ballSpeedY = deltaY * damp;//makes speed decrease(y axis) and move away
    }
    else {
      player2Score++; //adds 1 to score of second player
      ballReset(); //goes to the function
    }
  }

  if (ballX > width) {
    if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
      ballSpeedX *= -1; //makes it look like it bounces off the wall and means the paddle2Y missed ball
      var deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);
      ballSpeedY = deltaY * damp; //makes speed decrease(y axis) and move away
    }
    else {
      player1Score++; //adds 1 to score of one player
      ballReset();//goes to the function
    }
  }

  if (ballY > height) {
    ballY = height;//puts it back to that (max) height point
    ballSpeedY *= -1;//makes it look like ball bounces of one of the heights of canvas
  }

  if (ballY < 0) {
    ballY = 0;//puts it back to 0
    ballSpeedY *= -1;//makes it look like ball bounces of one of the heights of canvas
  }
}

function computerMovement() {
  var paddle2YCenter = paddle2Y + PADDLE_HEIGHT / 2; //creates a center to the paddle so it know where the paddle is

  if (paddle2YCenter < ballY - PADDLE_HEIGHT / 3) {
    paddle2Y += 6; //this makes the paddle move when ball moves
  }
  else {
    if (paddle2YCenter > ballY + PADDLE_HEIGHT / 3) {
      paddle2Y -= 6;//this makes the paddle move when ball moves
    }
  }
}

function ballReset() {
  if (player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
    showingWinScreen = true; //this shows winning screen only if one of the players have the winning score
  }

  ballSpeedX *= -1; //this makes the paddle move backwards
  ballX = width / 2; //makes the paddle move to half of width so the middle of width
  ballY = height / 2;//makes the paddle move to half of height so the middle of height
}

function drawEverything() {
  fill(255); //this is for colouring the text
  noStroke();//no thickness

  if (showingWinScreen) {
    textSize(20); //makes text size to 20
    if (player1Score >= WINNING_SCORE) {
      text("left player won!", 200, 200); //this is the text shown on screen and only if you have won
    }
    else {
      if (player2Score >= WINNING_SCORE) {
        text("right player won!", width - 200, 200);//this is the text shown on screen and only if the computer has won
      }
    }

    textSize(14);//makes the textsize smaller
    text("click to start new game", width / 2, height - 200); //shows the text for starting game again
    return;//goes back to draw
  }

  fill(127,202,177); //this coloures the rectangle

  for (var i = 0; i < height; i += 40) {
    rect(width / 2 - 1, i, 2, 20);
  }

  rect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT); //makes paddle 1
  rect(width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT); //makes paddle 2

  fill(250,251,223);
  ellipse(ballX, ballY, 15, 15); //makes a circle as the ball

  textSize(20);//textsize made to 20
  text(player1Score, 200, 100);//puts the players score at that coordinate
  text(player2Score, width - 200, 100);//puts the players score at that coordinate
}

function mouseReleased() {
  if (showingWinScreen) {
    player1Score = 0;
    player2Score = 0;
    showingWinScreen = false;//this part of code restarts the game
  }
}
	/* Fonts from Google Fonts - more at https://fonts.google.com */
	@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
	@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

	body {
	background-color:white;
	font-family: "Open Sans", sans-serif;
	padding: 5px 25px;
	font-size: 18px;
	margin: 0;
	color:#444;
	}

	h1 {
	font-family: "Merriweather", serif;
	font-size: 32px;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My first dynamic p5.js webpage</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<h1>P5.js Example 3 - AI Pong</h1>
	<p>
	A one-player version of the pong game where you compete against an AI
	</p>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
	<script src="draw.js"></script>

	</html>
	// This section sets up the variables for the ball
	var ballX = 50; // sets the ball x coordinate to 50
	var ballY = 50; // sets the balls y coordinate to 50
	var ballSpeedX = 5; //sets the increasing speed amount, by changing the x axis value
	var ballSpeedY = 3;// sets the increasing speed amount, by changing the y axis value

	// This section sets up the player vairables
	var player1Score = 0; //this is the value for the first player's score, you
	var player2Score = 0;// this is the value for the second player's score, the program

	// this makes a constant
	const WINNING_SCORE = 3; // this is the value one of the players need to win

	// this makes a boolean for if the player has won
	var showingWinScreen = false;//it is false since no one has won

	// this creates the paddles that move
	var paddle1Y; //this creates the paddle for player 1
	var paddle2Y; //this creates the paddle for player 2
	const PADDLE_HEIGHT = 100; //this creates the constant height of a paddle, which will be used for later in the program for both paddles, so it can't change
	const PADDLE_THICKNESS = 10;//this creates the constant width(thickness) of a paddle, for use later, so it can't change

	function setup() {
	// This is run once at the beginning of the program
	createCanvas(800, 600);//width and height of the canvas
	paddle2Y = height / 2 - PADDLE_HEIGHT / 2; //this divides the height by 2 then divides paddle height by true then it subracts the first part by the second part and puts it in the vairable paddle2Y, this is what the computer uses to set where it is
	textAlign(CENTER); // sets the text to allign to the center to tell the user for the score
	}

	function draw() {
	//this moves 60bps and means that it repeats until program is stopped
	background(72,86,87);//background colour
	moveEverything(); // this calls the function for all the pices to move (Changes the values )
	drawEverything(); // this calls the function for outpututing everythig
	}

	function moveEverything() {
	//this is the function to move everything, ball and paddles
	if (showingWinScreen) {
	return; //if it is true then it puts winning screen but if false then doesn't and continues with the function
	}

	ballX += ballSpeedX; //this increases the balls speed by changing its x axis
	ballY += ballSpeedY; // this also increases the balls speed by changing its Y axis
	paddle1Y = mouseY - PADDLE_HEIGHT / 2; //moves the y axis using the mouse

	computerMovement(); //calls on computerMovement function

	var damp = 0.2; //creates a variable used for later

	if (ballX < 0) {
	if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
	ballSpeedX *= -1; //makes it look like it bounces off the wall and means that the paddle1Y missed the ball
	var deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
	ballSpeedY = deltaY * damp;//makes speed decrease(y axis) and move away
	}
	else {
	player2Score++; //adds 1 to score of second player
	ballReset(); //goes to the function
	}
	}

	if (ballX > width) {
	if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
	ballSpeedX *= -1; //makes it look like it bounces off the wall and means the paddle2Y missed ball
	var deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);
	ballSpeedY = deltaY * damp; //makes speed decrease(y axis) and move away
	}
	else {
	player1Score++; //adds 1 to score of one player
	ballReset();//goes to the function
	}
	}

	if (ballY > height) {
	ballY = height;//puts it back to that (max) height point
	ballSpeedY *= -1;//makes it look like ball bounces of one of the heights of canvas
	}

	if (ballY < 0) {
	ballY = 0;//puts it back to 0
	ballSpeedY *= -1;//makes it look like ball bounces of one of the heights of canvas
	}
	}

	function computerMovement() {
	var paddle2YCenter = paddle2Y + PADDLE_HEIGHT / 2; //creates a center to the paddle so it know where the paddle is

	if (paddle2YCenter < ballY - PADDLE_HEIGHT / 3) {
	paddle2Y += 6; //this makes the paddle move when ball moves
	}
	else {
	if (paddle2YCenter > ballY + PADDLE_HEIGHT / 3) {
	paddle2Y -= 6;//this makes the paddle move when ball moves
	}
	}
	}

	function ballReset() {
	if (player1Score >= WINNING_SCORE \|\| player2Score >= WINNING_SCORE) {
	showingWinScreen = true; //this shows winning screen only if one of the players have the winning score
	}

	ballSpeedX *= -1; //this makes the paddle move backwards
	ballX = width / 2; //makes the paddle move to half of width so the middle of width
	ballY = height / 2;//makes the paddle move to half of height so the middle of height
	}

	function drawEverything() {
	fill(255); //this is for colouring the text
	noStroke();//no thickness

	if (showingWinScreen) {
	textSize(20); //makes text size to 20
	if (player1Score >= WINNING_SCORE) {
	text("left player won!", 200, 200); //this is the text shown on screen and only if you have won
	}
	else {
	if (player2Score >= WINNING_SCORE) {
	text("right player won!", width - 200, 200);//this is the text shown on screen and only if the computer has won
	}
	}

	textSize(14);//makes the textsize smaller
	text("click to start new game", width / 2, height - 200); //shows the text for starting game again
	return;//goes back to draw
	}

	fill(127,202,177); //this coloures the rectangle

	for (var i = 0; i < height; i += 40) {
	rect(width / 2 - 1, i, 2, 20);
	}

	rect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT); //makes paddle 1
	rect(width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT); //makes paddle 2

	fill(250,251,223);
	ellipse(ballX, ballY, 15, 15); //makes a circle as the ball

	textSize(20);//textsize made to 20
	text(player1Score, 200, 100);//puts the players score at that coordinate
	text(player2Score, width - 200, 100);//puts the players score at that coordinate
	}

	function mouseReleased() {
	if (showingWinScreen) {
	player1Score = 0;
	player2Score = 0;
	showingWinScreen = false;//this part of code restarts the game
	}
	}