Question

我正在构建一个包含两个模块的Snake游戏。第一个（让我们称之为“Main”）处理游戏的机制，第二个（“MainUI”）根据从机制模块接收的板状态构建UI和显示。

Main为自身和MainUI处理setInterval，并设置滴答率：

  var startGame = Main.startGame = function (displayCallback) {
    board.initialize();
    var container = function () {
      gameTick(displayCallback);
    }; // displayCallback is a function passed from the UI to visually render the board
    root.gameLoop = Main.gameLoop = window.setInterval(container, 200);
  };

所以游戏及其显示器的目的是每秒更新五次。它会在每次更新时执行此代码：

  var gameTick = Main.gameTick = function (displayCallback) { // same callback
    if (isGameOver()) {
      gameOver();
    }
    player.update(); //update an array of the coordinates the player occupies
    board.update(); //recreate board state based on position of player
    board.display(displayCallback); //Board.display runs the externally-passed callback
  };

但游戏似乎跑得比它应该慢得多。实际上，调整setInterval时间的数量似乎不会超过某一点，比如半秒。我不确定问题是否在低效的机制代码中，如果传递显示回调函数导致问题，或者如果我使用setInterval不正确，或者如果UI代码以某种方式减慢了它。

UI启动了这样的机制模块：

  var beginUpdates = MainUI.beginUpdates = function () {
    Main.startGame(updateBoard);
  };

它更新了显示的电路板，一个HTML表格，具有特定类的元素的独特CSS格式，使用jQuery，如下所示：

  var updateBoard = MainUI.updateBoard = function (board) {
    for (var y = 0; y < board.length; y++) {
      for(var x = 0; x < board[0].length; x++) {
        var currentElement = $("td[data-y=" + y + "][data-x=" + x + "]")
        switch(board[y][x]) {
          case 0:
            currentElement.removeClass("snake");
            currentElement.removeClass("apple");
            break;
          case 1:
            currentElement.addClass("snake");
            currentElement.removeClass("apple");
            break;
          case 2:
            currentElement.removeClass("snake");
            currentElement.addClass("apple");
            break;
        }
      }
    }
  };

此函数来自UI模块，是传递给力学模块的回调，在该模块中，它被赋予“board”对象。

你们能告诉我这里可能出现的问题吗？我很乐意发布更多代码。我为长篇文章和我的无知道歉：\

Answer 1

您应首先尝试分析代码和HTML更新。在Chrome中，可以使用开发人员工具完成此操作。

JS分析

在“配置文件”选项卡中，选择“收集JavaScript CPU配置文件”，然后单击“启动”。开始游戏并播放10秒左右。再次转到“配置文件”选项卡，然后单击“停止”您现在可以看到您的代码是否花费的时间超过应有的时间，但我怀疑这不是问题。

加快这种速度的一种方法可能是将jQuery元素本身缓存在一个数组中，而不是每次选择它们都会很慢。我还会给TD一个ID而不是使用数据元素，如：

<table id="game">
  <tr>
    <td id="cell-0-0"></td>
    <td id="cell-1-0"></td>
  </tr>
  <tr>
    <td id="cell-0-1"></td>
    <td id="cell-1-1"></td>
  </tr>
</table>

并使用仅选择ID的选择器，因为这些非常快。

$('#cell-' + x + '-' + y);

HTML分析

这更可能是问题所在。根据您使用CSS执行的操作，可能会导致页面上出现reflows。要测试这一点，以及您的常规HTML绘制速度，请打开开发人员工具，然后单击“设置”（齿轮）图标。您可以在此处启用：

显示绘制矩形：有关正在重新绘制的内容的可视信息
强制加速合成：这允许FPS计量表
显示FPS计量器：显示页面重绘的速度以及

JavaScript noob - 正确使用window.setInterval（）时遇到问题

1 个答案: