js推箱子原理

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>

我把图片也分享出来,也免得自己找,

图片可以自己随意换,不违法就行
在这里插入图片描述

发布了27 篇原创文章 · 获赞 45 · 访问量 2681

猜你喜欢

转载自blog.csdn.net/weixin_45746635/article/details/102561209