по мотивам кода от
Malleys,
кликнуть по полю, 1 игрок WSDA, 2 игрок стрелки. тестировать лучше на отдельной странице.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="image" style="width: 50px; height: 25px; background: linear-gradient(to right, red, black);"></div>
<div class="image" style="width: 50px; height: 25px; background: linear-gradient(to right, #008000, black);"></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 userKeys = [
[
["KeyW", .1],
["KeyS", -.1],
["KeyD", .2],
["KeyA", -.2]
],
[
["ArrowUp", .1],
["ArrowDown", -.1],
["ArrowRight", .2],
["ArrowLeft", -.2]
]
]
const users = userKeys.map((keys, i) => ({
matrix : new DOMMatrix(),
user: image[i],
keys
}));
(function loop(t) {
requestAnimationFrame(loop);
dt = t - lastT;
lastT = t;
users.forEach(({matrix, user, keys}) => {
keys.forEach(([key, delta], i) => {
let method = i < 2 ? "translateSelf" : "rotateSelf";
if (pressedKeys.has(key)) matrix[method](delta * dt);
})
user.style.transform = matrix;
})
})(lastT);
</script>
</body>
</html>