De hecho, este ejemplo usa dos tiempos principales de JS, el evento de teclado OnKeydown y el evento de ejecución periódica SetInterval.
Darse cuenta del efecto
Cuando se presiona una tecla de teclado, los caracteres en la página web se dan cuenta de la acción correspondiente, logrando el efecto de usar el teclado para controlar el movimiento
Pasos de implementación
1. La función del valor clave de la reserva:
W: hacia arriba
S: Down
A: izquierda
D: A la derecha
Espacio: parar
2. Después de reservar el valor de la clave, debe poder capturar el evento de la tecla y determinar qué tecla está presionando el usuario.
Puede usar OnKeydown para capturar eventos de teclado
Puede usar event.keycode para obtener códigos de valor clave
3. Reemplace la imagen con el evento de ejecución del ciclo SetInterval
Reemplace la imagen para lograr el efecto de movimiento de la tarea
Pero tenga cuidado de usar ClearInterval para ejecutar, de lo contrario se volverá más rápido y más rápido
Código de muestra:
<html> <head> <meta charset = "utf-8"/> <title> camina de personajes </title> </head> <body onckeydown = "show ()"> <ul style = "Postion: Absolute; border: 1px sólido #999; estilo de lista: Ninguno; ancho: 150px; relleno: 20px; fondo: #ffffef; "> <li> W: Upward </li> <li> S: hacia abajo </li> <li> a: izquierda </li> <li> D: derecho </li> <li> Espacio: parar </li> <li> S: parar </li> <li> s href = "// www.vevb.com"> wulin.com </a> </u> </li> </ul> <div style = "posición: absoluto; top: 0; izquierda: 0" id = 'di'> <img src = "// files.vevb.com/file_images/article/201408/201482791327688.gif?201472791345" id = "img"> </div> <script> 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 = function ks () {zq = setinterval (function () s = document.getElementById ('img'); var str = s.src; var área = documento pos = str.lastIndexOf ('/')+1; var hz = str.substr (pos); if (hz == img1) {s.src = img2;} más 87: img1 = '// files.vevb.com/file_images/article/201408/ren_h_1.gif';img2='/files.vevb.com/file_images/article/201408/ren_h_2.gif' ;ys=-5;xs=0;break; 65: img1 = '// files.vevb.com/file_images/article/201408/ren_l_1.gif';img2='/files.vevb.com/file_images/article/201408/ren_l_2.gif',;xs=-5;ys=0;break; 68: img1 = '// files.vevb.com/file_images/article/201408/ren_r_1.gif';img2='/files.vevb.com/file_images/article/201408/ren_r_22.gif';xs=5;ys=0; break 83: img1 = '// files.vevb.com/file_images/article/201408/ren_q_1.gif';img2='//files.vevb.com/file_images/article/201408/ren_q_2.gif' ;ys=5;xs=0; rompiendo; if (flag) {clearval (Zq); bandera = falso; romper; } caso 13: if (! flag) {ks (); bandera = verdadero; break; }}} </script> </body> </html>