Question

我是javascript的初学者，并希望对此有所帮助。我已经在画布内制作了一个移动矩形，想学习如何使我的对象在碰到画布边缘时停止移动。

我的JavaScript代码如下：

    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');

    var xPos = 0;
    var yPos = 0;

    context.rect(xPos, yPos, 50, 50);
    context.stroke();

    function move(e) {

      if (e.keyCode == 39) {
        xPos += 5;
      }
      if (e.keyCode == 37) {
        xPos -= 5;
      }
      if (e.keyCode == 40) {
        yPos += 5;
      }
      if (e.keyCode == 38) {
        yPos -= 5;
      }

      canvas.width = canvas.width;
      context.rect(xPos, yPos, 50, 50);
      context.stroke();
    }

    document.onkeydown = move;

<canvas></canvas>

如果有人可以帮助我，我将非常感激。

// Oskar

Answer 1

似乎最简单的解决方案是在move（）内部添加if语句；检测画布的一面，如果xPos等于零，则停止它的移动。

function move(e){
  if(e.keyCode==37){
    if ( xPos !== 0 ) {
      xPos-=5;
    } else {
      // rectangle is at the edge, so don't do anything.
    }
  }
  canvas.width=canvas.width;
  context.rect(xPos, yPos, 50, 50);
  context.stroke();
}

您可以在每个函数中添加if语句，以检测画布的顶部，右侧和底部。

如何阻止矩形移动到画布之外？

1 个答案: