Одновременная обработка WS и стрелок в игре на JavaScript

@malasi · Регистрация: 17.08.2024

Студворк — интернет-сервис помощи студентам

Здравствуйте, у меня есть код, который делает так, что игроком можно управлять и на кнопки WS и на стрелочки вверх-вниз. Однако, возникает баг, если нажать на кнопку W и стрелочку вверх, либо же на кнопку S и стрелочку вниз, то игрок начнёт бегать в 2 раза быстрее, пытался пофиксить разными способами, по итогу не получилось. Подскажите пожалуйста, как это пофиксить.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function paddle(x, y, width, height, image) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.image = new Image(this.width, this.height);
this.image.src = image;
this.speedModifier = 0;
this.hasCollidedWith = function(ball) {
var paddleLeftWall = this.x;
var paddleRightWall = this.x + this.width;
var paddleTopWall = this.y;
var paddleBottomWall = this.y + this.height;
if(ball.x > paddleLeftWall 
&& ball.x < paddleRightWall
&& ball.y > paddleTopWall
&& ball.y < paddleBottomWall) {
return true;
}
return false;
};
this.move = function(keyCode) {
var nextY = this.y;
if(keyCode == 40 || keyCode == 83) {
nextY += 5;
this.speedModifer = 1.5;
} else if(keyCode == 38 || keyCode == 87) {
nextY += -5;
this.speedModifier = 1.5;
} else {
this.speedModifier = 0;
}
nextY = nextY < 0 ? 0 : nextY;
nextY = nextY + this.height > 900 ? 900 - this.height : nextY;
this.y = nextY;
};
}

@mr_dramm · 21.08.2024, 11:16

проблема в том что когда нажимаешь 2 кнопки генерируется в два раза больше событий, и кроме того чем чаще нажимаешь кнопку тем чаще события генерируются, можно читать состояние кнопок в определенный интрвалом

demo

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .box {
        height: 300px;
        width: 600px;
        border: 1px solid black;
      }
      .item {
        height: 100px;
        width: 100px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item"></div>
    </div>
    для управления квадратом используй кнопки WASD или стрелочки
    <script>
      const box = document.querySelector(".box"),
        item = document.querySelector(".item");
      const rectB = box.getBoundingClientRect();
      // минус border
      rectB.height -= 2;
      rectB.width -= 2;
      const keyState = {};
      let tx = 0,
        ty = 0;
 
      const move = () => {
        let h = 0,
          v = 0;
 
        if (keyState["ArrowUp"] || keyState["w"]) {
          v = -10;
        }
        if (keyState["ArrowDown"] || keyState["s"]) {
          v = 10;
        }
        if (keyState["ArrowLeft"] || keyState["a"]) {
          h = -10;
        }
        if (keyState["ArrowRight"] || keyState["d"]) {
          h = 10;
        }
 
        const rectI = item.getBoundingClientRect();
        tx += h;
        ty += v;
        if (ty + rectI.height > rectB.height) ty = rectB.height - rectI.height;
        if (ty < 0) ty = 0;
        if (tx + rectI.width > rectB.width) tx = rectB.width - rectI.width;
        if (tx < 0) tx = 0;
        item.style.transform = `translate(${tx}px, ${ty}px)`;
      };
      // читаем состяние кнопок через определенное время
      setInterval(move, 100);
 
      document.addEventListener("keydown", function (event) {
        keyState[event.key] = true;
      });
 
      document.addEventListener("keyup", function (event) {
        keyState[event.key] = false;
      });
    </script>
  </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .