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

WBOY
Lepaskan: 2016-05-16 16:38:35
asal
2496 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
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan