Déplacer une image avec les touches de direction à l'aide de JavaScript

Je veux être en mesure de déplacer une image autour de l'écran avec le JavaScript. Le code que j'ai en dessous de l'image sera placée sur l'écran mais ne me laisse pas le déplacer.

Question: Voulez-vous être en mesure de déplacer l'image dans l'écran avec les touches fléchées?

Je suis certain qu'il y a une boucle de jeu qui en quelque sorte est en cours d'exécution tout le temps lorsque la page est active. Comment c'est fait, je ne suis pas certain non plus, mais je pense qu'il pourrait être de type int, il a la fonction de charge.

Code JavaScript:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Move Object</title>
<script type="text/javascript">
<script type="text/javascript">
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 5 + 'px';
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 5 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 5 + 'px';
}
function moveSelection() {
evt = evt || window.event; 
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function gameLoop()
{
//change position based on speed
moveSelection();
setTimeout("gameLoop()",10);
}
</script>
</head>
<body onload="gameLoop()" onkeydown="" onkeyup="" bgcolor='yellow'>
Test
<img id="image1" src="C:\Users\itpr13266\Desktop\mp.jpg" style="position:absolute;"
height="15" width="15">
</body>
end html
</html>
Pas vraiment. Vous devez configurer certains "déclencheurs" alors, quand ils arrivent, l'action est exécutée. Je peux seulement le faire en jquery (javascript framework), mais encore pourrait vous donner une idée, envie de me montrer, de toute façon?
Vous avez en double ouverture des balises de script (et vous n'avez pas besoin de spécifier le type en HTML5).
J'imagine que la dernière version de HTML. HTML 5.

OriginalL'auteur Doug Hauf | 2014-02-14

  1. 4

    Vous pouvez utiliser un écouteur d'événement pour "keydown" qui se déclenche à plusieurs reprises, aussi longtemps que la touche est maintenue enfoncée. Je crois que ce serait la meilleure approche.
    Aussi, les valeurs initiales de 'haut' et 'gauche' ne sont rien, si vous avez besoin d'assigner des valeurs initiales.

    J'ai créé une copie fixée de votre code ici:
    http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview

    J'ai l'image sur mon g:\ en voiture et souhaitez l'utiliser à la place, mais pour une raison <img id="msp.bnp" src="G:" style="position:absolute;left:0; top:0;" height="15" width="15"> ne souhaitez pas déplacer l'image. rien ne semble se produire d'autres que j'ai une image qui reste dans le même endroit.
    Fait la même chose se produire avec une image à partir d'un autre endroit?

    OriginalL'auteur Naor Biton

  2. 2

    De l'essayer. Vous devez définir une première à gauche, à droite, et cetera. Et obtenir de l'événement keyup pour obtenir la touche enfoncée et utilisez la clé pour l'exécution de la fonction droite.

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Move Object</title>
<script type="text/javascript">
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 5 + 'px';
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 5 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 5 + 'px';
}
function moveSelection(event) {                    
switch (event.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function gameLoop()
{
//change position based on speed
moveSelection();
setTimeout("gameLoop()",10);
}
</script>
</head>
<body onload="gameLoop();" onkeydown="" onkeyup="moveSelection(event)" bgcolor='yellow'>
Test
<img id="image1" src="pug.jpeg" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="15" width="15">
</body>
end html
</html>
    Que faire si j'ai voulu créer un mille-pattes jeu et avoir l'objet dans la direction générale jusqu'à ce qu'une touche est enfoncée et aussi si la barre d'espace est la touche de tir comment cela affecterait-il la boucle de jeu?

    OriginalL'auteur berentrom