js推箱子原理

最新推荐文章于 2023-04-24 23:35:52 发布

王中王喜之郎

最新推荐文章于 2023-04-24 23:35:52 发布

阅读量734

点赞数 1

分类专栏： Jscript JavaScript js

本文链接：https://blog.csdn.net/weixin_45746635/article/details/102561209

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

Jscript

2 篇文章 0 订阅

订阅专栏

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>