JavaScript implementation of the use of the keyboard to control the character walking instance

  • 2020-03-30 03:46:09
  • OfStack

In fact, this example USES two core js times, the keyboard event onkeydown, and the periodic execution event setInterval.

Implementation effect

When the keyboard is pressed a key in the web page to achieve the corresponding action, to use the keyboard control walking effect

Implementation steps

1. Subscription key function:

W: upward
S: down
A: to the left
D: to the right
Space: stop

Two, after booking the key value, to be able to capture key events and determine which key the user pressed?

You can use onkeydown to capture keyboard events
You can use event.keycode to get the keyCode
 
Replace the image with a setInterval periodic execution event

The image is replaced for the task walk effect
But be careful to use clearInterval to clear the cycle, otherwise it will go faster and faster

Sample code:


<html>
	<head>
		<meta charset="utf-8" />
		<title> People walking around </title>
	</head>
	<body onkeydown="show()">
		<ul style="posttion:absolute;border:1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;">
			<li>w Up: </li>
			<li>s Down: </li>
			<li>a Left: </li>
			<li>d To the right: </li>
			<li> Space: stop </li>
			<li style="margin-top:20px;"><u><a href="//www.jb51.net "> Script house </ a> </ u> </ li>
		</ul>
		<div style="position:absolute;top:0;left:0" id='di'><img src="//files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div>
		<script>
			var img1='//files.jb51.net/file_images/article/201408/201482791656841.gif?201472791722';
			var img2='//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='//files.jb51.net/file_images/article/201408/ren_h_1.gif';
						img2='//files.jb51.net/file_images/article/201408/ren_h_2.gif';
						ys=-5;
						xs=0;
						break;
					case 65:
						img1='//files.jb51.net/file_images/article/201408/ren_l_1.gif';
						img2='//files.jb51.net/file_images/article/201408/ren_l_2.gif';
						xs=-5;
						ys=0;
						break;
					case 68:
						img1='//files.jb51.net/file_images/article/201408/ren_r_1.gif';
						img2='//files.jb51.net/file_images/article/201408/ren_r_2.gif';
						xs=5;
						ys=0;
						break;
					case 83:
						img1='//files.jb51.net/file_images/article/201408/ren_q_1.gif';
						img2='//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>

Related articles: