Question

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

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

整个想法是在1000毫秒的间隔后不断产生那些蓝色障碍物。

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

如何实现这两个功能并排运行产生障碍同时让玩家跳跃的目的。
其次，实施这一过程的最佳方法是什么鉴于游戏开发，即达到一定的水平效率使动画不受影响。

<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

您要调查的通用概念称为游戏循环。

几乎所有游戏都将使用此系统的某些变体构建：

初始化游戏
循环：
- 检查用户输入
- 更新任何演员
- 绘制场景
- 等到重复时间

以每秒60帧的速度运行的游戏每秒执行此循环60次，或每16ms执行一次。

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

在某种程度上，你已经在使用类似的循环了。 jQuery维护自己的循环来更新动画。在动画步骤中检查碰撞的位置，这是您在假设Player.update()方法中要做的事情。您希望将此代码移出jQuery，并转移到您控制的循环中。

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

检查用户输入 - 这仍然可以由事件处理程序处理，jQuery与否。但是，它们不应直接更改CSS位置等属性，而应根据游戏对象的状态进行操作。例如，通过更改velocity对象的Player。
更新任何演员 - 循环的重要部分。您应该检查自上次循环以来经过了多少毫秒，因为浏览器不保证您的代码将完全运行，或者至少每秒运行60次。然后，您应该遍历所有游戏对象并更新它们。例如，在Player.update()方法中，您可能希望根据速度和时间移动它。
绘制场景 - 如果您正在使用DOM元素，那么浏览器会为您处理绘图。如果您使用的是<canvas>元素，那么您可以将自己绘制为循环的一部分。
等到需要重复 - 这将由浏览器为您做，这是正常setInterval / setTimeout行为的一部分。< / p>

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.

在一个复杂的游戏中，你不会只有一个基本数组来容纳所有游戏对象，这只是一个基本的例子。

一起运行多个jquery函数

1 个答案: