не могу сделать обработку соприкосновений персонажа (div id="unit") и посторонних div . поможете ? Пробовал с переработкой координат div-а , но заметил баг(теперь фича) : при обновлении страницы ,(в игре двигается не персонаж , а карта) позиция игрового поля(карты) сохраняется и становится 0 , по этому нельзя просто ввести
if(left_main <= -200 && left_main >= -250){ /* ... */ }
вот весь код
var left_main = 0;
var bottom_main = 0;
var speed = 100;
var jump = 100;
document.addEventListener('keydown', function(event) {
let main = document.getElementById("main");
if (event.code == "KeyD") {
left_main -= speed;
main.style.left = left_main + "px";
}
if(event.code == "KeyW"){
bottom_main -= jump;
main.style.bottom = bottom_main + "px";
if(left_main <= -400 && left_main >= -450 ){}else{
bottom_main += jump;
setTimeout(' main.style.bottom = bottom_main + "px" ', 200);
}
}
if(event.code == "KeyQ"){alert(left_main , bottom_main);}
if (event.code == "KeyA") {
left_main += speed;
main.style.left = left_main + "px";
}
});
*{
padding:0;
margin:0;
}
#main{
width:7000px;
height:200%;
background-color:#84bdff;
position:absolute;
z-index:0;
left:0;
bottom:0;
transition:ease left 0.1s;
transition:ease bottom 0.1s;
}
#gnd{
position:absolute;
bottom:0px;
width:100%;
background-color:#229762;
height:100px;
z-index:1;
}
#stoneBox{
width:50px;
height:100px;
background-color:#999;
position:absolute;
bottom:100px;
left:700px;
}
#stoneBox:nth-child(1){left:1000px}
#stoneBox:nth-child(2){left:1200px}
#stoneBox:nth-child(3){left:1900px}
#stoneBox:nth-child(4){left:2400px}
#stoneBox:nth-child(5){left:2800px}
#stoneBox:nth-child(6){left:3100px}
#stoneBox:nth-child(7){left:3900px}
#stoneBox:nth-child(8){left:4300px}
#stoneBox:nth-child(9){left:4800px}
#stoneBox:nth-child(10){left:5200px}
#stoneBox:nth-child(11){left:5800px}
#unit{
width:30px;
height:50px;
background-color:#465bfa;
border-radius:20px;
position:fixed;
bottom:100px;
left:300px;
z-index:100;
}
body{
overflow:hidden;
}
<div id="main">
<div id="unit"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="stoneBox"></div>
<div id="gnd"></div>
</div>
P.S. не критикуйте за отсутствие комментариев и если хотите можете поиграть чуть чуть (нормальной графики пока что нет , только обрубки)
<div id="stoneBox"></div>
Необходимо заменитьID
на класс, так какID
это уникальный Идентификатор и он должен быть один (одно уникальное имя)el.getBoundingClientRect()