Как кодировать прыжки в игре с javascript?

Я впервые пишу игру на javascript, большая часть моего кода неэффективна. Я застрял в том, как закодировать метод прыжка для моего куба (персонажа для моей игры). Прыжок работает, но игрок может сделать двойной прыжок. Двойной прыжок происходит по пути вниз, если пользователь снова нажимает клавишу прыжка. Я попытался установить переменную, которая будет изменяться, когда игрок находится на земле, и если это правда, вам разрешено только прыгать, но это не сработало. Вот код:

    //setting screen up
const canvas = document.getElementById('canvas');
const c = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;

//ground
gHeight =  canvas.height/1.3
function ground(){
    c.fillStyle = 'white';
    c.fillRect(0,gHeight,canvas.width,canvas.height-gHeight);
}
//player
class Player{
    constructor(x,y,w,h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = 'rgb(92,168,255)';
        this.l = false;
        this.r = false;
        this.speed = 10
        this.hp = 100;
        this.jump = false;
        this.jumpC = 0;
    }
    draw(){
        c.fillStyle = this.color;
        c.fillRect(this.x,this.y,this.w,this.h);
    }
    update(){
        this.draw();
        //gravity
        if (this.y < gHeight - this.h){
            this.y += 5;
        }
        //movement
        if (this.l == true){
            this.x -= this.speed;
        }
        if (this.r == true){
            this.x += this.speed;
        }
        //jump
        if (this.jump == true){
            this.y -= 10;
            this.jumpC += 5;
        }
        if (this.jumpC >= 100){
            this.jump = false;
            this.jumpC = 0;
        }
    }
}
var player = new Player(100, 100,50,50);
//main loop
var animationId;
function animate(){
    c.fillStyle = 'rgba(0,0,0,0.7)';
    c.fillRect(0,0, canvas.width, canvas.height);
    animationId = requestAnimationFrame(animate);
    
    //drawing the ground
    ground();
    //drawing the player
    player.update();
    //ending game
    if (player.hp == 0){
        cancelAnimationFrame(animationId);
    }
}
//keypress
addEventListener('keydown', (event)=>{
    if (event.keyCode == 37) {
        player.l = true;
    }
    if (event.keyCode == 39) {
        player.r = true;
    }
    if (event.keyCode == 38 && player.jump == false){
        player.jump = true;
    }
});
//keyup
addEventListener('keyup', (event)=>{
    if (event.keyCode == 37 ) {
        player.l = false;
    }
    if (event.keyCode == 39) {
        player.r = false;
    }
});
animate();

скажите мне, если нужна дополнительная информация

возможный дубликат stackoverflow.com/questions/9960959/jumping-in-a-game

MRRaja 12.12.2020 15:31

@MRRaja Я действительно видел этот пост, я использовал его код, прыжок работает, механик работает, но пользователь может прыгать по пути вниз

m.said 12.12.2020 15:34

А как насчет этого поста?

FZs 12.12.2020 16:24
Поведение ключевого слова "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) для оценки ваших знаний,...
3
3
950
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

После прыжка сделать невозможным прыжок, пока игрок не коснется земли.

if (event.keyCode == 38 && player.jump == false){ player.jump = true; }

Я бы добавил еще одно сравнение, если это так:

if (event.keyCode == 38 && player.jump == false && player.isOnGround()){ player.jump = true; } Чтобы проверить, приземлился ли пользователь

Я попробую это, посмотрим, сработает ли это, дайте вам знать, если это так, или какие-либо новые результаты

m.said 12.12.2020 16:45

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