Мне нужно, чтобы объект 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;
}
