0

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のロードを終了し、GameObjectsのリストが作成されると。各GameObjectは、updateという1つのメソッドを実装する必要があります。ゲームプレイ中に作成されるすべてのRaphaelElementは、GameObjectの具体的な実装に格納され、その仕様に従って更新されるという考え方です。

敵が小さな青い長方形だとしましょう。これらの敵をゲームに追加するには、GameObjectを実装し、敵をプレーヤーに向かって移動させて交差点をチェックする特別な更新メソッドを持つクラスEnemyを追加します。ロボットオブジェクトは非常に単純な例です。

コードは私には問題ないように見え、VisualStudioは何も問題がないとマークしますが、ゲームを実行しようとすると、エラーメッセージが表示され、次のように通知されます。

エラー1コマンド"tsc--sourcemap" ...strategy go \ game.ts "" ...strategy go \ raphael-2.1.d.ts "" ...strategy go \app.ts""がコードで終了しました1. ...strategy go \strategy go.csproj855戦略go

別のtypescript/raphaelJsプロジェクトがうまく機能するので、これは私のIDEセットアップとは何の関係もないと確信しています。残念ながら、エラーメッセージから有用な情報を得ることができません。

更新：コメントアウトした後gameObjects.forEach((object) => object.update(elapsedTime));、プロジェクトはエラーなしでコンパイルされます。VisualStudioは「ビルドに成功しました」と表示し、Chromeが開きます。しかし、ページの読み込みが完了することはありませんでした。これを入力しても、htmlファイルのテキストが表示されません。

更新2： whileループをwindow.setIntervalと交換しましたが、エラーがなくなり、ページが読み込まれます。しかし、それは古典的なゲームループではありません。単純なwhileループがページの読み込みを妨げる理由を知りたいのですが。whileループはwindow.onloadで実行されるため、これは逆説のように思われます。

4

1 に答える 1

3

元の TypeScript エラー (通常、Visual Studio でプロジェクトをビルドするときに [出力] ウィンドウを表示することでエラー自体を確認できます) についてはわかりませんが、 while (true) { } ループ中にページがフリーズする理由については無限のブロッキング ループを作成したためです。JavaScript はシングル スレッド プロセスで実行されるため、元のループが実行していたことは、ウィンドウ内で他の処理が行われないようにすることでした。

JavaScript はまた、キューベースの種類のシステムでコードを実行します。 setInterval(fn, delay) が行うことは、実際には関数をキューに追加して、遅延に達すると実行されることです (これは、JavaScript で非同期プログラミングを実現する方法でもあります)。したがって、 setInterval(fn, 0) は実際にはコードをすぐに実行しませんが (実行しているように見えるかもしれませんが)、関数をキューの先頭に追加し、キュー内の他のコードを実行してから、関数を実行します。到達したとき (したがって、実行時間を評価している場合、コードで発生しているすべてのことによっては、指定したようにコードが 0ms で実行されない場合があります)。

また、このため、一貫したフレーム レートでゲーム ループを達成しようとしている場合は、setInterval 関数の 'delay' 引数に依存しないでください。これはブラウザによって異なる場合もあります。ゲームでフレーム レートの一貫性が重要な場合は、独自の時間間隔と経過時間を追跡する必要があります。

于 2012-12-28T17:37:49.397 に答える