Как сделать чтоб мячик отбивался от кнопки? Есть страницаclick.konstantintv.ru
на которой двигается шарик, как сделать чтоб он отбивался не только от стен области просмотра но и от кнопки, пытался довавлять в условия выбора траектории в зависимости от расстояние между шариком и кнопкой, но это не повлияло
Как сделать чтоб мячик отбивался от кнопки? Есть страницаclick.konstantintv.ru
на которой двигается шарик, как сделать чтоб он отбивался не только от стен области просмотра но и от кнопки, пытался довавлять в условия выбора траектории в зависимости от расстояние между шариком и кнопкой, но это не повлияло
на которой двигается шарик, как сделать чтоб он отбивался не только от стен области просмотра но и от кнопки, пытался довавлять в условия выбора траектории в зависимости от расстояние между шариком и кнопкой, но это не повлияло
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Отвечай на вопросы, зарабатывай баллы и трать их на призы.
Подробнее
Подробнее
На вашем сайте click.konstantintv.ru шарик двигается по инерции и отбивается только от границ окна браузера. Если вы хотите добавить отскок от кнопки, вам нужно добавить код, который будет проверять, когда шарик столкнулся с кнопкой и изменять его направление движения.
Ниже приведен пример кода, который может помочь вам в реализации этой функциональности:
<!DOCTYPE html><html>
<head>
<style>
#ball {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
}
#button {
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<div id="button"></div>
<script>
let ball = document.getElementById('ball');
let button = document.getElementById('button');
let vx = 2; // горизонтальное направление
let vy = 2; // вертикальное направление
function moveBall() {
let ballRect = ball.getBoundingClientRect();
let buttonRect = button.getBoundingClientRect();
let newX = ballRect.left + vx;
let newY = ballRect.top + vy;
if (newX < 0 || newX + ballRect.width > window.innerWidth) {
vx = -vx;
}
if (newY < 0 || newY + ballRect.height > window.innerHeight) {
vy = -vy;
}
if (newX + ballRect.width > buttonRect.left && newX < buttonRect.left + buttonRect.width
&& newY + ballRect.height > buttonRect.top && newY < buttonRect.top + buttonRect.height) {
vx = -vx;
vy = -vy;
}
ball.style.left = newX + 'px';
ball.style.top = newY + 'px';
requestAnimationFrame(moveBall);
}
moveBall();
</script>
</body>
</html>
Этот код создает движущийся шарик, который отбивается от границ окна браузера и кнопки. Когда шарик сталкивается с кнопкой, его направление меняется на противоположное. Вы можете доработать этот код, чтобы он лучше соответствовал вашим потребностям и стилю вашего сайта.