原生js 小球随键盘移动事件小案例_javascript里键盘控制小球移动案例-CSDN博客

本文链接：https://blog.csdn.net/qq_40770473/article/details/108920513

原生js 小球随键盘移动事件小案例

1效果图
2html和js
3css
4总结

1效果图

在这里插入图片描述

2html和js

<body>
	<div id="ball"></div>
	<script>
		// 获取小球
		var ball = document.getElementById('ball');

		// 设置小球移动的步径
		var step = 2;
		
		// 设置定时器标志
		var run = false;
		
		// runing 计时器返回的标志
		var runing;
		
		/*
			通过上下左右键控制小球在对应的方向进行移动
				键按下，走;抬起，停
		*/ 
		window.onkeydown = function(e){		
			// 判断按下的键
			// console.log(e);
			
			// e.keyCode 返回的按键对应的数字
			// 对不同的键，使用不同的移动方式
			switch(e.keyCode){
				// 向左移动
				case 37:
					moveLeft();
				break;
				
				// 向上移动
				case 38:
					moveTop();
				break;
				
				// 向右移动
				case 39:
					moveRight();
				break;
				
				// 向下移动
				case 40:
					moveBottom();
				break;
			}
		}
		
		// 当键盘抬起时停止计时器
		window.onkeyup = function(){
			// 清除计时器
			clearInterval(runing);
			
			// 将定时器的标志变成false
			run = false;
		}
		
		// 声明向左移动的函数
		function moveLeft(){
			// 判断定时器是否存在
			if(run){
				return;
			}
			
			runing = setInterval(function(){
				// 将标志设置为true
				run = true;
			
				// 获取当前值
				var l = ball.offsetLeft;
				ball.style.left  = (l - step)+'px';
			},10);			
		}
		
		// 声明向右移动的函数
		function moveRight(){
			// 计时器叠加会造成特殊效果
			
			// 不能持续按下时或者每一回按下时，都启动一个定时器
			// 判断是否已经有了一个定时器
			// 如果已经有了定时器，那么我终止
			// 如果run 现在是true,不用再启动了
			if(run){
				return;
			}
			
			// 设置定时器
			runing = setInterval(function(){
				run = true;
				// 获取当前值
				var l = ball.offsetLeft;
				ball.style.left  = (l + step)+'px';
			},10);
		}
		
		// 向上移动的函数
		function moveTop(){
			// 判断当前是否有定时器
			if(run){
				return;
			}
			
			// 启动定时器
			runing = setInterval(function(){
				// 设置已经启动的标志
				run = true;
				var t = ball.offsetTop;
				ball.style.top = (t-step)+'px';
			},10);
		}
		
		// 向下移动的函数
		function moveBottom(){
			// 判断当前是否有定时器
			if(run){
				return;
			}
			
			// 启动定时器
			runing = setInterval(function(){
				// 设置已经启动的标志
				run = true;
			
				var t = ball.offsetTop;
				ball.style.top = (t+step)+'px';
			},10);
		}
	</script>
</body>

3css

<head>
	<meta charset="UTF-8">
	<title>上下左右</title>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}
	
	#ball {
		width: 100px;
		height: 100px;
		background: purple;
		border-radius: 50px;
		position: absolute;
	}
</style> 
</head>