title: how to make javascript game touch friendly?
body: <p>I created flappy bird by following a youtube tutorial. Inside Bird.js there is a function called handleJump, inside that function when i put &quot;Space&quot;, the bird jumps whenever i press space key on keyboard, but when i change it to &quot;touchstart&quot; the bird doesn't jump when i touch the screen! what am i doing wrong? what should i do?</p>
  <p><strong>The main page ( f.js ):</strong></p>
  <pre><code>import { updateBird, setupBird, getBirdRect } from &quot;./Bird.js&quot;;
  import {
    updatePipes,
    setupPipes,
    getPassedPipesCount,
    getPipesRects,
  } from &quot;./Pipe.js&quot;;
  
  //document.addEventListener(&quot;keypress&quot;, handleStart, { once: true });
  document.addEventListener(&quot;touchstart&quot;, handleStart, { once: true });
  const title = document.querySelector(&quot;[data-title]&quot;);
  const subtitle = document.querySelector(&quot;[data-subtitle]&quot;);
  
  let lastTime;
  function updateLoop(time) {
    if (lastTime == null) {
      lastTime = time;
      window.requestAnimationFrame(updateLoop);
      return;
    }
    const delta = time - lastTime;
    updateBird(delta);
    updatePipes(delta);
    if (checkLose()) return handleLose();
    lastTime = time;
    window.requestAnimationFrame(updateLoop);
  }
  
  function checkLose() {
    const birdRect = getBirdRect();
    const insidePipe = getPipesRects().some((rect) =&gt;
      isCollision(birdRect, rect)
    );
    const outsideWorld = birdRect.top &lt; 0 || birdRect.bottom &gt; window.innerHeight;
    return outsideWorld || insidePipe;
  }
  
  function isCollision(rect1, rect2) {
    return (
      rect1.left &lt; rect2.right &amp;&amp;
      rect1.top &lt; rect2.bottom &amp;&amp;
      rect1.right &gt; rect2.left &amp;&amp;
      rect1.bottom &gt; rect2.top
    );
  }
  
  function handleStart() {
    title.classList.add(&quot;hide&quot;);
    setupBird();
    setupPipes();
    lastTime = null;
    window.requestAnimationFrame(updateLoop);
  }
  
  function handleLose() {
    setTimeout(() =&gt; {
      title.classList.remove(&quot;hide&quot;);
      subtitle.classList.remove(&quot;hide&quot;);
      subtitle.textContent = `${getPassedPipesCount()} Pipes`;
      document.addEventListener(&quot;touchstart&quot;, handleStart, { once: true });
    }, 100);
  }
  </code></pre>
  <p><strong>Bird.js :</strong></p>
  <pre><code>const birdElem = document.querySelector(&quot;[data-bird&quot;);
  const BIRD_SPEED = 0.5;
  const JUMP_DURATION = 120;
  let timeSinceLastJump = Number.POSITIVE_INFINITY;
  
  export function setupBird() {
    setTop(window.innerHeight / 2);
    document.removeEventListener(&quot;touchstart&quot;, handleJump); //keydown
    document.addEventListener(&quot;touchstart&quot;, handleJump); //keydown
  }
  
  export function updateBird(delta) {
    if (timeSinceLastJump &lt; JUMP_DURATION) {
      setTop(getTop() - BIRD_SPEED * delta);
    } else {
      setTop(getTop() + BIRD_SPEED * delta);
    }
    timeSinceLastJump += delta;
  }
  
  export function getBirdRect() {
    return birdElem.getBoundingClientRect();
  }
  
  function setTop(top) {
    birdElem.style.setProperty(&quot;--bird-top&quot;, top);
  }
  
  function getTop() {
    return parseFloat(getComputedStyle(birdElem).getPropertyValue(&quot;--bird-top&quot;));
  }
  
  function handleJump(e) {
    if (e.code !== &quot;touchstart&quot;) return;
  
    timeSinceLastJump = 0;
  }
  
  </code></pre>