Pong game task 2/2
This document will explain the code and provide some insight into my learning during the game development.
-
HTML: The (canvas) element is a container which allows for the drawing of graphics and animations, using JavaScript. (h1) for title. addEventListener for keyup event,
(W, S) to control player1
(UpKey, DownKey) to control player2 -
CSS: (canvas id="board") background-color, & border-top, bottom, styles.
Image-1: show's the dimentions of canvas starting at (0.0) point or X, Y. width & height of 500px. Also the positioning of the player paddle, which is boarderheight/2, size of the paddle is stored in a variable (playerHeight = 100;)
Image-2: Ball starting point center, when ever the ball touches the boardHeight it reverse.
// if ball touches top or bottom of canvas
if (ball.y <= 0 || (ball.y + ball.height >= boardHeight)) {
ball.velocityY *= -1; //reverse direction
}
Image-3: Detection of ball and paddle contact.
This task was a gradual learning curve, i had great difficulty visualizing the project at start and rushed into producing the game, without any planning and research.
Learning resource: https://www.youtube.com/watch?v=LTtfoyHxAVU