Classic arcade game, Pong, built as a browser game in JavaScript and HTML5 Canvas. The AI has additional functionality compared to classic pong, movement of your paddle changes the ball's speed depending on what direction you're moving in.
The core features of this application are tracking scoring and paddle/ball collisions. There is also some math involved in calculating the bounce mechanics.
To increase difficulty, the speed of the ball increases on every bounce with a maximum cap. The direction of the bounce is influenced by the direction the paddle is moving in and also the location at which the ball hits the paddle.
paddleBounce(ball) {
if (ball.y <= this.y + this.height && ball.y >= this.y) { // within bounds
if (Math.abs(ball.xVel) < 7) {
ball.xVel *= -1.25;
} else {
ball.xVel = -ball.xVel;
}
// Paddle moving up
if (this.y < this.oldY) {
if (ball.y > this.y + this.height/2) { // bottom half of paddle
ball.yVel = Math.abs(ball.yVel * 0.75);
}
else if (ball.y < this.y + this.height/2) { // top half of paddle
ball.yVel = -Math.abs(ball.yVel * 1.25);
}
}
// Paddle moving down
else if (this.y > this.oldY) {
if (ball.y > this.y + this.height/2) { // bottom half of paddle
ball.yVel = Math.abs(ball.yVel * 1.25);
}
else if (ball.y < this.y + this.height/2) { // top half of paddle
ball.yVel = -Math.abs(ball.yVel * 0.75);
}
}
}
}The next update will allow players to choose from multiple color palettes for their game. Upon loading, the game will cycle through the different options, and their will be a menu of clickable swatches at the bottom of the screen.
Currently, the next round starts immediately, a pause button is planned to be implemented in an update
The score updates in the upper-left and upper-right hand corners when you when a point. This could be made more clear with a model that appears briefly when a point is won.