title: Using buttons as touchscreen controls for javascript game
body: <p>I'm making a webpage that is just a place to take a break, and a lot of my users are on touchscreen, so I'm trying to implement touchscreen controls into the games, but it's not working and I cannot for the life of me figure out why. The arrow key controls still work, but not the buttons.</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;canvas id="myCanvas" width="480" height="320" &gt;&lt;/canvas&gt;
  &lt;script&gt;
  function playGame() {   var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var x = canvas.width/2;
  var y = canvas.height-30;
  var dx = 2;
  var dy = -2;
  var ballRadius = 10;
  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleX = (canvas.width-paddleWidth) / 2;
  var rightPressed = false;
  var leftPressed = false;
  var difficulty = 10
  var score = 0
  var gameRunning = false
  var paused = false
  function paddleMoveLeft(){   paddleX -= 5;
      if (paddleX &lt; 0){
          paddleX = 0;
      }}
  function paddleMoveRight(){  paddleX += 5;
      if (paddleX + paddleWidth &gt; canvas.width){
          paddleX = canvas.width - paddleWidth;
      }}
  function playPause(){
  if(paused === true){paused = false}
  else {paused = true}
  }
  function drawBall() {
      ctx.beginPath();
     ctx.arc(x, y, ballRadius, 0, Math.PI*2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
  }
  function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
  }
  function drawScore() {
      ctx.font = "24px ";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Score: "+score, 8, 20);
  }
  function draw() {
   if (paused === false){
   ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
     drawScore();
     x += dx;
      y += dy;
     
  if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
      dx = -dx;
  }
  if(y + dy &lt; ballRadius) {
      dy = -dy;
  } else if(y + dy &gt; canvas.height-ballRadius) {
      if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
          dy = -dy;
          difficulty = difficulty + 0.5;
    score = score + 1;
    }
      else {
          alert("GAME OVER! you scored " + score);
           ctx.clearRect(0, 0, canvas.width, canvas.height);
          clearInterval(interval);
     canvas.style.display = 'none';
     }
  }
  
  if(rightPressed) {
    paddleMoveRight();
  }
  else if(leftPressed) {
    paddleMoveLeft();
  }
  
  }
  }
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);
  function keyDownHandler(e) {
      if(e.key == "Right" || e.key == "ArrowRight") {
          rightPressed = true;
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
          leftPressed = true;
      }
  }
  
  function keyUpHandler(e) {
      if(e.key == "Right" || e.key == "ArrowRight") {
          rightPressed = false;
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
          leftPressed = false;
      }
  }
  var interval = setInterval(draw, difficulty);}
   
      
   
  &lt;/script&gt;
  &lt;div style = 'width: 30%; margin: auto;'&gt;
  &lt;button style = 'font-size:large;' onclick = 'paddleMoveLeft()'&gt; left&lt;/button&gt;
  &lt;button style = 'font-size: large;' onclick = 'paddleMoveRight()'&gt; right&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea what's wrong?</p>