Мой прыжок работает неправильно: он внезапно возвращается вниз канваса после нажатия кнопки прыжка, на JavaScript

По сути, я создал кнопку для прыжка, и после того как я нажимаю кнопку, персонаж прыгает, но затем внезапно мгновенно возвращается на землю. У меня есть видеозапись, пожалуйста, посмотрите, если вы все еще не поняли суть проблемы. Вот мой код ниже: видео

let board;
let context;
let boardWidth = 600;
let boardHeight = 300;
let frames;

let dinoX = 30;
let dinoY = boardHeight - 60;
let dinoWidth = 50;
let dinoHeight = 50;

let pipeX = 900;
let pipeY = boardHeight - 50;
let pipeWidth = 40;
let pipeHeight = 30;
let pipeArray = [];

let velocityX = -1;
let jumpY = 100;
let pressedSpace = 0;
let gravity = -1;
let velocityY = 0;
let intervalId;

let base = {
    x : 0,
    y : boardHeight - 30,
    w : 1400,
    h : 20,
    dx : 1
}
let dino = {
    animation : [
        startRunImg,
        secondRunImg,
        thirdRunImg,
        startRunImg
    ],
    x : dinoX,
    y : dinoY,
    w : dinoWidth,
    h : dinoHeight,
    onGround : true,
    frame : 0
}
let state = {
    current : 0,
    getReady : 0,
    game : 1,
    over : 2
}
window.onload = function() {
    board = document.querySelector('#canvas');
    boardWidth = board.width;
    boardHeight = board.height;
    context = board.getContext('2d');

    setInterval(placePipes, 1500);
    requestAnimationFrame(update);
};

document.addEventListener('click', (evt) => {

    switch(state.current){
        case state.getReady:
        state.current = state.game;
        break;
        
        case state.game:
        
        break;

        case state.over:
        state.current = state.getReady;
        break;
    }
})
// update function
function update(){
    requestAnimationFrame(update);
    context.clearRect(0, 0, board.width, board.height);


    drawBase();
    drawDino();
    drawPipes();
    frames++;

    if(state.current == state.game){
        velocityY += gravity;
        dino.y = Math.max(dino.y + velocityY, 0);
        colisionDetection();
    }
};
// jump button
document.addEventListener('keydown', (evt) => {
    let keyPressed = evt.keyCode;
    if(keyPressed == 32 && state.current == state.game && dino.onGround == true){
        console.log('space key pressed');
        pressedSpace = 1;  
        velocityY = -jumpY;
        dino.y += velocityY;
        dino.onGround = false;
    }
});
// colision detector
function colisionDetection(){
    if(dino.y + dino.h <= board.height){
        gravity = 0;
        velocityY = 0;
        dino.onGround = true;
        dino.y = board.height - dino.h;
    }
};
function drawDino(){
    let dinoA = dino.animation[dino.frame];
    context.drawImage(dinoA, dino.x, dino.y, dino.w, dino.h);

    if(state.current == state.game){
        dino.period = 1;
        dino.frame += frames % dino.period == 0 ? 1 : 0;
        dino.frame = dino.frame % dino.animation.length;
    }
};

Фактически, у меня нет ни малейшего представления о том, как можно решить эту проблему, но я надеюсь, что вы сможете помочь мне с этим.

(Если я предоставил недостаточно информации, отметьте это в комментариях)