title: why is my game so slow in firefox?
body: <p>I was playing around with the new HTML5 standards to see what it can provide and to learn stuff... But I don't get why my game is so slow mosly in firefox.</p>
  
  <p>There is several ways you can choose to "draw" the player and the background.
  That can be chosen in bottom right corner.</p>
  
  <p>I have tested the game in <strong>firefox with the result</strong>:</p>
  
  <p>well all in all super slow results. 
  With Html it totally lags
  with canvas it seems a little better but still totally laggs...</p>
  
  <p><strong>Google Chrome results:</strong></p>
  
  <p>Google seems to run the code fairly well... it doenst lagg really.</p>
  
  <p><strong>Internet Explorer tests</strong></p>
  
  <p>So here is the interesting part of it all. Internet Explorer 9 runs it super well... its almost too fast on my computer.</p>
  
  <p>So my question is. Does firefox not like my graphic card? or where does it go wrong? maybe my code is too slow? but is i have done the test right it only take aprox 1 ms to run the time interval that redraws the picture (as the timer indicates in top right corner named intervalTimer.</p>
  
  <p>And i would very much like to hear what results u get and if its just firefox hating my graphic card. :-(</p>
  
  <p>Also if u can see where I can do some improvements to make it work better in firefox.</p>
  
  <p>Here is some of my code:</p>
  
  <p>The <strong>interval.js</strong> file runs the setInterval and redraws the player.</p>
  
  <pre><code>function interval() {
  var startdate = +new Date();  // log start timestamp
  
  if (general_slowmo &gt; 9)
      general_slowmo = 0;
  else
      general_slowmo++;
  
  collisions();
  
  
  if (drawmethod == "canvas") {
      canvas.clearRect(0, 0, general_winwidth, general_winheight);
      drawplayercanvas(p0x, p0y, 0);
  }
  else if (drawmethod == "html") {
      drawplayerhtml(p0x, p0y, 0);
  }
  else {
      drawImageWebGl(p0, p0x, (general_winheight - p0y) - general_playerheight);
  }
  
  
  var enddate = +new Date();  // log end timestamp
  var diff = enddate - startdate;
  $("#intervalTimer").html("intervalTimer: " + diff + "ms");
  }
  </code></pre>
  
  <p>but what i get on the intervalTimer div is only 0 or 1 ms time. But i dunno if it counts the time it takes to draw the player?</p>
  
  <p>Inside the interval the function Collisions runs:</p>
  
  <pre><code>function collisions() {
  
  var spritex = p0x;
  var spritey = p0y;
  var jump = jumpp0;
  var keyX = keyXp0;
  var keyY = keyYp0;
  var onground = ongroundp0;
  
  if (keyX == -1) { //left movement
      if (blockexists(spritex - 1, spritey) === false &amp;&amp; blockexists(spritex - 1, spritey + general_blocksize) === false) {
          spritex--;
      }
  }
  
  if (keyX == 1) { //right movement
      if (blockexists(spritex + general_playerwidth, spritey) === false &amp;&amp; blockexists(spritex + general_playerwidth, spritey + general_blocksize) === false) {
          spritex++;
      }
  }
  
  if (jump != 0) {
      var aboveone = blockexists(spritex, spritey + (general_playerheight - 1));
      var abovetwo = blockexists((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));
  
      if (aboveone === true || abovetwo === true) {
          jump = 0;
  
          if (toblock(spritex, spritey + (general_playerheight - 1)) == 2) {
  
              removeblockarray(spritex, spritey + (general_playerheight - 1));
  
              if (mapdrawmethod == "canvas")
                  removeblockcanvas(spritex, spritey + (general_playerheight - 1));
              else
                  removeblockhtml(spritex, spritey + (general_playerheight - 1));
          }
          if (toblock((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1)) == 2) {
  
              removeblockarray((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));
  
              if (mapdrawmethod == "canvas")
                  removeblockcanvas((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));
              else
                  removeblockhtml((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));
          }
          spritey--;
      }
      else {
          jump++;
          spritey++;
  
          if (jump &gt; maxjump) {
              jump = 0;
          }
      }
  }
  
  if (keyX != 0 || onground == false) {
      if (blockexists(spritex, spritey - 1) === true || (blockexists(spritex + general_playerwidth - 1, spritey - 1) === true)) {
          if (jump == 0)
              onground = true;
      }
  
      else if (jump == 0) {
          spritey--;
          onground = false;
      }
  }
  
  if (blockexists(spritex, spritey, "item") === true || blockexists(spritex + general_playerwidth - 1, spritey, "item") === true || blockexists(spritex, spritey + general_playerheight, "item") === true || blockexists(spritex + general_playerwidth - 1, spritey + general_playerheight, "item") === true) {
  
      if (toblock(spritex, spritey) == 11) {
          $("#diamcount").html(++general_numdiamonds);
      }
      else if (toblock(spritex + general_playerwidth - 1, spritey) == 11) {
          $("#diamcount").html(++general_numdiamonds);
      }
      if (toblock(spritex, spritey + general_playerheight) == 11) {
          $("#diamcount").html(++general_numdiamonds);
      }
      else if (toblock(spritex + general_playerwidth - 1, spritey + general_playerheight) == 11) {
          $("#diamcount").html(++general_numdiamonds);
      }
  
      if (toblock(spritex, spritey) == 10 || toblock(spritex + general_playerwidth - 1, spritey) == 10 || toblock(spritex, spritey + general_playerheight) == 10 || toblock(spritex + general_playerwidth - 1, spritey + general_playerheight) == 10) {
          if (keyY == 1) {
              if (general_slowmo &gt; 5) {
                  spritey++;
              }
  
              onground = true;
              jump = 0;
          }
          if (keyY == -1) {
              if (general_slowmo &gt; 5) {
                  spritey--;
              }
  
              onground = true;
              jump = 0;
          }
      }
  }
  
  
  p0x = spritex;
  p0y = spritey;
  jumpp0 = jump;
  keyXp0 = keyX;
  keyYp0 = keyY;
  ongroundp0 = onground;
  }
  </code></pre>
  
  <p>Anyways what im trying to say is I would like to hear why its so slow. and if you get the same results as me.</p>
  
  <p>Maybe its because i put divs on top of the canvas?</p>