Плавный прыжок на js canvas?

Question

[Vlad_16_09]

Не могу сделать плавный прыжок ,кто знает помогите начинающему gameDev программитсу

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");



let bg = new Image();
bg.src = "https://st2.depositphotos.com/2172301/10601/v/600/depositphotos_106013420-stock-illustration-seamless-cartoon-landscape-with-mountains.jpg";


let cactus = new Image();
cactus.src ="img/cactus.png";

let dog = new Image();
dog.src = "https://cdn2.iconfinder.com/data/icons/japan-flat-2/340/dog_pet_animal_japanese_shiba_inu_japan-256.png";

let dogX = 100;
let dogY = 250;


let pipe = [];
pipe[0] = {
    x:canvas.width,
    y:270
};


function draw(){
    ctx.drawImage(bg,0,0);
    ctx.drawImage(dog,dogX,dogY,100,100);
    for(let i = 0;i<pipe.length;i++){
        ctx.drawImage(cactus,pipe[i].x,pipe[i].y,80,80);
        pipe[i].x -= speed;


        if(pipe[i].x == 300){
            pipe.push({
                x:canvas.width,
                y:270
            });
        }
    }
    
   
      
    requestAnimationFrame(draw);
    
}

function space(){
    dogY -= 85;

    
}


document.addEventListener("keydown",space);



bg.onload = draw;

Comments

[Денис Инешин]

Для начала создайте демку на codepen/jsfiddle/replit

[Vlad_16_09]

Денис Инешин, Покамись нет времени,но проблема такая что когда я прыгаю то персонаж зависает на отметке до которой прыгнул не опускаясь на обратную точку

[WbICHA]

Vlad_16_09, интересно, а какое иное поведение ты ожидал увидеть?

function space(){
  dogY -= 85;
}

[Vlad_16_09]

WbICHA, А как лучше прописать,если не трудно подскажите)

[WbICHA]

Vlad_16_09, "переписать"? А ты что-то написал, чтобы это переписывать?

[Vlad_16_09]

WbICHA, Не переписывать ил переписать я не знаю ,я просто хочу научиться делать плавный прыжок я покамись не профессионал в этой области из за этого на этом сайте в поиске ответа

[Vlad_16_09]

Подскажите как?И всё ,укажите на ошибки где не так,как лучше сделать то или другое,вы же тоже не с первого дня стали профессионалом

Answer 1

[Сергей Соколов]

1. научитесь вежливо общаться с коллегами: форматировать свой код и предлагать его в читаемом виде, а лучше — приводить работающий самодостаточный пример на jsFiddle или CodePen
   
2. прочитайте про метод requestAnimationFrame() – что передаётся в него аргументом – это понадобится для реалистичной плавности на всех устройствах от быстрого компа до слабого телефона
   
3. вспомните физику: ускорение свободного падения
   
4. для плавности при резких изменениях координат (подпрыгивании) можно использовать цепочку преследования