-1

我正在制作一个小游戏。主要竞争环境需要服务器端更新以防止作弊。每次更新比赛场地后，我希望页面 HTML 的一部分保持不变，以便在播放器从一个屏幕导航到另一个屏幕时播放持续存在的背景音乐。

问题在于，当玩家在游戏中移动时，实现这一点的每一次尝试都会导致页面更新时比赛场地的闪烁。

我尝试过使用 HTML（IFRAME、FRAME 和 FRAMESET 标签）和 Ajax（无框架）作为解决方案，将音乐播放排除在主游戏场的更新之外，但无济于事。

没有音乐，游戏不会在更新时闪烁，因为页面中不需要静态不变的 HTML 来播放一致的背景音乐。

使用 HTML FRAME 和 FRAMEST 标签实现的音乐会导致主游戏区域的页面更新时闪烁。

最后，使用仅更新比赛场地的 Ajax 函数实现的背景音乐也会导致屏幕在更新时闪烁，因为玩家在屏幕之间移动。

关于防止这种闪烁的工作架构（不使用弹出窗口）的任何建议，最好不使用框架？

IFRAME 测试就是这样。一个简单的 IFRAME。

<iframe src=game.php etc etc>

FRAMESET 代码也很简单：

<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>

AJAX 代码也很基础：

<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>

PHP 代码返回比赛场地的 HTML。

在添加静态不变的音乐 HTML 时，我希望屏幕能够像第一个演示一样顺利更新。在这三个测试之后，我似乎想不出一个可行的架构。

4

1 回答 1

0

解决了它（现在）。删除 "document.getElementById('AJAX').innerHTML = "Loading...";" 使闪烁类似于第一个演示。谢谢。

于 2019-08-23T22:01:46.473 回答