En fait, cet exemple utilise deux temps de base de JS, l'événement de clavier sur lakedown et l'événement d'exécution périodique setInterval.
Réaliser l'effet
Lorsqu'une touche de clavier est enfoncée, les caractères de la page Web réalisent l'action correspondante, réalisant l'effet de l'utilisation du clavier pour contrôler le mouvement
Étapes de mise en œuvre
1. La fonction de réservation de la valeur clé:
W: vers le haut
S: Down
R: à gauche
D: à droite
Espace: s'arrêter
2. Après la réservation de la valeur de la clé, vous devez être en mesure de capturer l'événement de clé et de déterminer la touche que l'utilisateur appuie?
Vous pouvez utiliser onkeydown pour capturer des événements de clavier
Vous pouvez utiliser Event.KeyCode pour obtenir des codes de valeur clé
3. Remplacez l'image par l'événement d'exécution du cycle SetInterval
Remplacez l'image pour réaliser l'effet de mouvement de la tâche
Mais veillez à utiliser ClearInterval pour exécuter, sinon il deviendra de plus en plus rapide
Exemple de code:
<html> <éad- head> <meta charset = "utf-8" /> <ititle> walks de caractères </title> </ head> <body onkeydown = "show ()"> <ul style = "postion: absolu; border: 1px solide # 999; Style de la liste: Aucun; largeur: 150px; padding: 20px; arrière-plan: #FFFFEF; "> <li> W: vers le haut </li> <li> S: vers le bas </li> <li> A: gauche </li> <li> D: droite </li> <li> Espace: arrêt </li> <li> S: stop </li> <li> s href = "// www.vevb.com"> wulin.com </a> </u> </li> </ul> <div style = "position: absolu; top: 0; gauche: 0" id = 'di'> <img src = "// files.vevb.com/file_images/article/201408/201482791327688.gif?201472791345" id = "img"> </ div> <cript> var img1 = '// files.vevb.com/file_images/article/201408/201482791656841.gif?201472791722' ;var img2 = '// files.vevb.com/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 = set; 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.tyle.top = ys; area.style.left = x; area.style.tyle.top = ys; area.style.left = x; area.style.tyle.top = ys; area.style.left = x; area.style.tyle. pos = str.lastindexof ('/') + 1; var hz = str.substr (pos); if (hz == img1) {s.src = img2;} else {s.src = img1;}}, 50);} ks () 87: img1 = '// files.vevb.com/file_images/article/201408/ren_h_1.gif'ito 65: img1 = '// files.vevb.com/file_images/article/201408/ren_l_1.gif'ito 68: img1 = '// files.vevb.com/file_images/article/201408/ren_r_1.gif'ito 83: IMG1 = '// files.vevb.com/file_images/article/201408/ren_q_1.gif'itticle/201408/ren_q_2.gif' ;ys=5;xs=0 ;break; abrivent 32: if (drape) {ClearInterval (zq); Flag = false; casser; } Cas 13: if (! Flag) {ks (); drapeau = vrai; pause; }}} </ script> </ body> </html>