I can not understand what formula to use to bounce the ball at the right angle.
var ballRadius = 20; var Width = 1200; var Height = 600; var PI = Math.PI; var KEY var x2, y2 var r = PI/2 var ran = Math.floor(Math.random()) var player1 = { x: null, y: null, width: 25, height: 150, update: function() { if (38 in KEY) { if(this.y > 0){ this.y -= 17 } } else if (40 in KEY && this.y < canvas.height - this.height) { this.y += 17 } }, draw: function() { ctx.beginPath() ctx.rect(this.x, this.y, this.width, this.height) ctx.fillStyle = "blue" ctx.fill() ctx.closePath() }, clear: function() { ctx.clearRect(0, 0, canvas.width, canvas.height); } } var player2 = { x: null, y: null, width: 25, height: 150, update: function() { }, draw: function() { ctx.beginPath() ctx.rect(this.x, this.y, this.width, this.height) ctx.fillStyle = "red" ctx.fill() ctx.closePath() }, clear: function() { ctx.clearRect(0, 0, canvas.width, canvas.height); } } var ball = { x: null, y: null, speed: 5, velocity: null, angle: null, newAngle: null, update: function() { this.y = this.y +Math.cos(this.angle) * this.speed; this.x = this.x + Math.sin(this.angle) * this.speed; if (this.y < 0 + ballRadius + PI){ ball.angle = 180 - (this.newAngle/2) } }, draw: function() { ctx.beginPath() ctx.arc(this.x, this.y, ballRadius, 0, Math.PI * 2, false); ctx.fillStyle = "black" ctx.fill() ctx.closePath() }, clear: function() { ctx.beginPath(); ctx.clearRect(this.x - ballRadius - 1, this.y - ballRadius - 1, ballRadius * 2 + 2, ballRadius * 2 + 2); ctx.closePath(); } } function main() { canvas = document.createElement("canvas") ctx = canvas.getContext('2d'); document.body.appendChild(canvas); canvas.width = Width; canvas.height = Height; KEY = { } document.addEventListener("keydown", function(even) { KEY[even.keyCode] = true }, false) document.addEventListener("keyup", function(even) { delete KEY[even.keyCode]; }, false) initial() var loop = function() { clear(); update(); draw(); window.requestAnimationFrame(loop, canvas) } window.requestAnimationFrame(loop, canvas) } function initial() { player1.x = player1.width; player1.y = (canvas.height - player1.height) / 2; player2.x = canvas.width - (player1.width + player2.width); player2.y = (canvas.height - player2.height) / 2; ball.x = (canvas.width - ballRadius) / 2 ball.y = (canvas.height - ballRadius) / 2 ball.angle = Math.floor((Math.random()*(90) + 45) * (180 + ran)) ball.velocity = ball.speed/2 ball.newAngle = ball.angle } function update() { ball.update() player1.update() player2.update() } function newAngle(){ } function draw() { ball.draw() player1.draw() player2.draw() } function clear() { player1.clear() player2.clear() ball.clear() } main() <<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AeroHockey</title> </head> <body> <script type="text/javascript" src="MenuScreen.js"></script> <script type="text/javascript" src="PlayScreen.js"></script> </body> </html> 