Develop Reference

How to get program to correctly detect where mouse is in relation to the center point of a circle

I'm creating a small demo/game in which the player moves around and interacts with objects by clicking them.
let cnt = 0;
var canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.background = "#91c1ff";
const player = {
x: 1,
y: 2
};
const xy = (x, y) => ({
x,
y
});
const dist = 25;
var speed = 5;
//grabs images for organelles
var ribosome = document.getElementById("ribosome");
var mito = document.getElementById("mito");
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
function keyDownHandler(event) {
if (event.keyCode == 68) {
rightPressed = true;
}
else if (event.keyCode == 65) {
leftPressed = true;
}
if (event.keyCode == 83) {
downPressed = true;
}
else if (event.keyCode == 87) {
upPressed = true;
}
if (event.keyCode == 39) {
rightPressed = true;
}
else if (event.keyCode == 37) {
leftPressed = true;
}
if (event.keyCode == 40) {
downPressed = true;
}
else if (event.keyCode == 38) {
upPressed = true;
}
}
function keyUpHandler(event) {
if (event.keyCode == 68) {
rightPressed = false;
}
else if (event.keyCode == 65) {
leftPressed = false;
}
if (event.keyCode == 83) {
downPressed = false;
}
else if (event.keyCode == 87) {
upPressed = false;
}
if (event.keyCode == 39) {
rightPressed = false;
}
else if (event.keyCode == 37) {
leftPressed = false;
}
if (event.keyCode == 40) {
downPressed = false;
}
else if (event.keyCode == 38) {
upPressed = false;
}
}
function draw() {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const camX = -player.x + canvas.width / 2;
const camY = -player.y + canvas.height / 2;
ctx.translate(camX, camY);
if (rightPressed) {
player.x += speed;
}
else if (leftPressed) {
player.x -= speed;
}
if (downPressed) {
player.y += speed;
}
else if (upPressed) {
player.y -= speed;
}
class Circle {
constructor(xpoint, ypoint, radius, color) {
this.xpoint = xpoint;
this.ypoint = ypoint;
this.radius = radius;
this.color = color;
}
drawer(ctx){
//ctx.drawImage(ribosome, this.xpoint, this.ypoint, 300, 300);
//ctx.drawImage(mito, this.xpoint, this.ypoint, 300, 300);
ctx.beginPath();
ctx.arc(this.xpoint, this.ypoint, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
clickCircle(xmouse, ymouse) {
const distance =
Math.sqrt(
((xmouse - this.xpoint ) * ( xmouse - this.xpoint))
+
((ymouse - this.ypoint) * (ymouse - this.ypoint))
);
console.log(distance);
}
}
let circle = new Circle(200, 200, 100, "red");
circle.drawer(ctx);
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
circle.clickCircle(x, y);
});
ctx.beginPath();
ctx.arc(player.x, player.y, 10, 0, Math.PI * 2);
ctx.stroke();
requestAnimationFrame(draw)
}
draw();
let cnt = 0;
var canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.background = "#91c1ff";
const player = {
x: 1,
y: 2
};
const xy = (x, y) => ({
x,
y
});
const dist = 25;
var speed = 5;
//grabs images for organelles
var ribosome = document.getElementById("ribosome");
var mito = document.getElementById("mito");
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
function keyDownHandler(event) {
if (event.keyCode == 68) {
rightPressed = true;
}
else if (event.keyCode == 65) {
leftPressed = true;
}
if (event.keyCode == 83) {
downPressed = true;
}
else if (event.keyCode == 87) {
upPressed = true;
}
if (event.keyCode == 39) {
rightPressed = true;
}
else if (event.keyCode == 37) {
leftPressed = true;
}
if (event.keyCode == 40) {
downPressed = true;
}
else if (event.keyCode == 38) {
upPressed = true;
}
}
function keyUpHandler(event) {
if (event.keyCode == 68) {
rightPressed = false;
}
else if (event.keyCode == 65) {
leftPressed = false;
}
if (event.keyCode == 83) {
downPressed = false;
}
else if (event.keyCode == 87) {
upPressed = false;
}
if (event.keyCode == 39) {
rightPressed = false;
}
else if (event.keyCode == 37) {
leftPressed = false;
}
if (event.keyCode == 40) {
downPressed = false;
}
else if (event.keyCode == 38) {
upPressed = false;
}
}
function draw() {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const camX = -player.x + canvas.width / 2;
const camY = -player.y + canvas.height / 2;
ctx.translate(camX, camY);
if (rightPressed) {
player.x += speed;
}
else if (leftPressed) {
player.x -= speed;
}
if (downPressed) {
player.y += speed;
}
else if (upPressed) {
player.y -= speed;
}
class Circle {
constructor(xpoint, ypoint, radius, color) {
this.xpoint = xpoint;
this.ypoint = ypoint;
this.radius = radius;
this.color = color;
}
drawer(ctx){
//ctx.drawImage(ribosome, this.xpoint, this.ypoint, 300, 300);
//ctx.drawImage(mito, this.xpoint, this.ypoint, 300, 300);
ctx.beginPath();
ctx.arc(this.xpoint, this.ypoint, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
clickCircle(xmouse, ymouse) {
const distance =
Math.sqrt(
((xmouse - this.xpoint ) * ( xmouse - this.xpoint))
+
((ymouse - this.ypoint) * (ymouse - this.ypoint))
);
console.log(distance);
}
}
let circle = new Circle(200, 200, 100, "red");
circle.drawer(ctx);
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
circle.clickCircle(x, y);
});
ctx.beginPath();
ctx.arc(player.x, player.y, 10, 0, Math.PI * 2);
ctx.stroke();
requestAnimationFrame(draw)
}
draw();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cellbot</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<canvas id="canvas" width="100" height="100" style="border:1px solid #000000;"></canvas>
<img src="images/ribosome.png" id="ribosome">
<img src="images/mitochondrion.png" id="mito">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
I want to use circles as the sort of "hitboxes" for the objects. However, when I tried to do this and test it with a console log using this tutorial it detects the mouse as being about 800-1000 pixels from where it's supposed to be depending on the window size.
(It also registers a single click hundreds of times but that's another issue)

Game doesn't work, but my code looks fine

I've been following an online tutorial for making a Breakout Game using JS, but it doesn't work. Even something as simple as an alert popup doesn't work. All of this started happening after I created the keyboard controls, and all of the errors are in that section as well. But it looks fine, i've compared the sample code with mine and everything's identical. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background:rgba(104, 10, 93, 0.61);
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
<script>
// JS goes here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUphandler, false);
alert('test')
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
elseif(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.key -- "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
elseif(e.key-- "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#EE82EE";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleheight, paddleWidth, paddleHeight);
ctx.fillStyle = "#9400D3";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
if(rightPressed) {
paddleX += 7;
if (paddleX + paddleWidth > canvas.width){
paddleX = canvas.width - paddleWidth;
}
}
else if(leftPressed) {
paddleX -= 7;
if (paddleX < 0){
paddleX = 0;
}
x += dx;
y += dy;
}
}
setInterval(draw, 10);
</script>
</body>
</html>

You have numerous typos in your code. This version should work better (at least it does not generate any errors):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background:rgba(104, 10, 93, 0.61);
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
<script>
// JS goes here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
alert('test')
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#EE82EE";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#9400D3";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
if (rightPressed) {
paddleX += 7;
if (paddleX + paddleWidth > canvas.width){
paddleX = canvas.width - paddleWidth;
}
}
else if(leftPressed) {
paddleX -= 7;
if (paddleX < 0){
paddleX = 0;
}
x += dx;
y += dy;
}
}
setInterval(draw, 10);
</script>
</html>

