Faktanya, contoh ini menggunakan dua waktu inti JS, keyboard event onKeydown, dan Execution Excution Event SetInterval.
Menyadari efeknya
Ketika tombol keyboard ditekan, karakter pada halaman web mewujudkan tindakan yang sesuai, mencapai efek menggunakan keyboard untuk mengontrol gerakan
Langkah Implementasi
1. Fungsi nilai kunci pemesanan:
W: Ke atas
S: Down
A: Kiri
D: Di sebelah kanan
Ruang: Berhenti
2. Setelah memesan nilai kunci, Anda harus dapat menangkap acara kunci dan menentukan tombol mana yang ditekan pengguna?
Anda dapat menggunakan OnKeydown untuk menangkap acara keyboard
Anda dapat menggunakan event.keycode untuk mendapatkan kode nilai kunci
3. Ganti gambar dengan Event Eksekusi Siklus SetInterval
Ganti gambar untuk mencapai efek pergerakan tugas
Tapi berhati -hatilah untuk menggunakan ClearInterval untuk dieksekusi, jika tidak, itu akan menjadi lebih cepat dan lebih cepat
Kode contoh:
<html> <head> <meta charset = "utf-8"/> <itement> karakter berjalan </iteme> </head> <body onkeydown = "show ()"> <ul style = "postion: absolute; perbatasan: 1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;"><li>w:upward</li><li>s:downward</li><li>a: left</li><li>d:right</li><li>space:stop</li><li>s:stop</li><li>s href = "// www.vevb.com"> wulin.com </a> </u> </li> </ul> <div style = "Posisi: absolute; atas: 0; kiri: 0" id = 'di'> <img src = "// file.vevb.com/file_images/article/201408/2014827913276888.gif?201472791345" id = "img"> </div> <script> var img1 = '// file.vevb.com/file_images/article/201408/201482791656841.gif?201472791722';var img2 = '// file.vevb.com/file_images/article/201408/2014827913276888.gif?201472791345';var x = 0; var y = 0; var xs = 0; var ys = 0; var flag = true zq = null = null = 0; 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. POS = str.LastIndexOf ('/')+1; var hz = str.substr (pos); if (hz == img1) {s.src = img2;} else {s.src = img1;}, 50);} ks (); fungsi show () {var sz = window.event.event. 87: img1 = '// file.vevb.com/file_images/article/201408/ren_h_1.gif';img2='//files.vevb.com/file_images/article/201408/ren_h_2.gif' ;sy=-5 ;xs=0; BROUNDIR; 65: img1 = '// file.vevb.com/file_images/article/201408/ren_l_1.gif';img2='//files.vevb.com/file_images/article/201408/ren_l_2.gif';xs=-5 ;sys=0; 68: img1 = '// file.vevb.com/file_images/article/201408/ren_r_1.gif';img2='//files.vevb.com/file_images/article/201408/ren_r_2.gif';xs=5 ;sys=0 83: img1 = '// file.vevb.com/file_images/article/201408/ren_q_1.gif';img2='//files.vevb.com/file_images/article/201408/Ren_Q_2.ygif';ys=5 ;xs=0; BROAK8/Ren_Q_2.YIF'IF'IF'IT bendera = false; merusak; } case 13: if (! flag) {ks (); bendera = true; break; }}} </script> </body> </html>