javascript - div 内的弹跳球

Question

我正在尝试在div内创建一个弹跳球(它从左到右开始)，但是我希望当用户按下keyup时它开始从顶部弹到机器人(这带有所有箭头，还带有:a， s、d、w)。

似乎我的问题是当我尝试清除间隔时...但我不知道如何解决它...

var id=null;
    myMove('dreta',id);
    document.onkeyup = checkKey;
    function checkKey(e) {

        e = e || window.event;

        if (e.keyCode == '38' || e.keyCode == '87') {
            clearInterval(id);
            myMove('adalt');
        }
        else if (e.keyCode == '40' || e.keyCode == '65') {
            clearInterval(id);
            myMove('abaix');
        }
        else if (e.keyCode == '37' || e.keyCode == '83') {
            clearInterval(id);
            myMove('esquerra');
        }
        else if (e.keyCode == '39' || e.keyCode == '68') {
            clearInterval(id);
            myMove('dreta');
        }
    }
    
    function myMove(moviment,id) {
        var rect = ball.getBoundingClientRect();
        var elem = document.getElementById("ball");   
        var pos = rect.left;
        var pos2 = rect.top;
        id = setInterval(frame, 5);
        function frame() {
            if(moviment=='dreta'){
                if (pos == 180) {
                    clearInterval(id);
                    myMove('esquerra');
                }
                else{
                    pos++; 
                    elem.style.left = pos + "px"; 
                }
            }
            else if (moviment=='esquerra'){
                if (pos == 0) {
                    clearInterval(id);
                    myMove('dreta');
                }
                else{
                    pos--; 
                    elem.style.left = pos + "px"; 
                }
            }
            else if(moviment=='adalt'){
                if (pos == 0) {
                    clearInterval(id);
                    myMove('abaix');
                }
                else{
                    pos++; 
                    elem.style.top = pos + "px"; 
                }
            }
            else{
                if (pos == 180) {
                    clearInterval(id);
                    myMove('adalt');
                }
                else{
                    pos--; 
                    elem.style.top = pos + "px"; 
                }
            }
            
        }
    }

#container {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: relative;
        }

        #ball {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            background: red;
        }

<div id="container">
        <div id="ball"></div>
    </div>  

PD:我知道使用 Canvas 可以更容易，但我想用这种方式做到这一点。

Answer 1

您只需要两个函数 - 第一个函数更改移动方向并调用第二个函数，该函数在检查球是否到达任何边界的同时移动球。

var id=null;
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");   
var pos_left = rect.left;
var pos_top = rect.top;
var h_dir = 0, v_dir = 0;
document.onkeyup = checkKey;
function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38' || e.keyCode == '87') {
        v_dir = -1;
    }
    else if (e.keyCode == '40' || e.keyCode == '65') {
        v_dir = 1;
    }
    else if (e.keyCode == '37' || e.keyCode == '83') {
        h_dir = -1;
    }
    else if (e.keyCode == '39' || e.keyCode == '68') {
        h_dir = 1;
    }
    clearInterval(id);
    id = setInterval(frame, 5);
}

function frame() {
    if (pos_left > 179 || pos_left < 1) {
        h_dir *= -1;
    }
    if (pos_top < 1 || pos_top > 179) {
        v_dir *= -1;
    }
    pos_left += h_dir; 
    elem.style.left = pos_left + "px"; 
    pos_top += v_dir; 
    elem.style.top = pos_top + "px"; 
}

#container {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    position: relative;
}

#ball {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: red;
}

<div id="container">
        <div id="ball"></div>
    </div>