JavaScript事件——【小案例】小人快跑

最新推荐文章于 2022-08-06 13:08:35 发布

原创最新推荐文章于 2022-08-06 13:08:35 发布 · 541 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了一种使用HTML和JavaScript实现键盘控制角色移动的方法。通过监听键盘事件，结合CSS定位，实现角色在页面上的上下左右移动，并通过切换图片序列展示动画效果。代码示例清晰，便于理解和实践。

效果图：

images：
在这里插入图片描述

操作：
按“上” “下” “左” “右” 键控制小人移动方向

步骤：
      ①获取当前文档的节点，注意事件一定是document加，不能imgs.onkeydown
      ②传入e，判断按键走向（switch、keyCode）
      ③获取节点imgs
      ④封装一个函数，直接传入参数left、right、up、down

【附】小人快跑 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#imgs{
			position:absolute;
			left:500px;
			top:200px;
		}
		</style>
		<body>
		<img src="img/images/down-0.png" alt="" id="imgs">
		<script>   
        var imgs=document.getElementById("imgs");//③获取节点imgs
		var index=-1;
		function fn(value){//封装一个函数,直接传入参数left、right、up、down
			index++;
			if(index>4){
				index=0;
			}
			imgs.src ="images/"+value+"-"+index+".png";
		}
	    document.onkeydown = function(e){//①获取当前文档的节点
		var e= window.event|| e;
		switch(e.keyCode){//传入e,判断按键走向
			case 37:
				imgs.style.left = imgs.offsetLeft-10+"px";
				fn("left") ;
				break;
			case 38:
				imgs.style.top = imgs.offsetTop-10+"px";
				fn("up");
				break;
			case 39:
				imgs.style.left = imgs.offsetLeft+10+"px";
				fn("right");
				break;
			case 40:
				imgs.style.top = imgs.offsetTop+10+"px";
				fn("down");
				break;
		}
	}
	</script>
	</body>
</html>