Как я могу выстрелить движущейся пулей?

Привет, я новичок здесь, а также в мире программирования, поэтому у меня есть небольшая проблема: я делаю простой игровой движок на JS, потому что хочу воспроизвести оригинальную игру Space Invaders, проблема в том, что пуля не движется, только появляется и исчезает, как лазерный выстрел. Я хочу иметь движущуюся пулю. Кто-нибудь может мне помочь? P.S. Я не хочу использовать здесь объектно-ориентированное программирование, я хочу сделать всю игру в одном файле .js.

console.info('GAME LOADED//SPACE INVADERS');

////////////////////////////////////////////////

let screen = document.createElement('canvas');
screen.width = 800;
screen.height = 900;
document.body.appendChild(screen);
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
let ctx = screen.getContext('2d');

////////////////////////////////////////////////

let x = screen.width / 2;
let y = screen.height / 2;
let bulletY = screen.height - 20;
let bulletSpeed = 10;
let bulletLifeTime = 3;
let size = 20;
let sWidth = screen.width;
let sHeight = screen.height;
let columns = screen.width / size;
let rows = screen.height / size;
let speed = 5;
let right = false;
let left = false;
let up = false;
let down = false;
let shot = false;
let gravity = 10;
let jumpForce = 40 ;

/////////////////////////////////////////////////

function keyDown() {
    switch(event.keyCode) {
        case 39: right = true;
                 break;
        case 37: left = true;
                 break;
        //case 40: up = true;
                 //break;
        //case 38: down = true;
                 //break;
        case 32: shot = true;  
                 break;        
    }
}

function keyUp() {
    switch(event.keyCode) {
        case 39: right = false;
                 break;
        case 37: left = false;
                 break;
        //case 40: up = false;
                 //break;
        //case 38: down = false;
                 //break;
        case 32: shot = false; 
                 break;        
    }
}

function move() {
    if (right == true) {
        x += 1 * speed;
    } else if (left == true) {
        x -= 1 * speed;
    }
    //if (up == true) {
        //y += 1 * speed;
    //} else if (down == true) {
        //y -= 1 * speed;
    //}
}

 function player() {
    ctx.fillStyle = '#1CE80D';
    ctx.fillRect(x, y, size, size);
    ctx.fillRect(x+10, y, size, size);
    ctx.fillRect(x+20, y, size, size);
    ctx.fillRect(x-10, y, size, size);
    ctx.fillRect(x-20, y, size, size);
    ctx.fillRect(x+5, y-1, 10, 10);
    ctx.fillRect(x+5, y-2, 10, 10);
    ctx.fillRect(x+5, y-3, 10, 10);
    ctx.fillRect(x+5, y-4, 10, 10);
    ctx.fillRect(x+5, y-5, 10, 10);
    ctx.fillRect(x+5, y-6, 10, 10);
    ctx.fillRect(x+5, y-7, 10, 10);
    ctx.fillRect(x+9, y-8, 2, 2);
    ctx.fillRect(x+9, y-9, 2, 2);
    ctx.fillRect(x+9, y-10, 2, 2);
    ctx.fillStyle = 'black';
    ctx.fillRect(x+35, y, 5, 5);
    ctx.fillRect(x-20, y, 5, 5);
}

function enemy1() {
    ctx.fillStyle = '#1CE80D';
    ctx.fillRect(444, 375, 5, 5);
    ctx.fillRect(411, 375, 5, 5);
    ctx.fillRect(416, 380, 5, 5);
    ctx.fillRect(439, 380, 5, 5);
    ctx.fillRect(410, 385, 40, 5);
    ctx.fillRect(405, 390, 50, 5);
    ctx.fillRect(400, 395, 60, 5);
    ctx.fillRect(400, 400, 60, 5);
    ctx.fillRect(400, 405, 5, 5);
    ctx.fillRect(455, 405, 5, 5);
    ctx.fillRect(410, 405, 40, 5);
    ctx.fillStyle = '#001119';
    ctx.fillRect(415, 405, 30, 5);
    ctx.fillStyle = '#1CE80D';
    ctx.fillRect(415, 410, 30, 5);
    ctx.fillStyle = '#001119';
    ctx.fillRect(440, 390, 5, 5);
    ctx.fillRect(414, 390, 5, 5);
    ctx.fillRect(428, 410, 4, 5);  
}

