Restreindre le mouvement de l'objet dans le canevas

Question

J'essaie de comprendre comment restreindre mon personnage dans la fenêtre de ma toile. J'ai essayé de le restreindre en codant qu'il ne pouvait pas dépasser les limites de la toile, mais aucune de mes tentatives ne semble fonctionner. Aucune suggestion?

Dimensions de la toile: 800px (largeur); 450px (hauteur)

Voici mon code pour déplacer 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

Vous étiez assez proche de l'avoir.

Parce que je ne savais pas ce que la différence était censé être entre $pacman et pacman, et depuis que vous utilisez déjà $pacman.position(). ..., j'ai changé votre pacman2.y ...-$pacman.position().top.

Votre vérification du bord droit a eu la bonne idée, sauf que vous étiez déjà en train de déplacer le pacman juste avant de vérifier si c'était trop loin. J'ai donc inversé la logique de cette vérification des limites et j'ai placé la commande move dans l'instruction if.

Je puis essentiellement recopié qui vérifient la frontière droite encore trois fois, en changeant les propriétés (par exemple top, etc.), les comparateurs (par exemple >, etc.) et des signes (par exemple +, etc.) si nécessaire .

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