Дело такое, когда я приближаюсь к offsetTop'у или offsetLeft'у или offsetTop + offsetHeight,(крч. со всех сторон) у меня возникает пробел, я бы хотел чтобы блок которым я двигаю утыкался впритык к стенкам, и также с блоком который я поставил в родителе, там тоже пробел, вот у меня такой код получился, не знаю, что мне нужно добавить ?
А также как бы мне сделать так, чтобы функция gameLoop() постоянно не циклась, а движение началось тогда, когда я нажал бы на клавишу ?
Можете просто скопировать и посмотреть, потестить, классная кстати тема получилась.
А также будет классно, если вы добавите каких-то крутых плюх в код ^_^
Песочница https://codepen.io/Valera_DobroMan/pen/mdJxEVe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.player {
position: absolute;
width: 50px;
height: 50px;
background: orange;
}
#inp {
width: 100px;
height: 30px;
font-size: 24px;
margin: 5px 10px;
}
.parent {
position: relative;
width: 800px;
height: 800px;
left:10px;
border: 1px solid black;
}
.block {
position: absolute;
left: 500px;
top:240px;
width: 100px;
height: 220px;
background: red;
}
</style>
</head>
<body>
key:<input type="text" id="inp">
<div class="parent">
<div class="block"></div>
<div class="player"></div>
</div>
<script>
let pl = document.querySelector(".player");
let par = document.querySelector(".parent");
let inp = document.getElementById("inp");
let bl = document.querySelector(".block");
var up = false,
right = false,
down = false,
left = false,
speed = 12,
x = 0,
y = 0
document.addEventListener('keydown',press)
function press(e){
inp.value = e.code;
if (e.code == "ShiftLeft"){
speed += 10;
}
if (e.code == "KeyW"){
up = true;
}
if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
right = true
}
if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
down = true
}
if (e.keyCode === 37 /* left */ || e.keyCode === 65){
left = true
}
}
document.addEventListener('keyup',release)
function release(e){
if (e.code == "ShiftLeft"){
speed -= 10;
}
if (e.code == "KeyW"){
up = false
}
if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
right = false
}
if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
down = false
}
if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ || e.keyCode === 81 /* q */){
left = false
}
}
function gameLoop(){
if (up){
y = y - speed;
}
if (right){
x = x + speed;
}
if (down){
y = y + 10;
}
if (left){
x = x - speed;
}
// console.log(speed)
if (y < 0 || y+pl.offsetHeight >= par.offsetHeight) {
y = pl.offsetTop ;
}
if (x < 0 || x+pl.offsetWidth >= par.offsetWidth)
{x = pl.offsetLeft}
if (x+pl.offsetWidth > bl.offsetLeft && y+pl.offsetHeight >= bl.offsetTop && y <= bl.offsetTop+bl.offsetHeight && x <= bl.offsetLeft + bl.offsetWidth ) {
x = pl.offsetLeft;
y = pl.offsetTop;
}
pl.style.left = x+'px';
pl.style.top = y+'px';
window.requestAnimationFrame(gameLoop);
}
window.requestAnimationFrame(gameLoop);
</script>
</body>
</html>
