I'm creating a little game. The main playing field needs server-side updates to prevent cheating. After every update of the playing-field I want a part of the page's HTML to remain unchanged, in order to play a background music that persists while the player navigates from screen to screen.
The problem is that every attempt of achieving this results in flickering of the playing field on page-updates when the player moves along the game.
I've tried HTML (IFRAME, FRAME & FRAMESET tags), and Ajax (no framework) as solutions to exclude the playing of music from the updates of the main playing field, to no avail.
Without music the game does not flicker on updates as there's no need for static unchanging HTML in the page to play consistent background music.
Music implemented, using HTML FRAME and FRAMEST tags, results in flickering on page updates of the main playing field.
Finally, background music implemented using a Ajax function that only updates the playing field also results in flickering of the screen on updates as the player moves along from screen to screen.
Any advice here on a working architecture (without the use of popups) that prevents this flickering, preferably without using a framework?
The IFRAME test was just that. A simple IFRAME.
<iframe src=game.php etc etc>
The FRAMESET code is also straightforward:
<frameset id="music" rows="100%,0%">
<frame id="pageContent" name="pageContent" frameborder=0 marginheight="0" src="index.php">
<frame id="pageMusic" name="pageMusic" frameborder=0 marginheight="0" src="./music/07. Koholint Island.mp3">
</frameset>
THE AJAX code is also very basic:
<html>
<head>
<script type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(URL) {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
// Something went wrong (User Probably Doesn't have JS or JS is turned off)
alert("You Browser Doesn't support AJAX.");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
{
//This if satement will check if the status of the script
//If the readyState is not equal to 4 (The request is complete)
//It will display text that says loading...
if(ajaxRequest.readyState < 4)
{
//AJAX in the prenthacies, is what id element in the body will be changed.
document.getElementById('AJAX').innerHTML = "Loading...";
}
//Once the readyState is equal to four,
//this means that the request was sent,
//and successfully processed.
if(ajaxRequest.readyState == 4)
{
//This is where the output of the file we called and it will be placed
//in the div where we named the ID = AJAX
document.getElementById('AJAX').innerHTML = ajaxRequest.responseText;
}
}
//This section processes the data
ajaxRequest.open("GET", URL, true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
music here
<audio autoplay loop preload>
<source src="./music/07. Koholint Island.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
<div id="AJAX">
<a href=# onCLick="ajaxFunction('test2.php?a=1')">
start game
</a>
</div>
</body>
</html>
The PHP code returns the HTML of the playing field.
I expected the screen to update smoothly as in the first demo when adding the static unchanging music HTML. After these three tests I can't seem to think of a working architecture.
solved it (for now). removing "document.getElementById('AJAX').innerHTML = "Loading...";" made the flickering similar to the first demo. thanks.