How do i make the jumping smoother in this game. It is Teleporting

问题

After a long time of looking through internet, i finally figured out how to make my character jump. But i am still having problems with jumping. When i would press the jump button, the character / ball would basically teleport to the desired location, then slowly fall down because of the gravity that i have set up. I have no clue what so ever. I am a student and a programming languages learner, so please bear with me.

If you guys could make the going up part of the jumping much smoother for me, it would be much appreciated. Here is my code.

Introducing Image:

function startGame() {
    "use strict";
    myGameArea.start();
    myGamePiece = new component(30, 30, "GamePiece.png", 10, 389, "image");              
/* Javascript that controls the movment of the character and the 
background/when the game loads*/

Defining Game Area and keycodes:

var myGameArea = {
    canvas : document.getElementById("myCanvas"),
    start : function() {
        "use strict";
        this.canvas.width = 1300;
        this.canvas.height = 600;
        this.canvas.style.position = "absolute";
        this.canvas.style.top = "267px";
        this.canvas.style.left = "303px";
            this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, 
        document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type === "keydown");                      
/* Loading th Canvas and style it to stay at the exact same position*/
        });
         window.addEventListener('keyup', function (e) {
         myGameArea.keys[e.keyCode] = (e.type === "keydown");            
         });
    },

Defining the position every time:

    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
         this.hitBottom();
    };
 }

Keys pressed:

function updateGameArea() {
    if (myGamePiece.jumping <= 0 && myGameArea.keys && myGameArea.keys[38]) 
    {myGamePiece.speedY = -40; myGamePiece.jumping = 1;}
     if (myGamePiece.y >= 389) {myGamePiece.jumping = 0; }
    myBackground.newPos();
    myBackground.update();
    myGamePiece.newPos();    
    myGamePiece.update();

}

It is a paint in the butt to indent all of these lines of code individually if anyone could help me with that, it would be awesome.

来源：https://stackoverflow.com/questions/54103308/how-do-i-make-the-jumping-smoother-in-this-game-it-is-teleporting

标签

javascript

html

canvas