javascript 小球碰撞反弹

最近在学习JS，写一个小球弹来弹去的游戏

一、HTML部分

    
        
        
        
    
    
        

            

               
            

        

        
    

二、CSS样式

*{
    margin: 0;
    padding: 0;
}

#box{
    width: 600px;
    height: 400px;
    background-color: aliceblue;
    position: relative;
}
#boll{
    width: 80px;
    height: 80px;
    background-color: red;
    border-radius: 40px;
    position: absolute;
    left: 0;
    margin: 0;
}
三、JS部分

小球碰到上下左右边界，更改轨迹方向

var boll = document.getElementById("boll")
boll.addEventListener("mouseover",function(){
    var speedx  = 5
    var speedy = 5
    setInterval(function(){
        
        boll.style.left = boll.offsetLeft + speedx + "px"
        boll.style.top = boll.offsetTop + speedy + "px"
        

        if(boll.offsetTop >= 320 || boll.offsetTop <= 0){
            speedy *= -1
        }
        if(boll.offsetLeft >= 520 || boll.offsetLeft <= 0){
            speedx *= -1
        }
        
    },50)
},false)