Using buttons as touchscreen controls for javascript game

I'm making a webpage that is just a place to take a break, and a lot of my users are on touchscreen, so I'm trying to implement touchscreen controls into the games, but it's not working and I cannot for the life of me figure out why. The arrow key controls still work, but not the buttons.
<canvas id="myCanvas" width="480" height="320" ></canvas>
<script>
function playGame() { var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var difficulty = 10
var score = 0
var gameRunning = false
var paused = false
function paddleMoveLeft(){ paddleX -= 5;
if (paddleX < 0){
paddleX = 0;
}}
function paddleMoveRight(){ paddleX += 5;
if (paddleX + paddleWidth > canvas.width){
paddleX = canvas.width - paddleWidth;
}}
function playPause(){
if(paused === true){paused = false}
else {paused = true}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawScore() {
ctx.font = "24px ";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: "+score, 8, 20);
}
function draw() {
if (paused === false){
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
drawScore();
x += dx;
y += dy;
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy < ballRadius) {
dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
if(x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
difficulty = difficulty + 0.5;
score = score + 1;
}
else {
alert("GAME OVER! you scored " + score);
ctx.clearRect(0, 0, canvas.width, canvas.height);
clearInterval(interval);
canvas.style.display = 'none';
}
}
if(rightPressed) {
paddleMoveRight();
}
else if(leftPressed) {
paddleMoveLeft();
}
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
var interval = setInterval(draw, difficulty);}
</script>
<div style = 'width: 30%; margin: auto;'>
<button style = 'font-size:large;' onclick = 'paddleMoveLeft()'> left</button>
<button style = 'font-size: large;' onclick = 'paddleMoveRight()'> right</button>
</div>
Any idea what's wrong?

Just by opening the console, it will tells you what's wrong.
So far, you call paddleMoveLeft in html but it's not globally defined, as it is inside the playGame method. About scope

Creating a pong game in Netbeans

I really hope that you might be able to able me. I am a total novice and so I am simply trying to learn. I am trying to create a pong game.
My problem is now that there is no collision between the paddles and balls.
Here is my code. It is messy I must admit.
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gradientMag = 375;
var gradient = ctx.createLinearGradient(0,0,0, gradientMag);
var ball_x = canvas.width/2;
var ball_y = canvas.height-30;
var dx = -2;
var dy = -2;
var ballRadius = 5;
var p_Height = 100;
var p_Width = 10;
var player1x = (canvas.width-p_Width);
var player1y = canvas.height-p_Height;
var player2y = 0;
var player2x = 0;
var player2Right = false;
var player2Left = false;
var player1Right = false;
var player1Left = false;
var startScreen = true;
var gameRunning = false;
var player1wins = false;
var player2wins = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.keyCode == 40) {
player1Right = true;
} if(e.keyCode == 38) {
player1Left = true;
} if(e.keyCode == 83) {
player2Right = true;
} else if(e.keyCode == 87) {
player2Left = true;
} }
function keyUpHandler(e) {
if(e.keyCode == 40) {
player1Right = false;
} if(e.keyCode == 38) {
player1Left = false;
} if(e.keyCode == 83) {
player2Right = false;
} if(e.keyCode == 87) {
player2Left = false;
}
else if (e.keyCode == 13){
gameRunning = true;
startScreen = false;
player1wins = false;
player2wins = false;
}
}
/*
function loadGame(){
if (startScreen){
var gradient = ctx.createLinearGradient(0,0,0,gradientMag);
gradient.addColorStop(0,blue );
gradient.addColorStop(1,red);
ctx.fillStyle = gradient;
ctx.fillRect(0,0, 500, 500);
ctx.font = "40px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Press Enter to begin", 150, 110);
}
}
*/
function ball() {
ctx.beginPath();
ctx.arc(ball_x, ball_y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
function paddle() {
ctx.beginPath();
ctx.rect(player1x, player1y, p_Width, p_Height);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}
function player2() {
ctx.beginPath();
ctx.rect(player2x, player2y, p_Width, p_Height);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
}
function draw() {
if (startScreen){
/*var gradient = ctx.createLinearGradient(0,0,0,gradientMag);
gradient.addColorStop(0,blue );
gradient.addColorStop(1,red);
ctx.fillStyle = gradient;
ctx.fillRect(0,0, 500, 500);
*/
ctx.font = "20px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Press Enter to begin", 100, 90);
}
if (gameRunning){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball();
paddle();
player2();
//bounce of the walls
if(ball_y + dy > canvas.width-ballRadius || ball_y+dy < ballRadius){
dy = -dy;
}
//if the ball hits the top
if(ball_x + dx < ballRadius) {
//if the ball hits the paddle of player 2
if(ball_x + dx < player2x + p_Height && ball_y > player2y && ball_y < player2y + p_Width){
console.log("hit the paddle");
dx = -dx;
}
//if the ball hits the top - do this first
else if(ball_x + dx < canvas.height)
{
//alert("Player 1 Wins!");
//document.location.reload();
player1wins = true;
gameRunning = false;
}
}
//if the ball hits the bottom
if(ball_x + dx > canvas.height-ballRadius) {
//the ball hits the paddle
if(ball_x + dx > player1x && ball_y > player1y && ball_y < player1y + p_Width){
dx = -dx;
}
//the ball hits the base
else if(ball_x + dx > canvas.height)
{
//alert("Player 2 Wins!");
//document.location.reload();
player2wins = true;
gameRunning = false;
}
}
if(player1Right && player1y < canvas.width-p_Width) {
player1y += 5;
}else if(player1Left && player1y > 0) {
player1y -= 5;
}
if(player2Right && player2y < canvas.width-p_Width) {
player2y += 5;
}else if(player2Left && player2y > 0) {
player2y -= 5;
}
ball_y += dy;
ball_x += dx;
}
else if (player1wins) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//background();
ctx.font = "20px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Well done player 1, you win!", 100, 90);
ctx.fillText("Hit F5 to play again!", 100, 110);
} else if (player2wins) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//background();
ctx.font = "20px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Well done player 2, you win!", 100, 90);
ctx.fillText("Hit F5 to play again!", 100, 110);
}
}
setInterval(draw, 10);
//loadGame();
</script>
</body>
</html>

