Фактически, в этом примере используются два основных времена JS, события клавиатуры Onkeydown и периодического события выполнения SetInterval.
Осознайте эффект
Когда нажата клавиша клавиатуры, символы на веб -странице реализуют соответствующее действие, достигая эффекта использования клавиатуры для управления движением
Шаги внедрения
1. Функция значения ключа бронирования:
W: вверх
S: вниз
A: Оставо
D: справа
Пространство: остановиться
2. После бронирования значения ключа вы должны быть в состоянии захватить событие клавиши и определить, какую клавишу нажимает пользователь?
Вы можете использовать OnkeyDown для захвата событий клавиатуры
Вы можете использовать event.keycode для получения кодов ключевых значений
3. Замените изображение на событие выполнения цикла SetInterval
Замените картинку для достижения эффекта движения задачи
Но будьте осторожны в использовании ClearInterval для выполнения, в противном случае он будет быстрее и быстрее
Пример кода:
<html> <head> <meta charset = "utf-8"/> <title> walks </title> </head> <body onkeydow #999; Стиль списка: нет; Ширина: 150px; Padding: 20px; фон: #ffffef; "> <li> w: upward </li> <li> s: вниз </li> <li> a: слева </li> <li> d: справа </li> <li> Пространство: Stop </li> <li> s: stop </li> <li> s href = "// www.vevb.com"> wulin.com </a> </u> </li> </ul> <div style = "Положение: Absolute; Top: 0; слева: 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 = var ZQ = null; funct s = document.getElementById ('img'); var str = s.src; var aea aem = document.getElementbyId ('di'); var xpos = parseint (aem.style.left); var ypos = parseInt (aem.style.top); x = xs; y = ys; gree.style.lelft = x = xs; 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 (sz); 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'sis=-5; xs=0;come;case;care; 65: img1 = '// files.vevb.com/file_images/article/201408/ren_l_1.gif'; img2='//files.vevb.com/file_images/article/201408/ren_2.gif's [xs=-5 ;ys=0;cast; CASE; 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's=5;ys=0;come; cach 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's=5; xs=0; came 32: if (flag) {claremer; flag = false; перерыв; } случай 13: if (! flag) {ks (); flag = true; Break; }}} </script> </body> </html>