一起运行多个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函数

回答

相关问题