增加畫布中的球速度

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