Increase ball speed in canvas

Question

hope someone can help. I'm using canvas to build a game and trying to increase my ball speed very gradually ( https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over ). However, my ball speed gets to manic speed after just a few bounces off my paddle! How do I make the speed increase gradual?

// Declare all the variables for my game
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
var x = canvas.width / 2    // starting x positon of the ball
var y = canvas.height - 30 // starting y positon of the ball
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 ballSpeed = 10

// make the ball bounce off the walls

// Defining the draw function and clear ball after every draw

// Make canvas draw ball
function drawBall () {
  ctx.beginPath()
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2)
  ctx.fillStyle = '#0095DD'
  ctx.fill()
  ctx.closePath()
}

// Make canvas draw the paddle
function drawPaddle () {
  ctx.beginPath()
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight)
  ctx.fillStyle = '0095DD'
  ctx.fill()
  ctx.closePath
}

// overall draw function
function draw () {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  drawBall()
  drawPaddle()
  // bounce off the side walls
  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx }

  // change y-direction when ball hits paddle, side walls and top wall
  if (y + dy < ballRadius) {
    dy = -dy
  } else if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      clearInterval(timerRef)
      ballSpeed -= 0.01
      setInterval(draw, ballSpeed)
      dy = -dy
    } else {
      alert('Game Over')
      document.location.reload()
    }
  }
  x += dx
  y += dy
  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 7
  }
}

// To listen for whether user presses keyboard (keydown) or not
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
  }
}

clearInterval(timerRef)
var timerRef = setInterval(draw, ballSpeed)

Answer 1

1) You don't call clearInterval on the new setInterval 's created in draw , because you never actually update timerRef . You end up with draw being called once per frame after one collision, then twice per frame after two, etc.

2) Your framerate seems to be dependent on the speed of the ball, which I don't fully understand, and your physics is directly tied to your framerate.

PS I would skip ahead in that tutorial and switch over to requestAnimationFrame now. Also, I would suggest reading this: http://gameprogrammingpatterns.com/game-loop.html