Javascript 为移相器游戏添加 requirejs 后未调用 Typescript window.onload

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31908069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:21:50  来源:igfitidea点击:

Typescript window.onload not being called after adding requirejs for phaser game

javascriptrequirejstypescriptphaser-frameworkjs-amd

提问by koreus737

I am trying to make a game with phaser and Typescript. I followed the instructions hereand it worked initialy. The problems came when I tried to modularise my code using AMD and requirejs

我正在尝试使用移相器和打字稿制作游戏。我按照这里的说明进行操作,它最初有效。当我尝试使用 AMD 和 requirejs 模块化我的代码时出现了问题

index.html

索引.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Resonate</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="http://requirejs.org/docs/release/2.1.20/minified/require.js" data-main="app"></script>
</head>
<body>
    <h1>RESONATE</h1>

    <div id="content"></div>
</body>
</html>

Player.ts

播放器.ts

export class Player {

    color: string;

    constructor() {
        this.color = "#0000ff";
    }
}

app.ts

应用程序

import player = require("Player");

class PhaserDemo {

    game: Phaser.Game;

    constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content', { preload: this.preload, create: this.create });
    }

    preload() {
        this.game.load.image('phaser_run', 'run.png');
    }

    create() {
        console.log("Before");
        var p = new player.Player();
        this.game.stage.backgroundColor = p.color;
    }
}

window.onload = () => {
    console.log("ONLOAD");
    var game = new PhaserDemo();
};

Now when I load it up window.onload is never called, I tried following window.onload not calling functionfor the Javascript solution but I can't get it to work in typescript.

现在,当我加载它时 window.onload 从未被调用,我尝试遵循 window.onload 不调用Javascript 解决方案的函数,但我无法让它在打字稿中工作。

Also here is the generated Javascript if you want to take a look https://gist.github.com/koreus7/06bee4a30d22bdc76d62

如果你想看看https://gist.github.com/koreus7/06bee4a30d22bdc76d62,这里也是生成的 Javascript

采纳答案by basarat

for the Javascript solution but I can't get it to work in typescript.

对于 Javascript 解决方案,但我无法让它在打字稿中工作。

Basically if the window is already loaded attaching to window.onloadwill not call the attached function.

基本上,如果窗口已经加载附加到window.onload将不会调用附加函数。

Check for document.readyState === "complete". Alternatively use something like jquery ready : https://api.jquery.com/ready/

检查document.readyState === "complete". 或者使用类似 jquery ready 的东西:https: //api.jquery.com/ready/

回答by Janus007

I believe it is caused by the require.js loader, it is without I explicitly know it a bit similar to jspm system.js , and so we don't need to ensure that the window is loaded because the loader already has ensured that.

我相信它是由 require.js 加载器引起的,我没有明确知道它与 jspm system.js 有点相似,因此我们不需要确保加载窗口,因为加载器已经确保了这一点。

I just removed the window.onload and it worked fine :)

我刚刚删除了 window.onload 并且它工作正常:)