Нажатие на пробел прерывает зажатую стрелку вправо или влево JavaScript. Как исправить?

Рейтинг: 0Ответов: 1Опубликовано: 29.05.2023

Практикуюсь в программировании. Хочу написать квадрат, который двигается влево и вправо и подпрыгивает. Вроде получилось, но вот когда зажата стрелка влево или вправо и я хочу прыгнуть, то комбинация обрывается и квадрат стоит. А мне надо, чтобы он продолжал двигаться в момент прыжка...

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientWidth / 2;
let x = 200,
 y = 150,
 vel = 3,
 jump = 50,
 right = false,
 left = false,
 up = false;

ctx.fillRect(x, y, 100, 100);
window.addEventListener('keydown', (e) => {
 if (e.key === 'ArrowRight') right = true;
 if (e.key === 'ArrowLeft') left = true;
 if (e.key === ' ') {
  up = true;
  y -= jump;
  setTimeout(() => {
   y += jump;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.fillRect(x, y, 100, 100);
  }, 1000);
 }

 if (left && !up) x -= vel;
 if (right && !up) x += vel;
 if (right && up) x += vel;
 if (left && up) x -= vel;

 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.fillRect(x, y, 100, 100);
});

window.addEventListener('keyup', (e) => {
 if (e.key === ' ') up = false;
 if (e.key === 'ArrowRight') right = false;
 if (e.key === 'ArrowLeft') left = false;
});
#canvas {
 display: block;
 border: 1px solid #000;
 box-sizing: border-box;
}
<canvas id="canvas"></canvas>

javascript canvas
Источник: Stack Overflow на русском

Ответы

▲ -1Принят

Решил я эту задачку. Публикую, мало ли кому еще пригодится.

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientWidth / 2;
let x = 50,
 floor = canvas.height - 110,
 y = floor,
 vel = 3,
 right = false,
 left = false,
 up = false;
ctx.fillRect(x, y, 100, 100);

function anim() {
 if (right) x += vel;
 if (left) x -= vel;
 if (up) {
  y -= vel;
 }
 if (!up) {
  y += vel;
  if (y >= floor) y = floor;
 }
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.fillRect(x, y, 100, 100);
 requestAnimationFrame(anim);
}
anim();

window.addEventListener('keydown', (e) => {
 if (e.key === 'ArrowRight') right = true;
 if (e.key === 'ArrowLeft') left = true;
 if (e.key === ' ') up = true;
});

window.addEventListener('keyup', (e) => {
 if (e.key === 'ArrowRight') right = false;
 if (e.key === 'ArrowLeft') left = false;
 if (e.key === ' ') up = false;
});
#canvas {
 display: block;
 border: 1px solid #000;
 box-sizing: border-box;
}
<canvas id="canvas"></canvas>