実際、この例では、JSの2つのコアタイム、キーボードイベントオンキーダウン、および定期的な実行イベントSetIntervalを使用しています。
効果を実現します
キーボードキーが押されると、Webページ上の文字が対応するアクションを実現し、キーボードを使用して動きを制御する効果を達成します
実装手順
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 = "posion：absolute; border：1px solid ＃999;リストスタイル：なし;幅：150px;パディング：20px;背景：#ffffef; "> <li> W：上向き</li> <li> s：下向き</li> <li> a：左</li> <li> d：右</li> <li>スペース：停止</li> <li> href = "// www.vevb.com"> wulin.com </a> </u> </li> </ul> <div style = "position：absolute; top：0; left：0" id = 'di'> <img src = "// files.vevb.com/file_images/article/201408/201482791327688.gif?201472791345" id = "img"> </div> <scrip> 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 = setInters（） 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; area.style.left = x; 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.event.event.event.event.event.event.event（sz） 87：img1 = '// files.vevb.com/file_images/article/201408/ren_h_1.gif';img2='//files.vevb.com/file_images/201408/ren_h_2.gif'hhys = 5;xs = 0;ケース65：img1 = '// files.vevb.com/file_images/article/201408/ren_l_1.gif';img2='//files.vevb.com/file_images/201408/ren_l_2.gif'hexs=-5; 68：img1 = '// files.vevb.com/file_images/article/201408/ren_r_1.gif';img2='//files.vevb.com/file_images/201408/ren_r_2.gif';xs = 5;ys = 0;ケース83：img1 = '// files.vevb.com/file_images/article/201408/ren_q_1.gif';img2='//files.vevb.com/file_images/201408/ren_q_2.gif'hhys = 5;xs = 0;ケース32（ZQ） flag = false;壊す; }ケース13：if（！flag）{ks（）; flag = true; break; }}} </script> </body> </html>