时间戳

首页 > 解决方案 > 单击键盘箭头后重置 setinterval

javascript - 单击键盘箭头后重置 setinterval

问题描述

嗨，我想用 setinterval 移动汽车之类的东西，但是当我在再次调用 setinterval 后单击按钮时，它的速度看起来比单击后要快，所以我想使用一个间隔而不是更多可以帮助我吗？我知道在我之前回答了这个问题，但它对我不起作用，或者我不能使用它，我对此感到非常厌倦

//variables
var m_tank = document.getElementById("tank");
//var message = document.getElementById("show_car_info");
var iv, a, s;

//functions
function loaded() {
    alert("hello");
}

function start_game(e) {
    a = 0;
    //for (s = 5000; s == 0; s -= 5) {}
    if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) {
        s = 1000;
        iv = setInterval(() => {
            moving(m_tank);
        }, s);
    }
}

function moving(m_tank) {
    a += 10;
    var l_num = m_tank.offsetLeft;
    var t_num = m_tank.offsetTop;
    if (e.keyCode == 39) {
        //alert("ArrowRight");
        l_num += a;
        console.log("right:" + l_num, "a_right:" + a);

    } else if (e.keyCode == 37) {
        //alert("ArrowLeft");
        l_num -= a;
        console.log("left:" + l_num, "a_left:" + a);

    } else if (e.keyCode == 38) {
        //alert("ArrowUp");
        t_num -= a;
        console.log("Up:" + t_num, "a_up:" + a);

    } else if (e.keyCode == 40) {
        //alert("ArrowDown");
        t_num += a;
        console.log("Down:" + t_num, "a_down:" + a);
    }
    m_tank.style.left = l_num + "px";
    m_tank.style.top = t_num + "px";

}
body {
    background-color: lightsteelblue;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    overflow: hidden;
}

#tank {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: brown;
}
<body onload="loaded()" onkeydown="start_game(e=event)">

    <!-- <p id="show_car_info"></p> -->
    <div>
        <div id="tank">
            <p>tank</p>
        </div>
    </div>
</body>

标签： javascripthtmlcssjson

解决方案

推荐阅读