Помочь с кодом

Question

Помочь с кодом

Js programmer Ученик (118), на голосовании 5 месяцев назад

помогите как сделать проверку на столкновение двух img и что бы выводилось например alert("game over") срочно

Answer 1

1. HTML (Структура)

<!DOCTYPE html>
<html>
<head>
<title>Проверка на столкновение</title>
<style>
.img-container {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
.img-item {
position: absolute;
}
</style>
</head>
<body>

<div class="img-container">
<img src="image1.jpg" alt="Изображение 1" class="img-item" id="img1">
<img src="image2.png" alt="Изображение 2" class="img-item" id="img2">
</div>

<script src="script.js"></script>

</body>
</html>
Замените image1.jpg и image2.png на реальные пути к вашим изображениям.
img-container - это родительский элемент, чтобы можно было управлять позицией картинок в нем.
img-item - класс для картинок, чтобы удобно их стилизовать.
2. JavaScript (Логика)

const img1 = document.getElementById("img1");
const img2 = document.getElementById("img2");

function checkCollision() {
// Получаем координаты и размеры изображений
const rect1 = img1.getBoundingClientRect();
const rect2 = img2.getBoundingClientRect();

// Проверка на пересечение
if (
rect1.right > rect2.left &&
rect1.left < rect2.right &&
rect1.bottom > rect2.top &&
rect1.top < rect2.bottom
) {
alert("Game over!");
}
}

// Вызываем функцию проверки каждую секунду (например)
setInterval(checkCollision, 1000);
Объяснение:

getBoundingClientRect(): Эта функция дает нам информацию о позиции и размере элемента (изображения) относительно окна браузера.
rect1.right: Правая граница первого изображения.
rect2.left: Левая граница второго изображения.
Проверка на пересечение: Код проверяет, пересекаются ли границы двух изображений. Если да, выводится alert("Game over!").
setInterval(): Функция, которая вызывает checkCollision каждую секунду. Это позволяет постоянно проверять на столкновение.
Как использовать:

Сохраните HTML-код в файле index.html.
Сохраните JavaScript-код в файле script.js.
Откройте index.html в браузере.
Перемещайте изображения в рамках img-container.
Когда изображения пересекутся, появится сообщение “Game over!”.