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

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

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

Post by JeZxLee »

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.
Top
User avatar
LIMPET235
Moderator
Posts: 39959
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

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

Post by LIMPET235 »

Moving to Web Dev...?
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.

(Always choose the "Custom" Install.)
Top
JeZxLee
Posts: 4
Joined: February 12th, 2015, 12:28 am

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

Post by JeZxLee »

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
Top
JeZxLee
Posts: 4
Joined: February 12th, 2015, 12:28 am

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

Post by JeZxLee »

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
Top
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:
Contact patrickjdempsey

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

Post by patrickjdempsey »

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/
Top
JeZxLee
Posts: 4
Joined: February 12th, 2015, 12:28 am

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

Post by JeZxLee »

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
Top
Post Reply

Return to “Web Development / Standards Evangelism”