MozillaZine


HTML5 Game Starts Slow Compared To I.E. & Chrome?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post a reply
JeZxLee
 
Posts: 4
Joined: February 12th, 2015, 12:28 am

Post Posted February 12th, 2015, 12:45 am

HTML5 Game Starts Slow Compared To I.E. & Chrome?

Hi,

My development team and I have finished an HTML5 word game which can be played at below URL link:
http://LettersFall.com
(source code is open-source and can be downloaded on the main title screen)

Our problem is with current Mozilla Firefox Internet browser.
On both Microsoft Internet Explorer and Google Chrome Internet browsers the game starts quickly (< 3 seconds).
But, on Mozilla Firefox the game starts slowly (about 20-30 seconds) ?

We have tried to fix this major issue with our game on Mozilla Firefox but can't.
We were hoping someone with HTML5 knowledge could look at our source code and suggest a fix?
The problem is on current Mozilla Firefox on both Windows and Linux.

Thanks in advance!

JeZxLee
16BitSoft Inc.
Video Game Design Studio
http://16BitSoft.com

Here is a screenshot of the game:
Image
Last edited by JeZxLee on February 12th, 2015, 9:00 am, edited 1 time in total.
LIMPET235
Moderator

User avatar
 
Posts: 39348
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted February 12th, 2015, 3:19 am

Moving to Web Dev...?
Ancient Amateur Astronomer
Win-7-HP/Intel® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-62.0-70.0/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.12.
W.M.Y.C.
(Always choose the "Custom" Install.)
JeZxLee
 
Posts: 4
Joined: February 12th, 2015, 12:28 am

Post Posted February 12th, 2015, 8:42 am

Here is some more information:

Image

Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8"/>
<title>''LettersFall[TM] 5'' (C) 2015, By 16BitSoft Inc.</title>

