Форум

Angelinasen · #1 (**permalink**) 01.05.2021, 00:05

Как сделать, чтобы два игрока могли двигаться одновременно?

window.addEventListener('keydown', function(e){

  if(e.keyCode == 38){
    let goUp = firstSquare.offsetTop;
    firstSquare.style.top = goUp - 10 + "px";
  }
  if(e.keyCode == 40){
    let goDown = firstSquare.offsetTop
    firstSquare.style.top = goDown + 10 + "px"
  }
  if(e.keyCode == 37){
    let goLeft = firstSquare.offsetLeft
    firstSquare.style.left = goLeft - 10 + "px"
  }
  if(e.keyCode == 39){
    let goRight = firstSquare.offsetLeft
    firstSquare.style.left = goRight + 10 + "px"
  }

  if(e.keyCode == 87){
    let moveUp = secondSquare.offsetTop;
    secondSquare.style.top = moveUp - 10 + "px";
  }
  if(e.keyCode == 83){
    let moveDown = secondSquare.offsetTop
    secondSquare.style.top = moveDown + 10 + "px"
  }
  if(e.keyCode == 65){
    let moveLeft = secondSquare.offsetLeft
    secondSquare.style.left = moveLeft - 10 + "px"
  }
  if(e.keyCode == 68){
    let moveRight = secondSquare.offsetLeft
    secondSquare.style.left = moveRight + 10 + "px"
  }
})

рони · #2 (**permalink**) 01.05.2021, 00:30

Angelinasen,
код практически готовый тут
https://javascript.ru/forum/css-html...tml#post523635

рони · #3 (**permalink**) 01.05.2021, 09:35

Rise,
а по коду выше, если продублировать на второго игрока, вроде не прерывает...

рони · #4 (**permalink**) 01.05.2021, 09:56

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

рони · #5 (**permalink**) 02.05.2021, 16:26

Сообщение от Angelinasen

без rotate?

строки 47, 48

let vector = i < 2 ? [0, delta * -dt] : [delta * dt, 0];
if (pressedKeys.has(key)) matrix.translateSelf(...vector);

рони · #6 (**permalink**) 02.05.2021, 16:34

Angelinasen,
#7 проверяли?

Angelinasen · #7 (**permalink**) 02.05.2021, 17:11

все отлично)) сразу не дошло))спасибо!!

рони · #8 (**permalink**) 02.05.2021, 19:28

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;
    }

    </style>
</head>

<body>
    <div class="image" ></div>
    <div class="image" ></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", .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} = one.getBoundingClientRect();
        let {top : b, left : d} = two.getBoundingClientRect();
        a -= b;
        c -= d;
        return a >= -50 && a <= 10 && c >= -50 && c  <= 10
        }

        (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;
            })
            document.body.classList.toggle('gradient', checkCollision(users));
            requestAnimationFrame(loop);
        })(lastT);
    </script>
</body>

</html>

рони · #9 (**permalink**) 03.05.2021, 15:41

Angelinasen,
что такое ширина1 и ширина2?

рони · #10 (**permalink**) 03.05.2021, 16:41

Angelinasen,

Форум

Справочник

Discord чат

Курсы javascript