Contoh penggunaan papan kekunci untuk mengawal pergerakan aksara yang dilaksanakan dalam kemahiran JavaScript

Contoh penggunaan papan kekunci untuk mengawal pergerakan aksara yang dilaksanakan dalam kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 16:38:35

asal

2504 orang telah melayarinya

Malah, contoh ini menggunakan dua masa teras js, acara papan kekunci onkeydown dan setInterval acara pelaksanaan berkala.

Mencapai keputusan

Apabila kekunci tertentu pada papan kekunci ditekan, aksara pada halaman web akan melakukan tindakan yang sepadan, mencapai kesan menggunakan papan kekunci untuk mengawal pergerakan

Langkah-langkah pelaksanaan

1. Fungsi kunci tempahan:

w: naik
s: ke bawah
a：Kiri
d: Betul
Ruang: Berhenti

2. Selepas menempah nilai kunci, anda perlu dapat menangkap peristiwa utama dan menentukan kekunci yang ditekan oleh pengguna?

Untuk menangkap acara papan kekunci anda boleh menggunakan onkeydown
Untuk mendapatkan kod nilai kunci, anda boleh menggunakan event.keyCode

3. Gunakan acara pelaksanaan berkala setInterval untuk menggantikan gambar

Penggantian gambar adalah untuk mencapai kesan berjalan tugas
Tetapi berhati-hati untuk menggunakan clearInterval untuk mengosongkan pelaksanaan kitaran, jika tidak, ia akan berjalan lebih cepat dan lebih pantas

Kod sampel:

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

Salin selepas log masuk