在 Canvas 中限制对象移动

Question

我想知道如何将我的吃豆人角色限制在 canvas 的 window 范围内。我尝试通过编码来限制它，使其无法越过 canvas 的边界，但我的 none 尝试似乎有效。有什么建议吗？

Canvas 尺寸：800px（宽度）； 450px（高度）

这是我移动吃豆人的代码：

    $(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 之间应该有什么区别，并且由于您已经在使用 $pacman.position(). ...，所以我更改了您的 pacman2.y ... 到 $pacman.position().top.

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

然后我实质上将右侧边界的检查又复制了三次，更改了属性（例如 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;
  }
}

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

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

在 Canvas 中限制对象移动

Restricting Object Movement in Canvas

html

javascript

canvas

boundary

pacman