限制对象在画布中的移动

我想弄清楚如何在我的画布窗口内限制我的Pac人物角色。我试图用编码限制它不能移过画布边界，但我的任何尝试似乎都没有工作。有什么建议么？限制对象在画布中的移动

帆布尺寸：800px（width）; 450像素（高）

这里是我的移动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; 
    } 
} 


})

来源

2017-06-21 Marie

你是非常接近拥有它。

因为我不知道有什么区别应该是$pacman和pacman之间，因为你已经在使用$pacman.position(). ...，我改变了你pacman2.y ...到$pacman.position().top。

您对右侧边缘的检查是否有正确的想法，除非您在检查是否太过分之前已经移动了pacman。因此，我颠倒了该边界检查的逻辑，并将该移动命令放入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>

来源

2017-06-21 23:14:06

限制对象在画布中的移动

回答

相关问题