ในความเป็นจริงตัวอย่างนี้ใช้สองช่วงเวลาหลักของ JS, เหตุการณ์แป้นพิมพ์ onkeydown และเหตุการณ์การดำเนินการเป็นระยะ
ตระหนักถึงผลกระทบ
เมื่อกดปุ่มคีย์บอร์ดอักขระบนหน้าเว็บจะตระหนักถึงการกระทำที่สอดคล้องกันโดยบรรลุผลของการใช้แป้นพิมพ์เพื่อควบคุมการเคลื่อนไหว
ขั้นตอนการดำเนินการ
1. ฟังก์ชั่นของค่าคีย์การจอง:
W: ขึ้นไป
S: ลง
A: ซ้าย
D: ไปทางขวา
พื้นที่: หยุด
2. หลังจากจองค่าคีย์คุณจะต้องสามารถจับภาพเหตุการณ์คีย์และกำหนดคีย์ที่ผู้ใช้กำลังกดได้?
คุณสามารถใช้ onkeydown เพื่อจับเหตุการณ์แป้นพิมพ์
คุณสามารถใช้ event.keycode เพื่อรับรหัสค่าคีย์
3. แทนที่ภาพด้วยเหตุการณ์การดำเนินการรอบ SetInterval
แทนที่ภาพเพื่อให้ได้เอฟเฟกต์การเคลื่อนไหวของงาน
แต่ระวังให้ใช้ ClearInterval เพื่อดำเนินการมิฉะนั้นจะเร็วขึ้นและเร็วขึ้น
รหัสตัวอย่าง:
<html> <head> <meta charset = "utf-8"/> <title> ตัวละครเดิน </title> </head> <body onkeydown = "show ()"> <ul style = "postion: Absolute; border: 1px solid solid #999; list-style: none; width: 150px; padding: 20px; พื้นหลัง: #ffffef; "> <li> w: ขึ้นไป </li> <li> s: ลง </li> <li> a: ซ้าย </li> <li> d: ขวา </li> <li> 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 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; s = document.getElementById ('img'); var str = s.src; var areame = document.getElementById ('di'); var xpos = parseint (are.style.left); var ypos = parseint (are.style.top); x = x+xs; pos = str.lastindexof ('/')+1; var hz = str.substr (pos); ถ้า (hz == img1) {s.src = img2;} else {s.src = img1;}}, 50);} ks (); 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'; 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'ie 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'; ธง = เท็จ; หยุดพัก; } กรณีที่ 13: ถ้า (! ธง) {ks (); ธง = true; break; }}} </script> </body> </html>