title: How to make my character jump with gravity?
body: <p>I am a newbie to coding, and I am making a game, but I do not know how to simulate gravity to make my character jump. I have tried many different things, and turned up with disastrous results. This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#canvas {
    border: 1px solid #d3d3d3;
    background-color: #f1f1f1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;canvas id='canvas' width='512px' height='300px'&gt;&lt;/canvas&gt;
  
    &lt;script&gt;
      let canvas = document.getElementById('canvas');
      let ctx = canvas.getContext('2d');
      let charX = 20;
      let charY = 130;
      let charSide = 20;
      let velocity = 0;
      let resistance = 0;
      let rightPressed = false;
      let leftPressed = false;
      let upPressed = false;
      let aPressed = false;
      let dPressed = false;
  
      function drawRect(x, y, width, height, color) {
        ctx.beginPath();
        ctx.rect(x, y, width, height);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
      }
  
      function drawGround(x, y, count) {
        if (count === undefined) {
          count = 1;
        }
        drawRect(x, y, 32 * count, canvas.height - y, '#684027');
        drawRect(x, y, 32 * count, 10, 'green');
      }
  
      function draw() {
        //Updates Game
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        //Draws Character
        drawRect(charX, charY, charSide, charSide, 'lime');
        //Draws Ground
        drawGround(0, 150, 16);
        //Moves Character
        if (charY = 130) {
          speed = 0;
          accelerate = 0;
        }
        if (rightPressed &amp;&amp; charX &lt; canvas.width - charSide) {
          charX += 2;
        } else if (leftPressed &amp;&amp; charX &gt; 0) {
          charX -= 2;
        } else if (upPressed &amp;&amp; charY &gt; 0 &amp;&amp; charY &lt; 131) {
          velocity = 0;
          velocity += 50;
          resistance++;
          velocity -= resistance;
          charY -= velocity;
        } else if (upPressed === false &amp;&amp; charY &gt; 129) {
          resistance = 0;
          velocity = 0;
        }
      }
      //Character Movement Logic
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);
  
      function keyDownHandler(e) {
        if (e.keyCode == 39) {
          rightPressed = true;
        } else if (e.keyCode == 37) {
          leftPressed = true;
        } else if (e.keyCode == 38) {
          upPressed = true;
        } else if (e.keyCode == 65) {
          aPressed = true;
        } else if (e.keyCode == 68) {
          dPressed = true;
        }
      }
  
      function keyUpHandler(e) {
        if (e.keyCode == 39) {
          rightPressed = false;
        } else if (e.keyCode == 37) {
          leftPressed = false;
        } else if (e.keyCode == 38) {
          upPressed = false;
        } else if (e.keyCode == 65) {
          aPressed = false;
        } else if (e.keyCode == 68) {
          dPressed = false;
        }
      }
      //Animates Game
      setInterval(draw, 10);
    &lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried to make different variable, like velocity and resistance, and apply them to the y-position of my character when  jumping, but it did not work. </p>