XCIDE
@XCIDE
Начинающий программист

Как заставить реагировать объект?

Мне нужно, чтобы объект hero по кнопке подтвердить выводил сообщение, если он находится на объекте kirill или anti-kirill
<!DOCOTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			GAME
		</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="script.js"></script>
	</head>
	<body>
		<div id="hero"></div>
		<div class="kirill"></div>
		<div class="anti-kirill"></div>
		<button onclick="MoveHero('levo')" class="button1">Влево</button>
		<button onclick="MoveHero('pravo')" class="button1">Вправо</button>
		<button onclick="MoveHero('vverx')" class="button1">Вверх</button>
		<button onclick="MoveHero('vniz')" class="button1">Вниз</button>
		<button>Попробовать</button>
		<button onclick="koordinat()">?</button>
	</body>
</html>

var otstupSleva=800;
var otstupVverh=250;
					
function MoveHero(n){
	var hero = document.getElementById('hero');

	if(n=='levo'){
		if(otstupSleva > 0){
			otstupSleva-=50; 
			hero.style.left=otstupSleva+'px';
			hero.setAttribute("class", "rotated_image_left");	
		}
		
	}else if(n=='pravo'){
		if(otstupSleva < 1600){
			otstupSleva+=50; 
			hero.style.left=otstupSleva+'px';
			hero.setAttribute("class", "rotated_image_right");
		}
	}else if(n=='vverx'){
		if(otstupVverh > 0){
			otstupVverh-=50;
			hero.style.top=otstupVverh+'px';
			hero.setAttribute("class", "rotated_image_top");
		}
	}else if(n=='vniz'){
		if(otstupVverh < 700){
			otstupVverh+=50;
			hero.style.top=otstupVverh+'px';
			hero.setAttribute("class", "rotated_image_top");
		}
	}
}
function koordinat(){
	alert("Отступ слева:" + otstupSleva + "px \n Отступ всерху" + otstupVverh + "px" );
}

body{ 
	background: url('image/fon1.png') no-repeat;
}

#hero{
	position: absolute;
	background: url('image/y3.png') ;
	background-size: contain;
	background-repeat: no-repeat;
	top: 250px;
	left: 800px;
	z-index: 1;
	width: 300px;
	height: 300px;
}


.kirill{
	position: absolute;
	background: url('image/y1.png') ;
	background-size: contain;
	background-repeat: no-repeat;
	top: 550px;
	left: 1300px;
	z-index: 1;
	width: 300px;
	height: 300px;
}

.anti-kirill{
	position: absolute;
	background: url('image/y2.png') no-repeat;
	background-repeat: no-repeat;
	background-size: contain;
	top: 550px;
	left: 350px;
	z-index: 2;
	width: 300px;
	height: 300px;
}

.rotated_image_left{
	transform: scaleX(-1);
}

.rotated_image_right{
	transform: scaleX(1);
}

.rotated_image_top{
	transform: rotate(270deg);
}

.rotated_image_down{
	transform: rotate(-270deg);
}
.button1{
	position: relative;
	z-index: 3;
}
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
пересечение / совпадение элементов определяется сопоставлением координат углов элементов.
и решение(я) находятся поиском - javascript определить перекрытие элементов

в итого можно написать объект checker с методами проверки collide и inside
var checker = {
  // получить координаты углов объекта
	getRectangle: function (el) {
    return {
      left: el.offsetLeft,
      top: el.offsetTop,
      right: el.offsetLeft + el.offsetWidth,
      bottom: el.offsetTop + el.offsetHeight
    }
  },
  // проверка на пересечение
  collide: function (el1, el2) {
    var rect1 = this.getRectangle(el1);
    var rect2 = this.getRectangle(el2);
    
    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },
  // проверка на совпадение
  inside: function (el1, el2) {
    var rect1 = this.getRectangle(el1);
    var rect2 = this.getRectangle(el2);

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
}


ниже все вместе + некоторые исправления:

https://codepen.io/sazakharov/pen/LYPBmNM?editors=0010
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы