JS动画随机移动效果和键盘控制移动效果

魔法少女郭德纲_

已于 2023-07-07 10:03:56 修改

阅读量242

点赞数 1

文章标签：前端 css

于 2023-07-06 17:34:13 首次发布

本文链接：https://blog.csdn.net/m0_47673203/article/details/131581537

版权

首先给一个活动区域

   <style>
        .f{
            width: 1200px;
            height: 800px;
            border: 1px solid red;
            position: relative;
        }
        .z{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: aqua;
            position: absolute;
            left: 550px;
            top: 350px;
        }
        .b{
            width: 300px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 500px;
            top: 800px;
        }
    </style>
</head>
<body>
    <div class="f" onclick="start()">
        <div id="ball" class="z"></div>
        <div id="ban" class="b">开始</div>
    </div>

然后根据活动区域生成一个随机数，由于活动区域的长为1200，所以生成随机数0-1200，作为移动到边界的横坐标值

let r=Math.floor(Math.random()*1200

这里设置为向上移动，移动到边界时的横坐标为r,纵坐标top为0，根据几何原理他们有以下关系：

由此得出以下代码

let r=Math.floor(Math.random()*1200)
    let x=600,y=400,q=500
    let x_y=(x-r)/(y-50)
    let dy=-1
    let dx=x_y*dy

当小球移动到边界时进行反转，从而实现镜像移动

 function start(){
        setInterval(() => {
            x+=dx
            y+=dy
            if(y<=50){
                dy=-dy
            }
            if(y>=750){
                if(x>=q&&x<=q+300){
                    dy=-dy
                }else{
                    alert('游戏结束')
                }
            }
            if(x<=50||x>=1150){
                dx=-dx
            }
            ball.style.left=x-50+'px'
            ball.style.top=y-50+'px'
        }, 5);
    }

根据document.onkeydown获取键盘输入,并根据keyCode识别键盘输入的数据，从而实现板的移动

  document.onkeydown=function(e){
        switch(e.keyCode){
        case 37:
            q-=10
            ban.style.left=q+'px'
            break;
        case 39:
            q+=10
            ban.style.left=q+'px'
            break;
    }

多个对象进行移动时使用οnclick=("this")来获取当前点击对象，下面通过obj来获得参数，并根据offsetTop和offsetLeft获取对象当前的坐标值。

    function move1(obj){
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                    obj.style.left= --obj.offsetLeft +'px'
                    break;
                case 38:
                    obj.style.top=--obj.offsetTop +'px'
                    break;
                case 39:
                    obj.style.left=++obj.offsetLeft +'px'
                    break;
                case 40:
                    obj.style.top=++obj.offsetTop +'px'
                    break;
            }
        }
    }

下面是通过数组实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            操控单个元素，布局方式：子元素绝对定位，父元素相对定位
        虽有子元素，left和top都是相对于父元素的左上顶点，因此每个子元素的left和top初始值不一样
            操控批量的元素：父元素流式布局flex，子元素相对定位每个子元素
        都是相对于自身的初始位置，每个子元素的left和top的初始值都是0
        */
        .f1,.f2{
            display: flex;
            justify-content: space-around;
        }
        .f1>img{
            width: 200px;
            height: 300px;
            position: relative;
        }
        .f2{
            margin-top: 150px;
        }
        .f2>div{
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="f1">
        <img src="imgs/曹操.jpg" onclick="move1(this,0)">
        <img src="imgs/貂蝉.webp" onclick="move1(this,1)">
        <img src="imgs/关羽.webp" onclick="move1(this,2)">
        <img src="imgs/刘备.jpg" onclick="move1(this,3)">
        <img src="imgs/刘协.webp" onclick="move1(this,4)">
        <img src="imgs/孙权.webp" onclick="move1(this,5)">
    </div>
    <div class="f2">
        <div>刘备</div>
        <div>关羽</div>
        <div>刘协</div>
        <div>孙权</div>
        <div>曹操</div>
        <div>貂蝉</div>
    </div>
</body>
<script>
    //定义一个坐标对象，记录当前操作的元素
    let pos={x:0,y:0}
    //定义一个数组，存放6个对象，独立的记录每个对象的运动坐标
    let arr =[{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}]
    function move1(img,i){
        pos=arr[i];
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                    pos.x=pos.x-5;
                    img.style.left=pos.x +'px'
                    break;//左
                case 38:
                    pos.y-=5;
                    img.style.top=pos.y +'px'
                    break;//上
                case 39:
                    pos.x+=5;
                    img.style.left=pos.x +'px'
                    break;//右
                case 40:
                    pos.y+=5;
                    img.style.top=pos.y +'px'
                    break;//下

            }
        }
    }
</script>
</html>

操控单个元素，布局方式：子元素绝对定位，父元素相对定位虽有子元素，left和top都是相对于父元素的左上顶点，因此每个子元素的left和top初始值不一样

操控批量的元素：父元素流式布局flex，子元素相对定位每个子元素都是相对于自身的初始位置，每个子元素的left和top的初始值都是0

.f1,.f2{
            display: flex;
            justify-content: space-around;
        }
        .f1>img{
            width: 200px;
            height: 300px;
            position: relative;
        }
        .f2{
            margin-top: 150px;
        }
        .f2>div{
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            text-align: center;
            line-height: 300px;
        }

魔法少女郭德纲_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS动画随机移动效果和键盘控制移动效果

多个对象进行移动时使用onclick=("this")来获取当前点击对象，下面通过obj来获得参数，并根据offsetTop和offsetLeft获取对象当前的坐标值。然后根据活动区域生成一个随机数，由于活动区域的长为1200，所以生成随机数0-1200，作为移动到边界的横坐标值。根据document.onkeydown获取键盘输入,并根据keyCode识别键盘输入的数据，从而实现板的移动。当小球移动到边界时进行反转，从而实现镜像移动。
复制链接

扫一扫