function draw() {
    ctx.fillStyle = '#001119';
    let background = ctx.fillRect(0, 0, sWidth, sHeight);
    player();

    ctx.fillStyle = '#EAEEB7';
    let wall1 = ctx.fillRect(0, 0, 10, sHeight);
    let wall2 = ctx.fillRect(0, 0, sHeight, 10);
    let wall3 = ctx.fillRect(0, sHeight - 10, sWidth, 10);
    let wall4 = ctx.fillRect(sWidth - 10, 0, 10, sHeight);
}

function gravityForce() {
    y += gravity;
}

function jumpAct() {
    if (jump == true) {
        y -= jumpForce;
    } else if (jump == false) {
        gravityForce();
   }
}

function bulletDraw() {
    let bulletX = x;
    ctx.fillStyle = '#1CE80D';
    ctx.fillRect(bulletX + 9, bulletY, 1, 8);
}

function bulletPos() {
    bulletY -= bulletSpeed;    
}

function attack() {
    if (shot == true) {
        for(let i = screen.height; i > 0; i--) {
        bulletDraw();
        bulletPos();
        }
        console.info('shooting');
    } else if (shot == false) {
        bulletY = 880;
    }
}

function gameLoop() {
    ctx.clearRect(0, 0, screen.width, screen.height);
    draw();
    move(); 
    gravityForce();
    attack(); 
    enemy1();
    bulletPos();
    requestAnimationFrame(gameLoop); 
    if (x > screen.width - size - 30) {
        x = 30
    } else if (x < 30) {
        x = screen.width - 50;
    }
    if (y > screen.height - size - 10) {
        y -= (size - 10);
    } else if (y < 0) {
        y += size;
    } 
}
////////////////////////////////////////////////

requestAnimationFrame(gameLoop);

Этот цикл for(let i = screen.height; i > 0; i--) выполнится до конца всего за несколько миллисекунд, то есть практически сразу. Есть несколько способов сделать цикл с задержкой в ​​JS, посмотрите мой ответ здесь: stackoverflow.com/a/37563825/5768908

Gerardo Furtado 20.07.2019 12:52

Привет, добро пожаловать в переполнение стека. Очень полезно, если вы знаете, как отлаживать программу, чтобы исследовать текущее состояние программы. Начните использовать инструменты F12 в браузере, который вы используете, например, и сообщите о своих выводах.

Jeroen Heier 20.07.2019 12:57

включите свой html-код, или простая вилка будет намного проще для нас, чтобы исправить это

Abdelillah Aissani 20.07.2019 12:57

@GerardoFurtado Спасибо, я попробую. :)

anasse 20.07.2019 12:58

@JeroenHeier Спасибо и вам, теперь отладка очень важна, мне нужно узнать больше. :)

anasse 20.07.2019 13:00

@Dadboz Да, теперь доступен весь код. :)

anasse 20.07.2019 13:10

Ребята, я решаю это с помощью setInterval(), большое спасибо всем!

anasse 20.07.2019 13:25

@anasse вы также можете dt+=t - lastTif (dt>30/100) {do gameloopLogic} в RequestAnimationFrame

Estradiaz 20.07.2019 13:29

@Estradiaz О, спасибо, отлично, теперь у меня есть два варианта, супер.

anasse 20.07.2019 14:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
9
103
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вам нужно управлять как интервалом таймера, так и функцией перерисовки холста. Я не считаю хорошей идеей перерисовывать весь холст в каждом интервале, вместо этого вы можете перерисовывать только необходимую область холста. Я изменил ваш код с помощью функции установить время ожидания () без перерисовки всего холста. Вы можете увидеть полный код в этом пути скрипача https://jsfiddle.net/SyamKumarD/knyt7shf/18/

Некоторые ключевые коды, которые вам нужно проверить

1. setTimeout() method
2. hitTarget() method and its instantiation
3. Key down and up events

Надеюсь, это поможет

Вау, спасибо большое, правда, теперь у меня есть ясное представление о некоторых вещах, спасибо! :)

anasse 20.07.2019 18:34

Другие вопросы по теме