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:
HTML5 Game Starts Slow Compared To I.E. & Chrome?
-
- Posts: 4
- Joined: February 12th, 2015, 12:28 am
HTML5 Game Starts Slow Compared To I.E. & Chrome?
Last edited by JeZxLee on February 12th, 2015, 9:00 am, edited 1 time in total.
- LIMPET235
- Moderator
- Posts: 39961
- 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?
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.)
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.)
-
- Posts: 4
- Joined: February 12th, 2015, 12:28 am
Re: HTML5 Game Starts Slow Compared To I.E. & Chrome?
Here is some more information:
Any help would be appreciated...
Thanks!
JeZxLee
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
-
- Posts: 4
- Joined: February 12th, 2015, 12:28 am
Re: HTML5 Game Starts Slow Compared To I.E. & Chrome?
Hi,
I noticed a warning message in console:
Anyone know of a fix?
Thanks!
JeZxLee
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
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: HTML5 Game Starts Slow Compared To I.E. & Chrome?
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 4
- Joined: February 12th, 2015, 12:28 am
Re: HTML5 Game Starts Slow Compared To I.E. & Chrome?
Hi,patrickjdempsey wrote:Canvas and SVG are generally slow in Firefox... but I would bet on your background music being the biggest problem.
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