增加画布中的球速度

Question

希望有人可以帮忙。 我正在使用画布来制作游戏，并试图逐渐提高我的球速（ https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over ）。 但是，我的球拍刚弹开几下，我的球速就达到了躁狂的速度！ 如何使速度逐渐增加？

// 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）您不会在draw创建的新setInterval上调用clearInterval ，因为您从未实际更新timerRef 。 您最终会在一次碰撞后每帧调用一次draw ，然后在两次后每帧调用两次，依此类推。

2）您的帧率似乎取决于球的速度，而我对此并不完全了解，而您的物理学直接取决于您的帧率。

PS：我将在该教程中跳过，现在切换到requestAnimationFrame 。 另外，我建议您阅读以下内容： http : //gameprogrammingpatterns.com/game-loop.html