De fato, este exemplo usa dois horários principais de JS, eventos de teclado OnKeyDown e Se setInterval de eventos periódicos de execução.
Perceba o efeito
Quando uma tecla de teclado é pressionada, os caracteres na página da web realizam a ação correspondente, alcançando o efeito de usar o teclado para controlar o movimento
Etapas de implementação
1. A função de reservar o valor da chave:
W: para cima
S: para baixo
A: Esquerda
D: à direita
Espaço: Pare
2. Depois de reservar o valor da chave, você deve capturar o evento principal e determinar qual chave o usuário está pressionando?
Você pode usar o onkeydown para capturar eventos do teclado
Você pode usar o Event.KeyCode para obter códigos de valor-chave
3. Substitua a imagem pelo evento de execução do ciclo setInterval
Substitua a imagem para alcançar o efeito do movimento da tarefa
Mas tenha cuidado para usar o ClearInterval para executar, caso contrário, ficará mais rápido e rápido
Código de exemplo:
<html> <head> <meta charset = "utf-8"/> <title> Walks de caracteres </ititure> </head> <corpo onkeydown = "show ()"> <ul style = "postion: absoluto; borda: 1px sólido sólido #999; estilo de lista: nenhum; largura: 150px; preenchimento: 20px; fundo: #ffffef; "> <li> w: upward </li> <li> s: para baixo </li> <li> a: esquerda </li> <li> d: direita </li> <li> espaço: stop </li> <li> S: Stop </ href = "// www.vevb.com"> wulin.com </a> </u> </li> </ul> <div style = "posição: absoluto; topo: 0; esquerda: 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'; img2 = '// files.vevb.com/file_images/article/201408/201482791327688.gif?201472791345'; var x = 0; var y = 0; var xs = 0; var ys = 0; var); s = document.getElementById ('img'); var str = s.src; var área = document.getElementById ('di'); var xpos = parseInt (área.style.left); var yPos = parseInt (areseint.style.top); x+xs; y = y = ys; pos = str.LastIndexOf ('/')+1; var hz = str.substr (pos); if (hz == img1) {s.src = img2;} else {s.src = img1;}}, 50);} ks (); function; 87: img1 = '// files.vevb.com/file_images/article/201408/ren_h_1.gif' ;mg2='//files.vevb.com/file_images/article/201408/ren_h_2.gif' ;s=-5 ;xs=0;breaks 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'; 68: img1 = '// files.vevb.com/file_images/article/201408/ren_r_1.gif' ;img2='//files.vevb.com/file_images/article/201408/ren_r_2.gif' ;xs=5; 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' )=5 ;xs=0 ;bate; bandeira = false; quebrar; } Caso 13: if (! Flag) {ks (); bandeira = true; quebrar; }}} </script> </body> </html>