javascript - 神秘的 typescript 错误

Question

我正在尝试使用 Typescript 和 RaphaelJs 编写一个小游戏。到目前为止，代码非常短:

/// <reference path="raphael-2.1.d.ts"/>
window.onload = () => {
    var paper: RaphaelPaper = Raphael(10, 50, 500, 500);
    var time: Date =new Date();
    var now = time.getTime();
    var elapsedTime = time.getTime() - now;
    var gameObjects = new GameObject[];
    var robot =new Robot( paper.rect(10, 10, 100, 100));
    robot.elem.attr("fill", "green");
    gameObjects.push(robot);
    while (true) {

        elapsedTime = time.getTime() - now;
        gameObjects.forEach((object) => object.update(elapsedTime));
        //gameObjects.forEach((object) => object.draw(paper));
    }
}

interface GameObject{
    update(time:number);
}

class Robot implements GameObject{
    public x: number;
    public y: number;
    public elem: RaphaelElement;
    constructor(element: RaphaelElement) { 
        this.elem = element;
        this.x = this.elem.attr("x");
        this.y = this.elem.attr("y");
    }
    public update(time: number) {
        this.x += 1;
        this.y += 1;
        this.elem.attr("x", this.x);
        this.elem.attr("x", this.y);
    }
}

当页面完成加载新的 RaphaelPaper 并创建游戏对象列表时。每个 GameObject 需要实现一个方法:更新。这个想法是，在游戏过程中创建的每个 RaphaelElement 都存储在 GameObject 的具体实现中，并根据其规范进行更新。

假设敌人是蓝色的小矩形。为了将这些敌人添加到我的游戏中，我将添加一个实现 GameObject 的 Enemy 类，并具有一个特殊的更新方法，该方法可以将敌人移向玩家并检查交叉点。机器人对象只是一个非常简单的例子。

代码对我来说似乎很好，VisualStudio 没有标记任何错误，但是当我尝试运行游戏时，会弹出一条错误消息并通知我:

Error 1 The command "tsc --sourcemap "...strategy go\game.ts" "...strategy go\raphael-2.1.d.ts" "...strategy go\app.ts"" exited with code 1. ...strategy go\strategy go.csproj 85 5 strategy go

我确信这与我的 IDE 设置无关，因为另一个 typescript/raphaelJs 项目运行得很好。不幸的是，我无法从错误消息中获取任何有用的信息。

更新:注释掉 gameObjects.forEach((object) => object.update(elapsedTime)); 后，项目编译没有错误。 VisualStudio 提示“构建成功”并且 Chrome 打开。但页面从未完成加载。即使我输入此内容，我也没有看到 html 文件中的文本。

更新2:我用 window.setInterval 交换了 while 循环，现在错误消失并且页面加载了。但这不是经典的游戏循环。我想知道为什么一个简单的 while 循环会阻止我的页面加载。这看起来很矛盾，因为 while 循环是在 window.onload 中执行的。

Answer 1

我不确定您最初的 TypeScript 错误(您通常可以在 Visual Studio 中构建项目时通过查看“输出”窗口来查看错误本身)，但为什么您的页面会在此期间卡住 (true) { } 循环是因为您创建了一个无限阻塞循环。 JavaScript 在单线程进程中运行，因此您原来的循环正在执行的操作是阻止窗口中发生任何其他事情。

JavaScript也在基于队列的系统上执行代码，setInterval(fn,delay)所做的实际上是将函数添加到队列中，一旦达到延迟就执行(这也是我们实现异步编程的方式) JavaScript)。因此，setInterval(fn, 0) 实际上并不会立即执行代码(尽管看起来似乎是这样做的)，而是会将函数添加到队列顶部，执行队列中的其他代码，然后执行您的函数当它到达它时(因此，如果您正在评估执行时间，根据代码中发生的所有事情，您的代码可能不会像您指定的那样在 0ms 处执行)。

也正因为如此，如果您试图实现具有一致帧速率的游戏循环，则不应依赖 setInterval 函数的“延迟”参数，因为这甚至可能因浏览器而异。如果帧速率一致性在您的游戏中很重要，您应该跟踪自己的时间间隔和耗时。