js控制图片的上下左右的运动——推箱子原理,简单的演示
这是录制的一段小视频,
这是代码的运行效果,和推箱子,贪吃蛇原理一样,
这里是给你们的代码展示,直接CV就可以用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label id="show"></label>
//在这里插入一张图片
<img id="img" src="on.jpg" style="width: 100px;height: 100px;position: absolute;left: 0px;top: 0px">
<script language="JavaScript">
var obj = document.getElementById("img");
obj.left = 0;
obj.top = 0;
//控制上下左右运动
function move() {
console.log(event.keyCode);
if(event.keyCode == 37 || event.keyCode == 65){
obj.left-=100;
}
if(event.keyCode == 38 || event.keyCode == 87){
obj.top-=100;
}
if(event.keyCode == 39 || event.keyCode == 68){
obj.left+=100;
}
if(event.keyCode == 40 || event.keyCode == 83){
obj.top+=100;
}
obj.style.left = obj.left+'px',obj.style.top = obj.top+'px';
}
document.onkeydown = move;
</script>
</body>
</html>
我把图片也分享出来,也免得自己找,
图片可以自己随意换,不违法就行