Your choice of y to signify width hurts a bit, however, it seems to me you're only checking collision once the ball has passed the player paddle? (ball_x + dx > player1x)
Shouldn't it be the other way around? ball_x + dx < player1x

How to make the ball move faster when it hits paddle?

How to make the ball move faster when it hits paddle !
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
var dx = 2;var dy = -2;
var w = canvas.width, h = canvas.height;
var x = w/2;var y = h-30;
var ballRadius = 10;
var color = getColor();
var paddleHeight = 10;var paddleWidth = 75;var paddleX = (w-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
document.addEventListener("keydown", keyDownHandler,false);
document.addEventListener("keyup", keyUpHandler,false);
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
function getColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, h-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#eee";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0,0,w,h);
drawBall();
drawPaddle();
if(x + dx < ballRadius || x + dx > w-ballRadius) {
dx = -dx;
color = getColor();
}
if(y + dy < ballRadius) {
dy = -dy;
color = getColor();
}else if(y + dy > h-ballRadius) {
if(x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
}
else {
alert("GAME OVER");
}
}
if(rightPressed && paddleX < w-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
}
setInterval(draw, 10);
/*left arrow: 37
up arrow: 38
right arrow: 39
down arrow: 40*/
* {
background-color: #224;
padding: 0; margin: 0;
}
canvas {
background: #555;
display: block;
margin: 10px auto;
}
<canvas id="myCanvas" width="480px" height="320px"></canvas>

Modify the bounce code in the draw function:
if(y + dy < ballRadius) {
dy = -dy;
color = getColor();
}
else if(y + dy > h-ballRadius) {
if(x > paddleX && x < paddleX + paddleWidth) {
dy = -dy * 1.1;
}
Note the last line:
dy = -dy * 1.1;
This means that dy will be increased by 10% each time the paddle hits the ball. You could change 1.1 to modify the scaling factor.