Déplacement Div dans la fenêtre en utilisant les flèches

Je suis nouveau à coder et essayer de faire un jeu où je déplace ma div le long des axes x et y. Quand j'exécute du code, j'obtiens une erreur dans la variable marginLeft ainsi que dans le marginTop. J'ai inclus ces variables car je veux que les frappes de touches successives continuent à se déplacer div. Je voudrais coder en utilisant seulement jquery si possible.Déplacement Div dans la fenêtre en utilisant les flèches

var player = $('#player'); 
 
var marginleft = $('#player').offset().left; 
 
var margintop = $('#player').offset().top; 
 

 

 
function movePlayer(e) { 
 
    if (e.keydown==39) { 
 
    marginleft +=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.keydown==37) { 
 
    marginleft -=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.keydown==40) { 
 
    margintop +=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
    if (e.keydown==38) { 
 
    margintop -=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
}

#player { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    position: absolute; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body> 
 
<div id="player"></div> 
 
</body> 
 
</html>

Source

2016-10-04 keigwin

Vous avez oublié d'inclure le code à l'écoute de la touche dans votre exemple. nous ne pouvons pas le tester sans que –

S'il vous plaît fournir le code que @CoryDanielson suggéré. Aussi, vous voulez jeter un oeil à la toile, plus flexible – Slico

Votre code a bien fonctionné quand je l'ai modifié à utiliser e.which dans les écouteurs d'événements. J'ai également attaché l'écouteur d'événement dans le fond du snippit.

Cliquez dans le jeu avant d'utiliser les touches fléchées: https://jsfiddle.net/CoryDanielson/kchrv4t4/

var player = $('#player'); 
var marginleft = $('#player').offset().left; 
var margintop = $('#player').offset().top; 

function movePlayer(e) { 
    if (e.which==39) { 
    marginleft +=2; 
    player.css('left', marginleft + 'px'); 
    } 
    if (e.which==37) { 
    marginleft -=2; 
    player.css('left', marginleft + 'px'); 
    } 
    if (e.which==40) { 
    margintop +=2; 
    player.css('top', margintop + 'px'); 
    } 
    if (e.which==38) { 
    margintop -=2; 
    player.css('top', margintop + 'px'); 
    } 
} 

$(document.body).on('keydown', movePlayer);

Vous devez utiliser e.which lors de l'utilisation de jQuery. Il y a beaucoup de différences entre les navigateurs et les codes clés. which est le moyen sûr de déterminer les codes clés. https://api.jquery.com/event.which/

Source

2016-10-04 16:38:07

Quand je lance le code j'obtiens une erreur dans la variable marginLeft ainsi que la marginTop

Ce phare m'a laissé pense que vous définissez et initialiser les variables en dehors du document prêt ...

Si vous devez déplacer votre div seulement à l'intérieur de la zone visible du document peut être un solutioon:

// 
 
// declare global variables and functions outside the 
 
// document ready 
 
// 
 
var player; 
 
var marginleft; 
 
var margintop; 
 
var docWidth; 
 
var docHeight; 
 

 
function movePlayer(e) { 
 
    if (e.which==39) { 
 
    if (marginleft >= docWidth) { 
 
     return; 
 
    } 
 
    marginleft +=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.v==37) { 
 
    if (marginleft<=0) { 
 
     return; 
 
    } 
 
    marginleft -=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.which==40) { 
 
    if (margintop >= docHeight) { 
 
     return; 
 
    } 
 
    margintop +=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
    if (e.which==38) { 
 
    if (margintop<=0) { 
 
     return; 
 
    } 
 
    margintop -=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
} 
 

 
// 
 
// On document ready: set the variables and 
 
// add the event listener for keydown event 
 
// 
 
$(function() { 
 
    player = $('#player'); 
 
    marginleft = $('#player').offset().left; 
 
    margintop = $('#player').offset().top; 
 
    docWidth = $(document).width() - player.width(); 
 
    docHeight = $(document).height() - player.height(); 
 

 
    $(document).on('keydown', function(e) { 
 
    movePlayer(e); 
 
    }); 
 
});

#player { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    position: absolute; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="player"></div>

Source

2016-10-04 16:49:17 gaetanoM

Déplacement Div dans la fenêtre en utilisant les flèches

Répondre

Questions connexes