Javascript Girl
  1. Javascript Girl
  3. Déplacez une image avec les touches fléchées en utilisant JavaScript
Intereting Posts
Utilisez google maps computeDistanceBetween pour obtenir l'emplacement le plus proche renvoie NaN Comment faire pour identifier la surcharge précédente a été causée en cliquant sur le bouton Fermer Graphique de jauge D3js Multiple population – mongoosejs Les meilleures pratiques Javascript désactivées? Textarea charCount – Prévention de la pâte d'utilisateur Knockout clique sur un comportement étrange Protégez les scripts Greasemonkey? Différence entre un constructeur et un objet Comment résumer deux nombres de l'étiquette d'entrée? Regex Expressions ne capture pas l'URL dans une <img tag Problème dans cet attribut.withCredentials dans le partage de ressources Cross Origin Passer des valeurs javascript dans la balise iframe La construction angulaire ne fonctionne pas sur le serveur Copier une image dans un presse-papiers en utilisant JavaScript / jquery

Déplacez une image avec les touches fléchées en utilisant JavaScript

Je souhaite pouvoir déplacer une image sur l'écran avec JavaScript. Le code que je pose ci-dessous mettra l'image sur l'écran mais ne me permettra pas de la déplacer.

Question: Voulez-vous pouvoir déplacer l'image autour de l'écran avec les touches fléchées?

Je suis certain qu'il doit y avoir une boucle de jeu qui fonctionne en permanence tout le temps lorsque la page est active. Comment cela se fait, je ne suis pas sûr non plus, mais je pense qu'il pourrait y avoir une fonction de chargement.

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>

Vous pouvez utiliser un écouteur d'événement pour "downdown" qui déclenche plusieurs fois, tant que la touche est maintenue enfoncée. Je crois que ce serait l'approche privilégiée. En outre, les valeurs initiales pour «haut» et «gauche» ne sont rien, donc vous devez affecter des valeurs initiales.

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

Essaye ça. Vous devez définir une première gauche, droite, et cetera. Et récupérez l'événement de la souris pour appuyer sur la touche et utilisez la touche pour exécuter la bonne fonction. 

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