听话的红色小球

最新推荐文章于 2024-06-11 13:53:26 发布

洛诚

最新推荐文章于 2024-06-11 13:53:26 发布

阅读量211

点赞数

分类专栏： js笔记文章标签： js html css

本文链接：https://blog.csdn.net/qq_34332073/article/details/80777192

版权

js笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

用原生js实现一个可以用wasd控制在屏幕内不断移动的小红球

作为js初学者，感觉新学习的键盘事件很有趣。然后，就想着我能不能做一个东西，可以用上键盘事件。便有了这个“听话的红色小球”的诞生。
开始的时候，我是直接在键盘事件后面的匿名函数中，写了四个判断，在判断成功的执行语句中使用document.getElementById("dd").style.top="200px"和document.getElementById("dd").style.top="100px"的方法直接更改css中设置的top和left的值，用来实现小红球的移动。但是后来发现，由于这样设置的top和left的值是固定的，就只能实现小红球单次得向上移动或者向其他方向移动，把小球禁锢在了四个点上，无法让它听话的随着wasd在全屏幕内移动。

然后就进入了第二个阶段，为了使小红球的移动范围扩大，我放弃了之前在在判断成功的执行语句中直接设置top和left的固定值得方法，改为用document.getElementById("dd").style.left=d()+"px"这种方法，为每次的top和left赋值。首先，我设置了两个变量x和y分别用来接收css中设置的top和left的值。然后声明了四个方法，分别是水平移动的a()、d()和竖直方向上移动的s()、w(),这四个方法分别通过对y和x的值得改变实现小球的位移。我选择的没次位移20像素的距离，有需要的话可以改到每次移动1像素的距离。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div平移</title>
    <style>
        #dd{
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            position: relative;
            top:300px;
            left: 200px;
        }
    
    </style>
</head>
<body>
        <div id="dd" >

        </div>
</body>
<script> 
    var dd=document.getElementById("dd");
    //键盘事件
    document.body.onkeydown = function(e){
        //87为w的keyCode,按下w时，调用w()函数。
        if(e.keyCode==87){
            dd.style.top=w()+"px";
        }else if(e.keyCode==65){
            dd.style.left=a()+"px";   
        }else if(e.keyCode==83){
            dd.style.top=s()+"px";
        }else if(e.keyCode==68){
            dd.style.left=d()+"px";
        }
        //console.log(e.keyCode);
    }
    //获得css设置的top值
    var x =dd.offsetTop;
    console.log(x);
    //获得css设置的left值
    var y =dd.offsetLeft;
    console.log(y);
    //w()方法，调用时top减小
    function w(){
        x -=20;
        return x;
    }
    //s()方法，调用时top增加
    function s(){
        x +=20;
        return x;
    }
    //a()方法，调用时left减小
    function a(){
        y -=20;
        return y;
    }
    //d()方法，调用时left增加
    function d(){
        y +=20;
        return y;
    }

</script>
</html>