Week4 Minigame SPACE PONG

✨ นายไตรสิทธิ์ ปรางแก้ว

<html>
<head>
	<title>Let's Start</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
  <style>
    body {
	text-align: center;
	background-image: url("https://media.discordapp.net/attachments/798210308744806400/807547910307971092/315287.jpg?width=861&height=676");
	background-size: 2200px 1080px;
   background-repeat: no-repeat;
}

.h1{
	color: #FFFFFF;
   font-family: 'Russo One', sans-serif;
   font-weight: normal;
   text-align: center;
   font-size: 4em;
}
.h2 {
  color: #FFFFFF;
  font-family: 'Russo One', sans-serif;
  font-weight: normal;
  text-align: center;
  font-size: 2em;
}
.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  font-family: Raleway;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-code {
  background-color: red;
}

.side-link-text {
  margin-left: 10px;
  font-size: 15px;
}

</style>
</head>
<body>
<h1 class="h1"> SPACE PONG GAME </h1>
		<h2 class="h2"> Team P'Getty GroupC </h2>
		<canvas class="canvas"></canvas>
 
	<div class="side-links">
        <a href="https://codepen.io/gdube/pen/JybxxZ"target="_blank" class="side-link side-link-code">
          <span class="side-link-text">CREDEIT CODE</span>
        </a>
  <script>
  // Global Variables
var DIRECTION = {
	IDLE: 0,
	UP: 1,
	DOWN: 2,
	LEFT: 3,
	RIGHT: 4
};

var rounds = [5,5,5,5,5];
var colors = ['#451775', '#2ecc71', '#3498db', '#1d71b5', '#9b59b6'];

// The ball object (The cube that bounces back and forth)
var Ball = {
	new: function (incrementedSpeed) {
		return {
			width: 18,
			height: 18,
			x: (this.canvas.width / 2) - 9,
			y: (this.canvas.height / 2) - 9,
			moveX: DIRECTION.IDLE,
			moveY: DIRECTION.IDLE,
			speed: incrementedSpeed || 7 
		};
	}
};

// The paddle object (The two lines that move up and down)
var Paddle = {
	new: function (side) {
		return {
			width: 18,
			height: 200,
			x: side === 'left' ? 150 : this.canvas.width - 150,
			y: (this.canvas.height / 2) - 35,
			score: 0,
			move: DIRECTION.IDLE,
			speed: 10,
			winround: 0
		};
	}
};

