如何让球在javascript中独立移动

所以我正在制作一个非常基本的Javascript游戏。有一个用箭头键控制的用户球，屏幕上浮动着一个敌人的球。如何让球在javascript中独立移动

但是，我遇到了一个问题。当我用箭头键移动自己的球时，敌方球只会移动。所以如果我没有按任何东西，敌人的球就坐在那里，也不会移动。

以下是我的javascript代码。所以基本上我想让敌人自己在画布上移动。提前感谢！

<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>

来源

2015-11-05 Neilk

你可以给出处理用户输入（按键）的代码部分吗？ –

我做了，它在底部没有？ – Neilk

哎呀，对不起，我有麻烦加载页面，没关系！ :) 这里的想法是制作一个独立的代码块，每隔X毫秒执行一次，以使敌方的球移动。你可能想为此使用'setInterval'。 –

您在底部缺少一行代码，再次调用requestAnimation。

window.requestAnimationFrame(repeatme);

</script>之前加入这行，它应该工作。

来源

2015-11-05 13:50:21

如何让球在javascript中独立移动

回答

相关问题