Question

我想弄清楚如何在画布的窗口中限制我的pac man角色。我已经尝试通过编码来限制它，因为它无法移动到画布的边界，但我的尝试似乎都没有起作用。有什么建议吗？

画布尺寸： 800px（宽度）; 450px（身高）

这是我移动pac-man的代码：

    $(document).on('keydown', movePacman); 

    function movePacman(event) {

    $(document).on('keydown', movePacman); 

    function movePacman(event) {
    console.log(event.which);
      switch(event.which) {

        case 39:
              $pacman.css("left", ($pacman.position().left + 10) + "px");

         if ($pacman.position().left > 800 ) {
                   $pacman.css("left", ($pacman.position().left + 0) + "px");
                }
            break;

        case 40:
            $('#pacman').css({
                'top': (pacman2.y += 10) + 'px'
            });
            break;

        case 37:
             $pacman.css("left", ($pacman.position().left - 10) + "px");
            break; 

        case 38:
            $('#pacman').css({
                'top': (pacman2.y -= 10) + 'px'
            });
            break;
    }
}


})

`

Answer 1

你非常接近它。

因为我不知道pacman和$pacman.position(). ...之间应该有什么区别，并且因为您已经在使用pacman2.y ...，所以我更改了您的$pacman.position().top } if。

你对右手边缘的检查有正确的想法，除了你在检查它是否太远之前已经移动了pacman。因此，我颠倒了边界检查的逻辑，并将移动命令放在top语句中。

然后，我基本上复制了右边界的检查三次，改变了属性（例如>等），比较器（例如+等）和符号（例如必要时

$(document).on('keydown', movePacman);
const $pacman = $('#pacman');

function movePacman(event) {
  switch (event.which) {
    case 39: // i.e. right
      if ($pacman.position().left < 200) {
        $pacman.css("left", ($pacman.position().left + 10) + "px");
      }
      break;

    case 40: // i.e. down
      if ($pacman.position().top < 100) {
        $pacman.css("top", ($pacman.position().top + 10) + "px");
      }
      break;

    case 37: // i.e. left
      if ($pacman.position().left > 0) {
        $pacman.css("left", ($pacman.position().left - 10) + "px");
      }
      break;

    case 38: // i.e. up
      if ($pacman.position().top > 0) {
        $pacman.css("top", ($pacman.position().top - 10) + "px");
      }
      break;
  }
}

等。

＆＃13;

#pacman {
  position: fixed;
  left: 100px;
  top: 40px;
  width: 40px;
  height: 40px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click inside this image and then use the arrow keys to move.</p>
<div id="pacman"></div>

＆＃13;

xlist

＆＃13;

限制画布中的对象移动

1 个答案: