Exemple d'utilisation du clavier pour contrôler le mouvement des caractères implémenté dans les compétences JavaScript

Exemple d'utilisation du clavier pour contrôler le mouvement des caractères implémenté dans les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 16:38:35

original

2477 Les gens l'ont consulté

En fait, cet exemple utilise deux temps de base de js, l'événement clavier onkeydown et l'événement d'exécution périodique setInterval.

Obtenir des résultats

Lorsqu'une certaine touche du clavier est enfoncée, les personnages de la page Web effectueront les actions correspondantes, obtenant ainsi l'effet d'utiliser le clavier pour contrôler le mouvement

Étapes de mise en œuvre

1. Fonction de la clé de réservation :

w : vers le haut
s : vers le bas
a：Gauche
d : C’est vrai
Espace : Arrêtez

2. Après avoir réservé la valeur de la clé, vous devez être en mesure de capturer l'événement clé et de déterminer sur quelle touche l'utilisateur a appuyé ?

Pour capturer les événements du clavier, vous pouvez utiliser onkeydown
Pour obtenir le code clé-valeur, vous pouvez utiliser event.keyCode

3. Utilisez l'événement d'exécution périodique setInterval pour remplacer l'image

Le remplacement des images vise à obtenir l'effet de marche de la tâche
Mais attention à bien utiliser clearInterval pour effacer l'exécution du cycle, sinon ça ira de plus en plus vite

Exemple de code :

<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>

Copier après la connexion