javascript制作键盘控制圆的移动效果

最新推荐文章于 2022-12-14 12:13:12 发布

不问匆匆

最新推荐文章于 2022-12-14 12:13:12 发布

阅读量383

点赞数

分类专栏：新手文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44830974/article/details/90018460

版权

新手专栏收录该内容

40 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		#box{width: 100px;height: 100px;background-color: red;position: absolute;
			border-radius: 50%;top: 100px;}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		/*
			1.用键盘实现小球向上下左右四个方向移动
		*/
		var o=document.querySelector('#box');
		var speed=5;

		document.onkeydown=function (e) {
			e=e||window.event;
			//判断用户按了哪个键
			// console.log(e.keyCode);
			switch(e.keyCode){
				case 37:
					moveHor(-speed);//左
				break;
				case 38:
					moveVer(-speed);//上
				break;
				case 39:
					moveHor(speed);//右
				break;
				case 40:
					moveVer(speed);//下
				break;
				default:
					console.log('点击了其他按钮');
				break;
			}
		};


		// function moveLeft(){
		// 	o.style.left=o.offsetLeft-5+'px';
		// }

		// function moveRight(){
		// 	o.style.left=o.offsetLeft+5+'px';
		// }

		//水平移动
		function moveHor(speed){
			o.style.left=o.offsetLeft+speed+'px';
		}

		function moveVer(speed){
			o.style.top=o.offsetTop+speed+'px';
		}
	</script>
</body>
</html>

不问匆匆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript制作键盘控制圆的移动效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin: 0;} #box{width: 100...
复制链接

扫一扫