実際、この例では、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>