Heim > Artikel > Web-Frontend > Beispiel für die Verwendung einer Tastatur zur Steuerung der Zeichenbewegung, implementiert in JavaScript_Javascript-Fähigkeiten

Beispiel für die Verwendung einer Tastatur zur Steuerung der Zeichenbewegung, implementiert in JavaScript_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:38:352477Durchsuche

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&#63;201472791345" id="img"></div>
		<script>
			var img1='http://files.jb51.net/file_images/article/201408/201482791656841.gif&#63;201472791722';
			var img2='http://files.jb51.net/file_images/article/201408/201482791327688.gif&#63;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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Beispiele für die Verwendung von jQuery-Ereignissen_jqueryNächster Artikel：Zusammenfassung der Beispiele für die Verwendung von jQuery-Ereignissen_jquery

In Verbindung stehende Artikel

Mehr sehen