Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.05.2021, 00:05
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

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


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"
  }
})

Последний раз редактировалось Angelinasen, 02.05.2021 в 18:13.
Ответить с цитированием
  #2 (permalink)  
Старый 01.05.2021, 00:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Angelinasen,
код практически готовый тут
https://javascript.ru/forum/css-html...tml#post523635
Ответить с цитированием
  #3 (permalink)  
Старый 01.05.2021, 09:14
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,672

Сообщение от Angelinasen
Как сделать, чтобы они могли двигаться одновременно?
Одновременно не получится, нажатие одного игрока будет прерывать нажатие другого.
Ответить с цитированием
  #4 (permalink)  
Старый 01.05.2021, 09:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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

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

по мотивам кода от 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.
Ответить с цитированием
  #6 (permalink)  
Старый 02.05.2021, 16:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Angelinasen
без rotate?
строки 47, 48
let vector = i < 2 ? [0, delta * -dt] : [delta * dt, 0];
if (pressedKeys.has(key)) matrix.translateSelf(...vector);
Ответить с цитированием
  #7 (permalink)  
Старый 02.05.2021, 16:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Angelinasen,
#7 проверяли?
Ответить с цитированием
  #8 (permalink)  
Старый 02.05.2021, 17:11
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

Как сделать чтобы два игрока двигались одновременно
все отлично)) сразу не дошло))спасибо!!
Ответить с цитированием
  #9 (permalink)  
Старый 02.05.2021, 19:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

столкновение блоков
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>
Ответить с цитированием
  #10 (permalink)  
Старый 03.05.2021, 15:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Angelinasen,
что такое ширина1 и ширина2?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции? miha2020 Мобильный JavaScript 2 05.06.2022 09:02
Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции? miha2020 Элементы интерфейса 5 07.03.2021 10:22
Как сделать сделать смену картинки по щелчку мыши? PavelGR Javascript под браузер 0 09.08.2020 09:28
Как сделать вертикальное меню с анимацией? Wimko jQuery 3 28.06.2020 19:31
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32