通过键盘来控制页面的小球

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qdabc.cn</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
<script type="text/javascript">
	window.onload=function(){
		var myDiv=document.getElementsByTagName("div")[0];
		var dis=100;
		var x=0;
		var y=0;
		document.onkeydown=function(event){
			var tempCode=event.keyCode;
			switch(tempCode){
				case 37:
				x-=100;
					break;
				case 38:
				y-=100;
					break;
				case 39:
				x+=100;
					break;
				case 40:
				y+=100;
					break;
			}
			myDiv.style.left=x+"px";
			myDiv.style.top=y+"px";
		}
	}
</script>

欢迎分享本文,转载请保留出处:前端ABC » 通过键盘来控制页面的小球

分享到:更多 ()

发表评论 0