title: Jump Animation in JavaScript
body: <p>My newest Hobby Project is a very simple Jump'n'Run Game using JavaScript. I already wrote some code (with the help of a tutorial at lostdecadegames) and read everything about the GameLoop. </p>
  
  <pre><code>var start = true;
  
  // Create the canvas
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 1200;
  canvas.height = 480;
  document.body.appendChild(canvas);
  
  var jumping = false;
  var gravity = 1.5;
  var pressed = true;
  
  
  // Background image
  var bgReady = false;
  var bgImage = new Image();
  bgImage.onload = function () {
      bgReady = true;
  };
  bgImage.src = "background.png";
  
  // Hero image
  var heroReady = false;
  var heroImage = new Image();
  heroImage.onload = function () {
      heroReady = true;
  };
  heroImage.src = "hero.png";
  
  // Monster image
  var monsterReady = false;
  var monsterImage = new Image();
  monsterImage.onload = function () {
      monsterReady = true;
  };
  monsterImage.src = "monster.png";
  
  // Game objects
  var hero = {
      speed_x: 50,
      speed_y_up: 50,
      speed_y_down: 50, // movement in pixels per second
      velocity_x: 50,
      velocity_y: 50
  };
  
  // Handle keyboard controls
  var keysDown = {};
  
  addEventListener("keydown", function (e) {
      keysDown[e.keyCode] = true;
  }, false);
  
  addEventListener("keyup", function (e) {
      delete keysDown[e.keyCode];
  }, false);
  
  
  // Update game objects
  var update = function (modifier) {
      if(38 in keysDown) { // Player holding up
          jumping = true;
          //hero.y -= hero.speed_y_up * modifier;
      }   
      if (40 in keysDown) { // Player holding down
          hero.y += hero.speed_y_down * modifier;
      }
      if (37 in keysDown) { // Player holding left
          hero.x -= hero.speed_x * modifier;
      }
      if (39 in keysDown) { // Player holding right
          hero.x += hero.speed_x * modifier;
      }
  
  };
  
  
  // Draw everything
  var render = function () {
      if (bgReady) {
          ctx.drawImage(bgImage, 0, 0);
      }
  
      if (heroReady) {
          if(hero.y &gt; 0 &amp;&amp; hero.y &lt; 480 &amp;&amp; hero.x &lt;= -32)
              {
              hero.x = hero.x + 1232;
              ctx.drawImage(heroImage, hero.x, hero.y);
              }
          else if(hero.y &gt; 0 &amp;&amp; hero.y &lt; 480 &amp;&amp; hero.x &gt;= 1200)
              {
              hero.x = hero.x - 1232;
              ctx.drawImage(heroImage, hero.x, hero.y);
              }
          else if(jumping)
              {
              ctx.drawImage(heroImage, hero.x, hero.y-100);
              jumping = false;
              }
          else ctx.drawImage(heroImage, hero.x, hero.y);
      }
  
      if (monsterReady) {
          ctx.drawImage(monsterImage, monster.x, monster.y);
      }
  
  
  };
  
  
  // The main game loop
  var main = function () {
      var now = Date.now();
      var delta = now - then;
  
      update(delta / 500);
      render();
  
      then = now;
  };
  
  // Starting the game!
  reset();
  var then = Date.now();
  setInterval(main, 1); // Execute as fast as possible
  </code></pre>
  
  <p>As you can see, I already added a fix gravity var and some speed vars. The Hero moves very smooth, so this is no problem. 
  I have 2 problems with the jump-Animation:</p>
  
  <ol>
  <li>The Hero stays in the air, when the Up-Key is keep being pressed. I tried to fix this with some boolean vars, but I couldn't figure it out how to get the Hero down again.</li>
  <li>Right now, I implemented a "dirty hack" which causes the Hero to be repainted 50px higher, but I want a smooth Jump, so that the Hero gets slower while going up and speeds up while falling. I looked up so many Tutorials and so much Example Code, but I'm too stupid to figure it out, how I get my desired Animation. </li>
  </ol>
  
  <p>Hope you guys can give me some advice for my problem (I'm not asking for the final code, I just need some tips).</p>