Я не понимаю, почему не выходит повторить анимацию. То есть при нажатии на пробел я ожидаю, что вылетит столько чёрных блочков, сколько нажатий было совершено, а происходит совсем не так почему-то
const canvas = document.getElementById('man');
let ctx = canvas.getContext('2d');
const canvasBullet = document.getElementById('bullet');
let ctxBullet = canvasBullet.getContext('2d');
let speedBullet = 0;
let fightPressed = false;
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 50, 50);
function fight() {
requestAnimationFrame(tickBullet);
console.log('baxxxx');
}
function tickBullet() {
ctxBullet.clearRect(0, 0, canvas.width, canvas.height);
let xB = 150 + speedBullet;
ctxBullet.fillStyle = 'black';
ctxBullet.fillRect(150 + speedBullet, 125, 10, 10);
speedBullet += 9;
if (xB > canvas.width) {
ctxBullet.clearRect(0, 0, canvas.width, canvas.height);
}
requestAnimationFrame(tickBullet);
}
function keyDown(e) {
if (e.keyCode === 32) fightPressed = true;
}
function keyUp(e) {
if (e.keyCode === 32) fightPressed = false;
}
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
function update() {
if (fightPressed) {
fightPressed = false;
fight();
}
}
setInterval(update, 10);
#man {
border: solid 1px;
}
<div style="position: relative;">
<canvas id="man" width="500" height="400" style="position: absolute"></canvas>
<canvas id="bullet" width="500" height="400" style="position: absolute"></canvas>
</div>