Maison >interface Web >js tutoriel >Exemple d'utilisation du clavier pour contrôler le mouvement des caractères implémenté dans les compétences JavaScript_javascript
En fait, cet exemple utilise deux temps de base de js, l'événement clavier onkeydown et l'événement d'exécution périodique setInterval.
Obtenir des résultats
Lorsqu'une certaine touche du clavier est enfoncée, les personnages de la page Web effectueront les actions correspondantes, obtenant ainsi l'effet d'utiliser le clavier pour contrôler le mouvement
Étapes de mise en œuvre
1. Fonction de la clé de réservation :
w : vers le haut
s : vers le bas
a:Gauche
d : C’est vrai
Espace : Arrêtez
2. Après avoir réservé la valeur de la clé, vous devez être en mesure de capturer l'événement clé et de déterminer sur quelle touche l'utilisateur a appuyé ?
Pour capturer les événements du clavier, vous pouvez utiliser onkeydown
Pour obtenir le code clé-valeur, vous pouvez utiliser event.keyCode
3. Utilisez l'événement d'exécution périodique setInterval pour remplacer l'image
Le remplacement des images vise à obtenir l'effet de marche de la tâche
Mais attention à bien utiliser clearInterval pour effacer l'exécution du cycle, sinon ça ira de plus en plus vite
Exemple de code :
<html> <head> <meta charset="utf-8" /> <title>人物走动</title> </head> <body onkeydown="show()"> <ul style="posttion:absolute;border:1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;"> <li>w:向上</li> <li>s:向下</li> <li>a:向左</li> <li>d:向右</li> <li>空格:停止</li> <li style="margin-top:20px;"><u><a href="http://www.jb51.net">脚本之家</a></u></li> </ul> <div style="position:absolute;top:0;left:0" id='di'><img src="http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div> <script> var img1='http://files.jb51.net/file_images/article/201408/201482791656841.gif?201472791722'; var img2='http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345'; var x=0; var y=0; var xs=0; var ys=0; var flag=true; var zq=null; function ks(){ zq=setInterval(function(){ var s=document.getElementById('img'); var str=s.src; var area=document.getElementById('di'); var xpos=parseInt(area.style.left); var ypos=parseInt(area.style.top); x=x+xs; y=y+ys; area.style.left=x; area.style.top=y; var pos=str.lastIndexOf('/')+1; var hz=str.substr(pos); if(hz==img1){ s.src= img2; }else{ s.src= img1; } },50); } ks(); function show(){ var sz=window.event.keyCode; switch(sz){ case 87: img1='http://files.jb51.net/file_images/article/201408/ren_h_1.gif'; img2='http://files.jb51.net/file_images/article/201408/ren_h_2.gif'; ys=-5; xs=0; break; case 65: img1='http://files.jb51.net/file_images/article/201408/ren_l_1.gif'; img2='http://files.jb51.net/file_images/article/201408/ren_l_2.gif'; xs=-5; ys=0; break; case 68: img1='http://files.jb51.net/file_images/article/201408/ren_r_1.gif'; img2='http://files.jb51.net/file_images/article/201408/ren_r_2.gif'; xs=5; ys=0; break; case 83: img1='http://files.jb51.net/file_images/article/201408/ren_q_1.gif'; img2='http://files.jb51.net/file_images/article/201408/ren_q_2.gif'; ys=5; xs=0; break; case 32: if(flag){ clearInterval(zq); flag=false; break; } case 13: if(!flag){ ks(); flag=true; break; } } } </script> </body> </html>