时间戳

首页 > 解决方案 > 如何使用 json 文件中的数据移动多个 div

javascript - 如何使用 json 文件中的数据移动多个 div

问题描述

我正在尝试使用 Javascript 使用预先记录的 X 和 Z 加速度数据集创建一个基本的汽车模拟。

目前，我已经设置了汽车、车轮、轨道和背景 div，并且我正在解析 JSON 文件中的数据以访问加速度。

我需要使用 accX 和 accZ 来获得位移，并将其用作在 X 和 Y 轴（ei 上/下和右/左）上移动汽车的值。

我在将所有 div 一起移动时遇到了挑战。例如，当汽车双轮加速时，汽车和背景应该以相同的速度移动。

这是我的代码：

在这里，我只是想从键盘键中获取值，看看是否可以将其作为输入输入到画布上的汽车位置。但最终我想使用 json 文件中的数据。

var data = JSON.parse(JSON.stringify(data));
console.log(data);
var currentIndex = 0;
let velocity = 0;

document.querySelector('html').addEventListener('keydown', e => {
     if (e.keyCode == 39)
         velocity += 5
     else if (e.keyCode == 37)
         velocity -= 5;
     console.log(velocity);
 })
*{
    margin:0 ;
    padding: 0;
}

.sky{
    height: 100vh;
    width: 100%;
    background-color: rgb(39, 17, 8);
    /* background-image: url(background.jpg); */
    background-repeat: repeat-y;
    position: absolute;
}

  
.track{
    height:60vh;
    width:800vw;
    background-image: url(https://ibb.co/bb2QLbk);
    position:absolute;
    top:70vh;
    background-repeat: repeat-x; 
    /* animation: carMove linear 10s infinite; */
}
.car{
    height: 500px;
    width: 500px;
    background-image: url(https://ibb.co/4ZY5kgF);
    background-size: cover;
    background-repeat: repeat-x;
    position: absolute;
    left: 500px;
    bottom:15vh;
    /* animation: shake linear .40s infinite; */
}

.wheel1 img{
    width: 210px;
    position: relative;
    top:215px;
    left:42px;
    /* animation: wheelRotation linear .50s infinite; */
}

.wheel2 img{
    width: 210px;
    position: relative;
    top: -0px;
    left: 275px;
    /* animation: wheelRotation linear .50s infinite; */

}



@keyframes wheelRotation
{
    100%{
        transform: rotate(360deg);
    }
}
@keyframes carMove
{
    100%{
        transform: translateX(-100vw);  /*this will let the vehicle move right and left. If it is */
    }
}
@keyframes shake
{
    0%{
        transform: translateY(200px);
    }
    50%{
        transform: translateY(-50px);
    }
    100%{
        transform: translateY(200px);
    }
}


@media only screen and (max-width: 768px) {
    .car{
        height: 50px;
        width: 190px;
        left: 180px;
        position: absolute;
    }
    .wheel1 img{
        width: 38.5px;
        position: relative;
        top:22px;
        left:22px;
    }.wheel2 img{
        width: 39px;
        position: relative;
        top: -21px;
        left: 115px;
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="icon" href="https://img.icons8.com/color/48/000000/lamborghini.png" type="image/x-icon">
    <title>Car Animation</title>
</head>

<body>
    <div class="container">
        <div class="sky">
            <div class="trees"></div>
            <div class="track"></div>
            <div class="car">
                <div class="wheel wheel1">
                    <img src="https://ibb.co/wcRjYT0" alt="">
                </div>
                <div class="wheel wheel2">
                    <img src="https://ibb.co/wcRjYT0" alt="">
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="datastream.js"></script>
    <script src="./data/accXaccZCOMBINEDMOTIONS.json"></script>
</body>
</html>

数据是这样的

data=[
    {
        "time": 0,
        "accX": 0.11,
        "accZ": 0.11
    },
    {
        "time": 86400,
        "accX": 0.11,
        "accZ": 0.11
    },
    {
        "time": 172800,
        "accX": 0.11,
        "accZ": 0.11
    }
]

我只想通过遍历 json 文件中的数据来使汽车向上/向下和向右/向左移动。

非常感激。

标签： javascripthtmlcssaccelerometer

解决方案

推荐阅读