一起運行多個jquery函數

我知道這個問題已經被問了很多次，我也看到了他們在SO和其他論壇上的解決方案。解決方案建議的大多數時間是使用Web Workers。一起運行多個jquery函數

我正在開發的遊戲需要我同時運行多個功能。其中一個是click功能，另一個是setInterval。
我的做法可以參見here in this JSFiddle。（繼續點擊灰色區域讓玩家跳躍）。

整個想法是在1000ms間隔後不斷產生藍色障礙物。

在我先前的方法中，只有當我點擊使球員跳躍時纔會產生障礙，否則他們不會如預期那樣。

我如何才能並行運行這樣兩種功能方面實現的產卵障礙的目的，同時也使玩家的跳躍。
其次，考慮到遊戲開發實施這個過程最好的方法是什麼，即達到一定的效率水平以便動畫不受影響。

下面是HTML和Javascript代碼，我一直在努力：

<div class="container"> 
    <div class="player"></div> 
    <div class="obstacle-container"> 
     <div class="obstacle"></div> 
    </div> 
</div> 

$.fn.animator = function() { 
    var hit_list, done = false; 

    $(".container").click(function() { 
     if (!done) { 
      $(".obstacle").stop().animate({ 
       left: "-=105%" 
      }, 10000, "linear"); 
      $(".player").stop().animate({ 
       bottom: "+=100px" 
      }, { 
       duration: 300, 
       complete: function() { 
        $(".player").animate({ 
         bottom: "0" 
        }, 800); 
       }, 
       step: function() { 
        //Test for collision 
        hit_list = $(".player").collision(".obstacle"); 
        if (hit_list.length !== 0) { 
         $(function() { 
          if (!done) { 
           $(".container").append("Game Over!"); 

           return false; 
          } 
         }); 
         done = true; 
        } 
       } 
      }); 
     } 
    }); 
}; 


$(function() { 

    $('.container').animator(); 

}); 

var interval = null; 
$(".obstacle-container").obstacle_generator(); 
$.fn.obstacle_generator = function() { 
    interval = setInterval(function() { 
     $(".obstacle-container").append('<div class="obstacle"></div>'); 
    }, 1000); 
};

來源

2014-02-25 md1hunox

要調查被稱爲遊戲循環通用概念。

初始化遊戲
循環：
- 檢查用戶輸入
- 更新任何演員
- 現場抽獎
  
  幾乎每場比賽都將使用此係統的一些變種建
- 等到是時候重複

以每秒60幀的速度運行的遊戲將每秒執行60次，或每16ms執行一次。

與您原來的問題相比，您不需要運行多個執行線程（一起運行多個函數）來實現此目的。

您在某種程度上已經在使用類似的循環。 jQuery維護自己的更新動畫循環。在作爲動畫步驟的一部分檢查碰撞的地方，您可以在假設的Player.update()方法中執行這種操作。您想將這些代碼從jQuery中移出，並轉移到您控制的循環中。

既然你在瀏覽器中運行，一般的遊戲循環變得有點簡單：

檢查用戶輸入 - 這仍然可以通過事件處理程序，jQuery的或不被處理。但是，並不是直接更改CSS位置等屬性，而應該根據遊戲對象的狀態進行操作。例如，通過更改Player對象的velocity。
更新任何角色 - 循環的重要部分。您應該檢查自上次循環以來經過了多少毫秒，因爲瀏覽器不能保證您的代碼每秒至少運行60次或至少60次。然後你應該遍歷所有的遊戲對象並全部更新它們。例如，在您的Player.update()方法中，您會希望根據其速度和時間移動它。
現場抽獎 - 如果你使用DOM元素，然後在瀏覽器處理繪製你的，當然。如果您使用的是<canvas>元素，那麼您可以將自己繪製爲循環的一部分。
等待，直到它的時間來重複 - 這將是最多的瀏覽器爲你做，因爲正常setInterval/setTimeout行爲的一部分。

在JavaScript一個簡單的遊戲循環可以是這樣的：

var gameObjects = []; 
// Initialise game, create player objects etc, add them to the array 

var gameLoop = function() { 
    // Loop through gameObjects, and call their respective update methods 
}; 

setInterval(gameLoop, 16); // Try to run the loop 60 times per second.

在一個複雜的遊戲，你就不會只是一個基本的數組來保存所有的遊戲對象，這只是一個基本的例。

來源

2014-02-25 16:14:07 Nevett

謝謝你指點我正確的方向。我發現http://gameprogrammingpatterns.com/game-loop.html，我認爲這是繼續前進的道路。 – md1hunox

一起運行多個jquery函數

回答

相關問題