Angelinasen,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
height: 100%;
}
body.gradient{
background-image:radial-gradient(red,yellow);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.image{
--color: #FF0000;
width: 50px;
height: 50px;
background-image: linear-gradient(to right, var(--color), black);
}
.image:nth-child(2){
--color: #008000;
width: 10px;
height: 10px;
}
.field {
width: 300px;
height: 300px;
margin: 70px auto;
box-sizing: border-box;
background-color: #808080;
}
.image.freedom{
--color: #00FFFF;
}
</style>
</head>
<body>
<div class="field" >
<div class="image" ></div>
<div class="image" ></div>
</div>
<script>
const pressedKeys = new Set();
addEventListener("keydown", event => {
pressedKeys.add(event.code);
});
addEventListener("keyup", event => {
pressedKeys.delete(event.code);
});
let dt, lastT = performance.now();
const image = document.querySelectorAll(".image");
const box = document.querySelector(".field");
const userKeys = [
[
["KeyW", -.1],
["KeyS", .1],
["KeyD", .1],
["KeyA", -.1]
],
[
["ArrowUp", -.1],
["ArrowDown", .1],
["ArrowRight", .1],
["ArrowLeft", -.1]
]
]
const users = userKeys.map((keys, i) => ({
matrix : new DOMMatrix([1, 0, 0, 1, 100 + 100 * i, 100 + 100 * i]),
user: image[i],
keys
}));
const checkCollision = users => {
const [{user : one}, {user : two}] = users;
let {top : a, left : c, height : h, width : w} = one.getBoundingClientRect();
let {top : b, left : d, height : hh, width : ww} = two.getBoundingClientRect();
a -= b;
c -= d;
h -= hh;
w -= ww;
return a <= 0 || a >= -h || c < 0 || c >= -w
}
(function loop(t) {
dt = t - lastT;
lastT = t;
users.forEach(({matrix, user, keys}) => {
keys.forEach(([key, delta], i) => {
let vector = i < 2 ? [0, delta * dt] : [delta * dt, 0];
if (pressedKeys.has(key)) matrix.translateSelf(...vector);
user.style.transform = matrix;
const collision = checkCollision([{user}, {user : box}])
if(collision) {
vector = vector.map(a => a * -1);
matrix.translateSelf(...vector);
}
})
})
requestAnimationFrame(loop);
})(lastT);
</script>
</body>
</html>