Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   необходимо, чтобы функция вызывалась каждый раз, когда нажимается кнопка (https://javascript.ru/forum/misc/80508-neobkhodimo-chtoby-funkciya-vyzyvalas-kazhdyjj-raz-kogda-nazhimaetsya-knopka.html)

namboodiris 14.06.2020 21:28

необходимо, чтобы функция вызывалась каждый раз, когда нажимается кнопка
 
Здравствуйте, уважаемые форумчане!
Подскажите, пожалуйста, в чем проблема.
Я начал изучать 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();
}

рони 14.06.2020 21:49

namboodiris,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

namboodiris 15.06.2020 19:54

Цитата:

Сообщение от Rise (Сообщение 525871)
namboodiris,
На классы надо переписать, иначе то как сейчас будет сложно.

спасибо! до классов мне еще целый раздел нужно освоить))

рони 15.06.2020 20:48

namboodiris,
https://himbotop.github.io/MFG3/


Часовой пояс GMT +3, время: 05:10.