title: How to make a 2d character run and jump in JavaScript
body: <p>I'm trying to make a square using canvas and making it jump and run, and I have followed the toturial of PothOnProgramming on youtube. I have written the code in a html document and for some reason nothing shows up on the browser when i test it.</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-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      &lt;script&gt;
          
          var context, controller, player, loop;
  
          context=document.querySelector("canvas").getContext("2d");
  
          context.canvas.height=180;
          context.canvas.width=320;
  
          player={
              height=32,
              jumping=true,
              width=32,
              x=144,
              x_velocity=0,
              y=0,
              y_velocity:0
          };
  
          controller={
              left=false,
              right=false,
              up=false,
              keyListener:function(event){
                  var kay_state=(event.type=="keydown")?true:false;
  
                  switch(event.keyCode){
                      
                      case 87:
                          controller.up=key_state;
                      break;
                      case 68:
                          controller.right=key_state;
                      break;
                      case 65:
                          controller.left=key_state;
                      break;
                  }
  
              }
          };
          loop=function(){
              
              if(controller.up &amp;&amp; player.jumping==false){
                  player.y_velocity-=20;
                  player.jumping=true;
              }
              if(controller.left){
                  player.x_velocity-=0.5; //For at "player" akselererer smooth
              }
              if(controller.right){
                  player.x_velocity+=0.5; //For at "player" akselererer smooth
              }
  
              player.y_velocity+=1.5; //Gravity
              player.x+=player.x_velocity;
              player.y+=player-y_velocity;
              player.x_velocity*=0.9; //Friksjon  (må leggest til eller så synker ikke farten)
              player.y_velocity*=0.9; //Friksjon
  
              //dersom player faller til y verdien så koliderer den (bunn linjen)
              if(player.y&gt;180-16-32){
                  player.jumping=false;
                  player.y=180-16-32;
                  player.y_velocity=0;
              }
              
              context.fillStyle = "#202020";
              context.fillRect(0, 0, 320, 180);
              context.fillStyle="#ff0000";
              context.beginPath();
              context.rect(player.x, player.y, player.width, player.height);
              context.fill();
              context.strokeStyle="#ff0000";
              context.lineWidth=4;
              context.beginPath();
              context.moveTo(0, 164);
              context.lineTo(320, 164);
              context.stroke();
  
              window.requestAnimationFrame(loop);
          };
          window.addEventListener("keydown", controller.keyListener);
          window.addEventListener("keyup", controller.keyListener);
          window.requestAnimationFrame(loop);
  
      &lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm quite new to this so it may be a simple typo, but I would love to find out what I can do differently to make it work.</p>