<!--                                  JeZxLee's
    _   _   _____   __  __     _          _   _               _               _____
   | | | | |_   _| |  \/  |   | |        | | | |             (_)             |  ___|
   | |_| |   | |   | .  . |   | |        | | | | ___ _ __ ___ _  ___  _ __   |___ \
   |  _  |   | |   | |\/| |   | |        | | | |/ _ \ '__/ __| |/ _ \| '_ \      \ \
   | | | | _ | | _ | |  | | _ | |___  _  \ \_/ /  __/ |  \__ \ | (_) | | | | /\__/ /
   |_| |_|(_)|_|(_)|_|  |_|(_)|_____|(_)  \___/ \___|_|  |___/_|\___/|_| |_| \____/
      _____ ______   _____                        _____            _
     / __  \|  _  \ |  __ \                      |  ___|          (_)
     `' / /'| | | | | |  \/ __ _ _ __ ___   ___  | |__ _ __   __ _ _ _ __   ___
       / /  | | | | | | __ / _` | '_ ` _ \ / _ \ |  __| '_ \ / _` | | '_ \ / _ \
     ./ /___| |/ /  | |_\ \ (_| | | | | | |  __/ | |__| | | | (_| | | | | |  __/
     \_____/|___/    \____/\__,_|_| |_| |_|\___| \____/_| |_|\__, |_|_| |_|\___|
                                                              __/ |
                                                             |___/

                                                             TM
                      Code Named: "Mustang GT 5.0 SuperCharged"
                     
                            (For Windows/Linux/Mac OS X)

 .......................................................................................

                  The NEW "LettersFall[TM]" Version 5.0 HTML5/JS

 .......................................................................................
                                 By Team 16BitSoft
                               
                               (Admin@16BitSoft.com)

                         (C)opyright 2015 By 16BitSoft Inc.
           
                                 www.16BitSoft.com
                                www.LettersFall.com
 ....................................................................................... -->

<link REL="StyleSheet" TYPE="text/css" HREF="index.css">

<div style="font-family: Font-01;"></div>

<script type="text/javascript" src="audio.js"></script>
<script type="text/javascript" src="data.js"></script>
<!-- <script type="text/javascript" src="dictionaryAM.js"></script>
<script type="text/javascript" src="dictionaryNZ.js"></script> -->
<script type="text/javascript" src="initialize.js"></script>
<script type="text/javascript" src="input.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="logic.js"></script>
<script type="text/javascript" src="screens.js"></script>
<script type="text/javascript" src="visuals.js"></script>

</head>

<body onload="Init()"> <!-- style="cursor: none;"> -->

<p>Hopefully loading now...If you still see this text after 30 seconds then there is a problem!</p>
<p>PLEASE NOTE: This Internet video game requires: JavaScript and HTML5 to function properly!</p>

</body>

</html>

<!--                     TM -->
<!-- "A 110% By JeZxLee!!!" -->


Code: Select all
//--------------------------------------------------------------------------------------------------------------
function Init()
{
    var test_canvas = document.createElement("canvas")
    var canvascheck=(test_canvas.getContext)? true : false;
    if (canvascheck == false)  alert("This browser does not support HTML5, get Mozilla Firefox or Google Chrome!");
//    else if (canvascheck == true)  alert("HTML5 supported");
   
    InitSettings();
    LoadOptions();
    LoadImages();

    ScreenCanvasFallingLetters.addEventListener("mousemove", function(event)
    {
        var rect = ScreenCanvasFallingLetters.getBoundingClientRect();
        MouseX = Math.floor(event.clientX - rect.left);
        MouseY = Math.floor(event.clientY - rect.top);

        if (BrowserWidth != 640)  MouseX = (  Math.floor( MouseX * (640/BrowserWidth) )  );

        if (BrowserHeight != 480)  MouseY = (  Math.floor( MouseY * (480/BrowserHeight) )  );
    });

    window.addEventListener('resize', BrowserResize, false);
    BrowserResize();

    ScreenCanvasFallingLetters.addEventListener("click", CheckForMouseButtonClick, false);
    document.addEventListener("keypress", CheckForKeyPress, true);
    document.addEventListener("keydown", CheckForKeyDown, true);
    document.addEventListener("keyup", CheckForKeyRelease, true);
   
    document.addEventListener("visibilitychange", HandleVisibilityChange, false);

    document.body.style.backgroundColor = "Black";
   
    draw();
}


Code: Select all
//--------------------------------------------------------------------------------------------------------------
function InitSettings()
{
    if (navigator.userAgent.toLowerCase().indexOf('android') > -1)
   {
      Browser = "Google Android";
//      SoundType = "mp3";
    }
    else if ( navigator.userAgent.toLowerCase().indexOf('iphone') > -1 || navigator.userAgent.toLowerCase().indexOf('ipad') > -1
    || navigator.userAgent.toLowerCase().indexOf('ipod') > -1 )
    {
        Browser = "Apple iOS";
//      SoundType = "mp3";
    }
    else if (navigator.userAgent.toLowerCase().indexOf('mobile') > -1)
    {
        Browser = "Mobile Unknown";
//      SoundType = "null";
    }
   else if (navigator.userAgent.toLowerCase().indexOf('viera') > -1 )
    {
        Browser = "Viera Smart T.V.";
//      SoundType = "null";
    }
    else if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1 )
    {
        Browser = "Chrome/Opera";
//      SoundType = "ogg";
    }
    else if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
    {
        Browser = "Firefox";
//      SoundType = "ogg";
    }
    else if ( navigator.userAgent.toLowerCase().indexOf('ie') > -1 || navigator.userAgent.toLowerCase().indexOf('trident') > -1 )
    {
        Browser = "MS IE";
//      SoundType = "mp3";
    }
    else if (navigator.userAgent.toLowerCase().indexOf('safari') > -1)
    {
        Browser = "Safari";
//      SoundType = "mp3";
    }
    else
    {
        Browser = "UNKNOWN Browser";
//      SoundType = "null";
    }

    SoundType = "null";
    var audioTest = document.createElement('audio');
    if ( audioTest.canPlayType('audio/mpeg;') )  SoundType = "mp3";
    else  if ( audioTest.canPlayType('audio/ogg;') )  SoundType = "ogg";
   
   var canvas = document.createElement('canvas');
   var canvasFallingLetters = document.createElement('canvas');
   if ( Browser == "Google Android" || Browser == "Apple iOS" || Browser == "Mobile Unknown" )
   {     
        canvas.id = "ScreenCanvas";
        canvas.width = 640;
        canvas.height = 480;
        canvas.style.zIndex  = 0;
        canvas.style.position = "absolute";
        canvas.style.border = "0px solid";
        canvas.style.top = "0%";
        canvas.style.left = "0%";

        canvasFallingLetters.id = "ScreenCanvasFallingLetters";
        canvasFallingLetters.width = 640;
        canvasFallingLetters.height = 480;
        canvasFallingLetters.style.zIndex  = 1;
        canvasFallingLetters.style.position = "absolute";
        canvasFallingLetters.style.border = "0px solid";
        canvasFallingLetters.style.top = "0%";
        canvasFallingLetters.style.left = "0%";
   }
   else
   {
        canvas.id = "ScreenCanvas";
        canvas.width = 640;
        canvas.height = 480;
        canvas.style.zIndex  = 0;
        canvas.style.position = "absolute";
        canvas.style.border = "0px solid";
        canvas.style.top = "50%";
        canvas.style.left = "50%";

   canvasFallingLetters.id = "ScreenCanvasFallingLetters";
        canvasFallingLetters.width = 640;
        canvasFallingLetters.height = 480;
        canvasFallingLetters.style.zIndex  = 1;
        canvasFallingLetters.style.position = "absolute";
        canvasFallingLetters.style.border = "0px solid";
        canvasFallingLetters.style.top = "50%";
        canvasFallingLetters.style.left = "50%";
    }
    document.body.appendChild(canvas);
    document.body.appendChild(canvasFallingLetters);

    ctxCanvas = document.getElementById("ScreenCanvas");
    ctx = ctxCanvas.getContext("2d");

    ctxCanvasFallingLetters = document.getElementById("ScreenCanvasFallingLetters");
    ctxFallingLetters = ctxCanvas.getContext("2d");

    screenWidth = 640;
    screenHeight = 480;
   
    if (window.location.protocol == 'http:' || window.location.protocol == 'https:')  WebsiteRunOnServer = true;
    else  WebsiteRunOnServer = false;
}


Any help would be appreciated...
Thanks!

JeZxLee
JeZxLee
 
Posts: 4
Joined: February 12th, 2015, 12:28 am

Post Posted February 14th, 2015, 4:57 pm

Hi,

I noticed a warning message in console:
Code: Select all
TelemetryStopwatch: key "FX_PAGE_LOAD_MS" was already initialized TelemetryStopwatch.jsm:52

Anyone know of a fix?
Thanks!

JeZxLee
patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted February 14th, 2015, 5:48 pm

Canvas and SVG are generally slow in Firefox... but I would bet on your background music being the biggest problem.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
JeZxLee
 
Posts: 4
Joined: February 12th, 2015, 12:28 am

Post Posted February 14th, 2015, 7:00 pm

patrickjdempsey wrote:Canvas and SVG are generally slow in Firefox... but I would bet on your background music being the biggest problem.
Hi,

We found this webpage about our problem:
http://dean.edwards.name/weblog/2005/09/busted
and implemented a fix and it works now on Firefox...

Thanks

JeZxLee

Return to Web Development / Standards Evangelism

Post a reply

Who is online

Users browsing this forum: No registered users and 1 guest