var Game = {
	initialize: function () {
		this.canvas = document.querySelector('canvas');
		this.context = this.canvas.getContext('2d');

this.canvas.width = 1400;
		this.canvas.height = 1000;

this.canvas.style.width = (this.canvas.width / 2) + 'px';
		this.canvas.style.height = (this.canvas.height / 2) + 'px';

this.player = Paddle.new.call(this, 'left');
		this.paddle = Paddle.new.call(this, 'right');
		this.ball = Ball.new.call(this);
		
		
		this.paddle.speed = 8;
		this.running = this.over = false;
		this.turn = this.player;
		this.timer = this.round = 0;
		this.color = '#2c3e80';

Pong.menu();
		Pong.listen();
	},

endGameMenu: function (text) {
		// Change the canvas font size and color
		Pong.context.font = '50px Courier New';
		Pong.context.fillStyle = this.color;

// Draw the rectangle behind the 'Press any key to begin' text.
		Pong.context.fillRect(
			Pong.canvas.width / 2 - 350,
			Pong.canvas.height / 2 - 48,
			700,
			100
		);

// Change the canvas color;
		Pong.context.fillStyle = '#ffffff';

// Draw the end game menu text ('Game Over' and 'Winner')
		Pong.context.fillText(text,
			Pong.canvas.width / 2,
			Pong.canvas.height / 2 + 15
		);

setTimeout(function () {
			Pong = Object.assign({}, Game);
			Pong.initialize();
		}, 3000);
	},

menu: function () {
		// Draw all the Pong objects in their current state
		Pong.draw();

// Change the canvas font size and color
		this.context.font = '50px Courier New';
		this.context.fillStyle = this.color;

// Draw the rectangle behind the 'Press any key to begin' text.
		this.context.fillRect(
			this.canvas.width / 2 - 350,
			this.canvas.height / 2 - 48,
			700,
			100
		);

// Change the canvas color;
		this.context.fillStyle = '#ffffff';

// Draw the 'press any key to begin' text
		this.context.fillText('Press any key to begin',
			this.canvas.width / 2,
			this.canvas.height / 2 + 15
		);
	},

// Update all objects (move the player, paddle, ball, increment the score, etc.)
	update: function () {
		if (!this.over) {
			// If the ball collides with the bound limits - correct the x and y coords.
			if (this.ball.x <= 0) Pong._resetTurn.call(this, this.paddle, this.player);
			if (this.ball.x >= this.canvas.width - this.ball.width) Pong._resetTurn.call(this, this.player, this.paddle);
			if (this.ball.y <= 0) this.ball.moveY = DIRECTION.DOWN;
			if (this.ball.y >= this.canvas.height - this.ball.height) this.ball.moveY = DIRECTION.UP;

// Move player if they player.move value was updated by a keyboard event
			if (this.player.move === DIRECTION.UP) this.player.y -= this.player.speed;
			else if (this.player.move === DIRECTION.DOWN) this.player.y += this.player.speed;
			// Move player if they player.move value was updated by a keyboard event
			if (this.paddle.move === DIRECTION.UP) this.paddle.y -= this.paddle.speed;
			else if (this.paddle.move === DIRECTION.DOWN) this.paddle.y += this.paddle.speed;

// On new serve (start of each turn) move the ball to the correct side
			// and randomize the direction to add some challenge.
			if (Pong._turnDelayIsOver.call(this) && this.turn) {
				this.ball.moveX = this.turn === this.player ? DIRECTION.LEFT : DIRECTION.RIGHT;
				this.ball.moveY = [DIRECTION.UP, DIRECTION.DOWN][Math.round(Math.random())];
				this.ball.y = Math.floor(Math.random() * this.canvas.height - 200) + 200;
				this.turn = null;
			}

// If the player collides with the bound limits, update the x and y coords.
			if (this.player.y <= 0) this.player.y = 0;
			else if (this.player.y >= (this.canvas.height - this.player.height)) this.player.y = (this.canvas.height - this.player.height);

// Move ball in intended direction based on moveY and moveX values
			if (this.ball.moveY === DIRECTION.UP) this.ball.y -= (this.ball.speed / 1.5);
			else if (this.ball.moveY === DIRECTION.DOWN) this.ball.y += (this.ball.speed / 1.5);
			if (this.ball.moveX === DIRECTION.LEFT) this.ball.x -= this.ball.speed;
			else if (this.ball.moveX === DIRECTION.RIGHT) this.ball.x += this.ball.speed;

// If the paddle collides with the bound limits, update the x and y coords.
			if (this.paddle.y <= 0) this.paddle.y = 0;
			else if (this.paddle.y >= (this.canvas.height - this.paddle.height)) this.paddle.y = (this.canvas.height - this.paddle.height);

// Handle Player-Ball collisions
			if (this.ball.x - this.ball.width <= this.player.x && this.ball.x >= this.player.x - this.player.width) {
				if (this.ball.y <= this.player.y + this.player.height && this.ball.y + this.ball.height >= this.player.y) {
					this.ball.x = (this.player.x + this.ball.width);
					this.ball.moveX = DIRECTION.RIGHT;

}
			}

// Handle paddle-ball collision
			if (this.ball.x - this.ball.width <= this.paddle.x && this.ball.x >= this.paddle.x - this.paddle.width) {
				if (this.ball.y <= this.paddle.y + this.paddle.height && this.ball.y + this.ball.height >= this.paddle.y) {
					this.ball.x = (this.paddle.x - this.ball.width);
					this.ball.moveX = DIRECTION.LEFT;

}
			}
		}

// Handle the end of round transition
		// Check to see if the player won the round.
		if (this.player.score === rounds[this.round] || this.paddle.score === rounds[this.round]) {
			// Check to see if there are any more rounds/levels left and display the victory screen if
			// there are not.
			if (!rounds[this.round + 1] && this.player.winround > this.paddle.winround){
				this.over = true;
				setTimeout(function () { Pong.endGameMenu('Player 1 Win!'); }, 1000);
			} 
			else if (!rounds[this.round + 1] && this.player.winround <= this.paddle.winround){
				this.over = true;
				setTimeout(function () { Pong.endGameMenu('Player 2 Win!'); }, 1000);
			} 
			if(this.player.score === rounds[this.round]){
				// If there is another round, reset all the values and increment the round number.
				this.color = this._generateRoundColor();
				this.player.score = this.paddle.score = 0;
				this.player.speed += 0.5;
				this.paddle.speed += 0.5;
				this.ball.speed += 1;
				this.player.winround += 1;
				this.round += 1;
			}
			else if(this.paddle.score === rounds[this.round]){
				// If there is another round, reset all the values and increment the round number.
				this.color = this._generateRoundColor();
				this.player.score = this.paddle.score = 0;
				this.player.speed += 0.5;
				this.paddle.speed += 0.5;
				this.ball.speed += 1;
				this.paddle.winround += 1;
				this.round += 1;
			}
		}
	},

// Draw the objects to the canvas element
	draw: function () {
		// Clear the Canvas
		this.context.clearRect(
			0,
			0,
			this.canvas.width,
			this.canvas.height
		);

// Set the fill style to black
		this.context.fillStyle = this.color;

// Draw the background
		this.context.fillRect(
			0,
			0,
			this.canvas.width,
			this.canvas.height
		);

// Set the fill style to white (For the paddles and the ball)
		this.context.fillStyle = '#ffffff';

// Draw the Player
		this.context.fillRect(
			this.player.x,
			this.player.y,
			this.player.width,
			this.player.height
		);

// Draw the Paddle
		this.context.fillRect(
			this.paddle.x,
			this.paddle.y,
			this.paddle.width,
			this.paddle.height
		);

// Draw the Ball
		if (Pong._turnDelayIsOver.call(this)) {
					this.context.beginPath();
		this.context.arc(this.ball.x, this.ball.y, this.ball.width, 0, 2 * Math.PI);
            this.context.fill();
		this.context.closePath();
		}

// Draw the net (Line in the middle)
		this.context.beginPath();
		this.context.setLineDash([7, 15]);
		this.context.moveTo((this.canvas.width / 2), this.canvas.height - 140);
		this.context.lineTo((this.canvas.width / 2), 140);
		this.context.lineWidth = 10;
		this.context.strokeStyle = '#ffffff';
		this.context.stroke();

// Set the default canvas font and align it to the center
		this.context.font = '100px Courier New';
		this.context.textAlign = 'center';

// Draw the players score (left)
		this.context.fillText(
			this.player.score.toString(),
			(this.canvas.width / 2) - 300,
			200
		);

// Draw the paddles score (right)
		this.context.fillText(
			this.paddle.score.toString(),
			(this.canvas.width / 2) + 300,
			200
		);

// Change the font size for the center score text
		this.context.font = '40px Courier New';

// Draw the winning score (center)
		this.context.fillText('Round ' + (Pong.round + 1),(this.canvas.width / 2),35);
		// Draw the player1 score
		this.context.fillText('P1 Score ' + (this.player.winround),(this.canvas.width / 4),900);
		// Draw the player2 score
		this.context.fillText('P2 Score ' + (this.paddle.winround),(this.canvas.width *3/ 4),900);
		// Draw P1
		this.context.fillText('Player 1',(this.canvas.width / 4),60);
		// Draw P2
		this.context.fillText('Player 2',(this.canvas.width*3 / 4),60);
		
		
		// Change the font size for the center score value
		this.context.font = '40px Courier';

// Draw the current round number
		this.context.fillText(
			rounds[Pong.round] ? rounds[Pong.round] : rounds[Pong.round - 1],
			(this.canvas.width / 2),
			100
		);
	},

loop: function () {
		Pong.update();
		Pong.draw();

// If the game is not over, draw the next frame.
		if (!Pong.over) requestAnimationFrame(Pong.loop);
	},

listen: function () {
		document.addEventListener('keydown', function (key) {
			// Handle the 'Press any key to begin' function and start the game.
			if (Pong.running === false) {
				Pong.running = true;
				window.requestAnimationFrame(Pong.loop);
			}

// Handle w key events for player1
			if (key.keyCode === 87) Pong.player.move = DIRECTION.UP;
			// Handle arrow up/down key events for player2
			if (key.keyCode === 38) Pong.paddle.move = DIRECTION.UP;
			if (key.keyCode === 40) Pong.paddle.move = DIRECTION.DOWN;
			// Handle s key events for player1
			if (key.keyCode === 83) Pong.player.move = DIRECTION.DOWN;
		});

// Stop the player from moving when there are no keys being pressed.
		document.addEventListener('keyup', function (key) { 
			if (key.keyCode === 87) Pong.player.move = DIRECTION.IDLE;
			// Handle arrow up/down key events for player2
			if (key.keyCode === 38) Pong.paddle.move = DIRECTION.IDLE;
			if (key.keyCode === 40) Pong.paddle.move = DIRECTION.IDLE;
			// Handle s key events for player1
			if (key.keyCode === 83) Pong.player.move = DIRECTION.IDLE;
																			
		});
	},

// Reset the ball location, the player turns and set a delay before the next round begins.
	_resetTurn: function(victor, loser) {
		this.ball = Ball.new.call(this, this.ball.speed);
		this.turn = loser;
		this.timer = (new Date()).getTime();

victor.score++;
	},

// Wait for a delay to have passed after each turn.
	_turnDelayIsOver: function() {
		return ((new Date()).getTime() - this.timer >= 1000);
	},

// Select a random color as the background of each level/round.
	_generateRoundColor: function () {
		var newColor = colors[Math.floor(Math.random() * colors.length)];
		if (newColor === this.color) return Pong._generateRoundColor();
		return newColor;
	}
};

var Pong = Object.assign({}, Game);
Pong.initialize();
  
  </script>
</body>
</html>