javascript - 一起运行多个 jquery 函数

Question

我知道这个问题已经被问过很多次了，而且我已经在 SO 以及其他论坛上看到了这些问题的解决方案。大多数时候建议的解决方案是使用 Web Workers .

我正在开发的游戏需要我同时运行多个功能。其中之一是 click 函数，另一个是 setInterval。
我这样做的方法可以看到here in this JSFiddle 。 (持续点击灰色区域使玩家跳跃)。

整个想法是在 1000 毫秒的间隔后连续生成那些蓝色障碍物。

在我之前的方法中，只有当我点击让玩家跳跃时，障碍物才会产生，否则它们不会像预期的那样。

<小时/>

1. 如何并行运行这两个函数以实现 目的是产生障碍物，同时让玩家跳跃。

2. 其次，执行此过程的最佳方法是什么 鉴于游戏开发，即达到一定水平 效率，使动画不受影响。

<小时/> 以下是我一直在处理的 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);
};

Answer 1

您想要研究的通用概念称为游戏循环。

几乎每个游戏都会使用该系统的某些变体来构建:

• 初始化游戏
• 循环:
  • 检查用户输入
  • 更新所有 Actor
  • 绘制场景
  • 等到需要重复的时候

以每秒 60 帧运行的游戏将每秒执行此循环 60 次，或大约每 16 毫秒执行一次。

与您原来的问题相比，您不需要运行多个执行线程(一起运行多个函数)来实现此目的。

在某种程度上，您已经在使用类似的循环。 jQuery 维护自己的循环来更新动画。当您在动画步骤中检查碰撞时，您会在假设的 Player.update() 中执行此操作。方法。您希望将此代码移出 jQuery，并移入您控制的循环中。

由于您在浏览器中运行，通用游戏循环变得更加简单:

• 检查用户输入 - 这仍然可以由事件处理程序(无论是否为 jQuery)来处理。不过，它们不应直接更改 CSS 位置等属性，而应根据游戏对象的状态进行操作。例如，通过更改 velocity的Player对象。

• 更新所有参与者 - 循环的重要部分。您应该检查自上次循环以来已经过去了多少毫秒，因为浏览器不能保证您的代码将准确运行或至少每秒运行 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.

在复杂的游戏中，您不会只有一个基本数组来保存所有游戏对象，这只是一个基本示例。