Показать сообщение отдельно
  #5 (permalink)  
Старый 01.05.2021, 09:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

нажатие клавиш, два игрока одновременно.

по мотивам кода от 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>

Последний раз редактировалось рони, 01.05.2021 в 10:34.
Ответить с цитированием