Отскакивающий от дива мячик

103
17 января 2021, 14:00

Нужно, чтобы мячик отскакивал от синего дива, а не проходил сквозь него

    var ballH={ 
        posX : 30, 
        posY : 30, 
        speedX : Math.random()*(20 + 10) - 10, 
        speedY : Math.random()*(20 + 10) - 10, 
        width : 50, 
        height: 50, 
 
        update : function() { 
            var ballElem=document.getElementById('IBall'); 
            ballElem.style.left=this.posX+"px"; 
            ballElem.style.top=this.posY+"px"; 
        } 
    } 
 
    var areaH={ 
        width : 400, 
        height : 300 
    } 
 
    function start() { 
        // плавное движение - от 25 кадр/сек 
        setInterval(tick,40); 
    } 
 
    function tick() { 
 
        ballH.posX+=ballH.speedX; 
        // вылетел ли мяч правее стены? 
        if ( ballH.posX+ballH.width>areaH.width ) { 
            ballH.speedX=-ballH.speedX; 
            ballH.posX=areaH.width-ballH.width; 
        } 
        // вылетел ли мяч левее стены? 
        if ( ballH.posX<0 ) { 
            ballH.speedX=-ballH.speedX; 
            ballH.posX=0; 
        } 
 
        ballH.posY+=ballH.speedY; 
        // вылетел ли мяч ниже пола? 
        if ( ballH.posY+ballH.height>areaH.height ) { 
            ballH.speedY=-ballH.speedY; 
            ballH.posY=areaH.height-ballH.height; 
        } 
        // вылетел ли мяч выше потолка? 
        if ( ballH.posY<0 ) { 
            ballH.speedY=-ballH.speedY; 
            ballH.posY=0; 
        } 
 
        ballH.update(); 
    } 
 
    ballH.update();
<input type='button' value='Пуск!' onclick='start()'> 
<br /><br /> 
<div style='width: 400px; height: 300px; 
    border: solid blue 1px; position: relative'> 
    <div  id='IBall' 
         style='position: absolute;width:40px;height:40px;background-color: red;border-radius: 50%'> 
    </div> 
    <div style="height:110px;width:25px;background-color:blue;position:absolute; right:0; top:150px"></div> 
</div>

READ ALSO
Зачем в данном случае удалять класс?

Зачем в данном случае удалять класс?

Непонятен фрагмент кода в строке 1Надо реализовать подсветку ячейки при клике

145
Почему foo.x = undefined?

Почему foo.x = undefined?

Вроде как в коде ниже и всё должно быть просто, но тем не менее принцип работы не поддаётся моему пониманию

139