title: How can I move my JS objects smoothly using keyboard input?
body: <p>So I am new to HTML5 and decided to start to code a pong game. I want to move my characters smoothly using my keyboard, the W and S keys for the one on the left and the Up and Down arrows for the one on the right. I can't seem to get it to work. It's probably quite easy, but me being the noob I am, I need a bit of help. Thanks in advance! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Pingedy Pong&lt;/title&gt;
    &lt;/head&gt;
    &lt;body style="font-family:Arial;"&gt;
        &lt;canvas id="ctx" width="699" height="400" style="background-color:black;border:2px solid black;background-image: url('background.jpg');"&gt;&lt;/canvas&gt;
        &lt;script&gt;
          
          // STARTING SCRIPT
            
          var ctx = document.getElementById("ctx").getContext("2d");
          ctx.fillStyle="white";
          ctx.font = '30px Arial';
          
          // VARIABLES
            
          var keys1 = [];
          var keys2 = [];
            
          var width = 699;
          var height = 400;
            
          var ball = {
              width:20,
              height:20,
              spdX:2.9,
              spdY:2.9,
              x:340,
              y:190,
          };
            
          var char1 = {
              w:15,
              h:90,
              spdX:3,
              spdY:3,
              x:10,
              y:155,
          };
            
          var char2 = {
              w:15,
              h:90,
              spdX:3,
              spdY:3,
              x:674,
              y:155,
          };
            
            // UPDATE
            
            function updateEntity(a) {
              a.x+=a.spdX;
              a.y+=a.spdY;
              ctx.clearRect(0,0,width,height);
              ctx.fillRect(a.x,a.y,a.height,a.width);
                if(a.x &gt; width-a.width || a.x &lt; 0) {
                  a.spdX = -a.spdX;
                };
                
                if(a.y &gt; height-a.height || a.y &lt; 0) {
                  a.spdY = -a.spdY;
                };
            };
            
            function renderChar(b) {
              ctx.fillRect(b.x,b.y,b.w,b.h);
            };
            
            function checkInput() {
              document.addEventListener('onkeydown', function(e) {
                  if(e.keyCode == 37) {
                      char1.y += 1;
                  }
                  else if(e.keyCode == 39) {
                      char1.y -= 1;
                  }
              });
            };
            
            function checkWinP1() {
                if (ball.x &lt; 0.33) {
                  console.log("P1 Wins");
                };
            };
            function checkWinP2() {
                if (ball.x &gt; 679) {
                  console.log("P2 Wins");
                };
            };
            
            function update() {
              updateEntity(ball);
              renderChar(char1);
              renderChar(char2);
              checkInput();
              checkWinP1();
              checkWinP2();
            };
            
            //TICKS
            
            setInterval(update,1000/120);
               
       &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>