[namboodiris]

Здравствуйте, уважаемые форумчане!
Подскажите, пожалуйста, в чем проблема.
Я начал изучать js и в качестве пет проджекта захотел сделать игру наподобие space invaders.
есть два вопроса:
- как сделать так, чтобы "выстрел" срабатывал каждый раз, когда нажимается "пробел", а не единожды, как это работает сейчас?
- как сделать "независимыми" друг от друга оси Х? Ситуация: "снаряд" должен появляться ровно посередине зеленого квадрата, и когда происходит выстрел снаряд летит вперед до самого верха канваса. Сначала сделал так чтобы снаряд появлялся посередине, но когда двигаешь зеленый квадрат, снаряд тоже двигается по оси Х. Сейчас они раздельны, но снаряд появляется посередине канваса.

window.onload = function () {

    let canvas = document.getElementById('canv');
    let ctx = canvas.getContext("2d");
    let x = canvas.width/2;
    let y = canvas.height - 20;
    let dx = 2;
    let dy = -2;
    let fireHeight = 2;
    let fireWidth = 2;

    let fireY = canvas.height - fireHeight;
    let spaceHeight = 20;
    let spaceWidth = 20;
    let spaceX = (canvas.width - spaceWidth)/2;

    let fireRadius = 2;
    let status = false;



    let spaceShip = {

        drawShip:function (){
            ctx.beginPath();
            ctx.rect(spaceX,canvas.height - spaceHeight,spaceHeight,spaceWidth);
            ctx.fillStyle = "#191";
            ctx.fill();
            ctx.closePath();

        },
        moveShip:{
            moveX:{
                left: function () {
                    spaceX -=5;
                    if(spaceX <= 0){
                        spaceX=0;

                    }
                    console.log(spaceX);
                    console.log(canvas.width);
                },
                right: function () {
                    spaceX += 5;
                    if(spaceX >= canvas.width - spaceWidth){
                        spaceX=canvas.width - spaceWidth;
                    }
                    console.log(spaceX);
                    console.log(canvas.width);
                }
            },
            moveY:{
                up: function () {

                },
                down: function () {

                }
            }
        },
        gun: {
            makeFire: function () {

                this.drawGun();
                let timerId = setInterval(function() {
                    if (fireY >= 0){
                        fireY+=dy ;
                        clearInterval(timerId);

                    }

                }, 102);
                this.makeFire.onload = function () {
                    status = false;

                }


            },
            drawGun :function () {
                let spaceFire = (canvas.width - spaceWidth)/2;
                
                ctx.beginPath();
                ctx.arc(spaceFire+spaceWidth/2, fireY - spaceHeight,fireRadius,0,Math.PI*2);
                ctx.fillStyle = "#f11";
                ctx.fill();
                ctx.arc(spaceFire+spaceWidth/2, fireY - spaceHeight,fireRadius,0,Math.PI*2);
                ctx.closePath();
            },

        }

    };



    document.addEventListener('keydown', event => {
        if (event.key === 'A'||event.key === 'a'||event.key === 'Ф'||event.key === 'ф'){
            spaceShip.moveShip.moveX.left();
        } else if (event.key === 'D'||event.key === 'd'|| event.key === 'В'||event.key === 'в'){
            spaceShip.moveShip.moveX.right();
        } else if(event.key === " "){
            status = true;
        }

    })



    function draw() {
        ctx.clearRect(0,0, canvas.width, canvas.height);
        spaceShip.drawShip();
        if(status === true){

            spaceShip.gun.makeFire();


        }





        requestAnimationFrame(draw);
    }



draw();
}