如何在JavaScript中使球独立移动

Question

so I'm making a very basic Javascript game. There's a userball which you control with the arrow keys and there's an enemy ball floating around the screen.

However, I've run into a problem. The enemy ball only moves when I move my own ball with the arrow keys. So if I press nothing the enemy ball just sits there and doesn't move either.

Below is my javascript code. So basically I want the enemyball to move around the canvas on it's own. Thanks a lot in advance!

<script type="text/javascript">
  // Gets a handle to the element with id gameCanvas.
  var canvas = document.getElementById("gameCanvas");

  // Get a 2D context for the canvas.
  var ctx = canvas.getContext("2d");


  var userBall = {
    x: canvas.width / 2
    , y: canvas.height / 2
    , r: 13
  }  

  var enemyBall1 = {    //  Create object for enball1
      x: canvas.width / 5,
      y: canvas.height / 5,
      radius: 8 ,  //  Set radius of ball to 12

      acceleration: {   //  Determines ball acceleration
          x: 5,
          y: 3
      }

} //  End ball1



    function drawCircle() {
        ctx.fillStyle = "rgb(255, 255, 0)";   //  Color
        ctx.beginPath();
        ctx.arc(userBall.x, userBall.y, userBall.r, 0, 2 * Math.PI);
        ctx.fill();
    }

     function drawEnemyBall1() {
          ctx.fillStyle = "rgb(255, 25, 100)";   //  Color
          ctx.beginPath();  //  Begin path
          ctx.arc(enemyBall1.x, enemyBall1.y, enemyBall1.radius, 0, 2 * Math.PI);   
          ctx.fill();   //  Fills ball

          enemyBall1.x += enemyBall1.acceleration.x;   //  Update y location
          enemyBall1.y += enemyBall1.acceleration.y;

          //    Keep animation going while ball1 hasn't hit the canvas
          if ((enemyBall1.x >= canvas.width - enemyBall1.radius) ||  (enemyBall1.x <= enemyBall1.radius))
              enemyBall1.acceleration.x =- enemyBall1.acceleration.x;

          if ((enemyBall1.y >= canvas.height - enemyBall1.radius) ||  (enemyBall1.y <= enemyBall1.radius))
              enemyBall1.acceleration.y =- enemyBall1.acceleration.y;

      } //  End function drawball

    drawCircle(); //  call function
    drawEnemyBall1();

    function repeatme() {

          // clears  the screan/canvas i.e. where the ball was previously does not show up.
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // calls the enemyBall function
          drawEnemyBall1();

          //calls the userBall function
          drawCircle();

          // gets the animation going
          window.requestAnimationFrame(repeatme);  
      }

  // Add an event listener to the keypress event.
  window.addEventListener("keydown", function(event) { 
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (event.keyCode == 39 && userBall.x < canvas.width - userBall.r)
      userBall.x += Math.min(10, canvas.width - userBall.x - userBall.r);
    else if (event.keyCode == 37 && userBall.x > userBall.r)
      userBall.x -= 10;
    else if (event.keyCode == 40 && userBall.y < canvas.height - userBall.r)
      userBall.y += 10;
    else if (event.keyCode == 38 && userBall.y > userBall.r)
      userBall.y -= 10;

    drawCircle(); //  call function
    drawEnemyBall1();

  });
</script>

Answer 1

You are missing a line of code at the very bottom calling the requestAnimation again.

window.requestAnimationFrame(repeatme);

add this line before </script> and it should work.