title: Using only JavaScript to create a jump animation
body: <p>I don't know why my code doesn't allow me to jump properly.
  I can move left and right just fine, but when I try to jump using the up arrow it brings me to a random height and I don't fall back down.</p>
  
  <p>I'm trying to build a platformer and get down the basic code needed.</p>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>var canvas = document.getElementById("mainCanvas");
  var context = canvas.getContext("2d");
  
  var keys =[];
  
  var width = 500,
      height = 400,
      speed = 4,
      jumpHeight = 10,
      gravity = 10.0,
      velocity = null;
  
  var player= {
      x:0,
      y:380,
      width:20,
      height:20,
      speed:4,
      velX:0,
      velY:0,
      jumpBoo:false,
  };
  
  
  window.addEventListener("keydown", function(e){
      keys[e.keyCode] = true;
  }, false);
  window.addEventListener("keyup", function(e){
      delete keys[e.keyCode];
  }, false);
  
  /*
      keys
      up-38
      down-40
      right-39
      left-37
  */
  function game(){
      update();
      render();
  }
  function jump(){
      if(keys[38]){
          if(player.y=250){
              player.y+=speed*5;
          }
          if(player.y&lt;250){
              player.y-=speed*3;
          }
      }
  }
  function update(){
      jump();
      if(keys[37]) player.x-=speed;
      if(keys[39]) player.x+=speed;
  
      if(player.x &lt;0) player.x=0;
      if(player.y &lt;0) player.y=0;
      if(player.x &gt;= width - player.width) player.x = width - player.width;
      if(player.y &gt;= height - player.height) player.y = height - player.height;
      if(player.y &gt;= height-player.height){
          player.y = height - player.height;
      }
  }
  function render(){
      context.clearRect(0,0,width,height);
      context.fillRect(player.x, player.y, player.width, player.height);
  }
  setInterval(function(){
      game();
  }, 1000/30);
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"/&gt;
          &lt;title&gt;Game&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;canvas id="mainCanvas" width="500" height="400"&gt;&lt;/canvas&gt;
          &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#mainCanvas{
      background-color: #bcbcbc;
  }
  </code></pre>