Tatsächlich verwendet dieses Beispiel zwei Kernzeiten von js, das Tastaturereignis onkeydown und das periodische Ausführungsereignis setInterval.
Ergebnisse erzielen
Wenn eine bestimmte Taste auf der Tastatur gedrückt wird, führen die Zeichen auf der Webseite entsprechende Aktionen aus und erzielen so den Effekt, dass die Tastatur zur Steuerung von Bewegungen verwendet wird
Umsetzungsschritte
1. Funktion der Buchungstaste:
w: oben
s: nach unten
a:Links
d: Richtig
Leertaste: Stopp
2. Nach der Buchung des Schlüsselwerts müssen Sie in der Lage sein, das Schlüsselereignis zu erfassen und festzustellen, welche Taste der Benutzer gedrückt hat?
Um Tastaturereignisse zu erfassen, können Sie onkeydown verwenden
Um den Schlüsselwertcode zu erhalten, können Sie event.keyCode
verwenden
3. Verwenden Sie das periodische Ausführungsereignis setInterval, um das Bild zu ersetzen
Das Ersetzen von Bildern dient dazu, den Task-Walking-Effekt zu erzielen
Achten Sie jedoch darauf, dass Sie clearInterval verwenden, um die Zyklusausführung zu löschen, da sie sonst immer schneller wird
Beispielcode:
<html>
<head>
<meta charset="utf-8" />
<title>人物走动</title>
</head>
<body onkeydown="show()">
<ul style="posttion:absolute;border:1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;">
<li>w：向上</li>
<li>s：向下</li>
<li>a：向左</li>
<li>d：向右</li>
<li>空格：停止</li>
<li style="margin-top:20px;"><u><a href="http://www.jb51.net">脚本之家</a></u></li>
</ul>
<div style="position:absolute;top:0;left:0" id='di'><img src="http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div>
<script>
var img1='http://files.jb51.net/file_images/article/201408/201482791656841.gif?201472791722';
var img2='http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345';
var x=0;
var y=0;
var xs=0;
var ys=0;
var flag=true;
var zq=null;
function ks(){
zq=setInterval(function(){
var 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;
area.style.top=y;
var 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;
switch(sz){
case 87:
img1='http://files.jb51.net/file_images/article/201408/ren_h_1.gif';
img2='http://files.jb51.net/file_images/article/201408/ren_h_2.gif';
ys=-5;
xs=0;
break;
case 65:
img1='http://files.jb51.net/file_images/article/201408/ren_l_1.gif';
img2='http://files.jb51.net/file_images/article/201408/ren_l_2.gif';
xs=-5;
ys=0;
break;
case 68:
img1='http://files.jb51.net/file_images/article/201408/ren_r_1.gif';
img2='http://files.jb51.net/file_images/article/201408/ren_r_2.gif';
xs=5;
ys=0;
break;
case 83:
img1='http://files.jb51.net/file_images/article/201408/ren_q_1.gif';
img2='http://files.jb51.net/file_images/article/201408/ren_q_2.gif';
ys=5;
xs=0;
break;
case 32:
if(flag){
clearInterval(zq);
flag=false;
break;
}
case 13:
if(!flag){
ks();
flag=true;
break;
}
}
}
</script>
</body>
</html>
