Question

我正在构建一个Web APP（游戏）。我试图在我的主要html文件中从“ js / game”中调用Game函数。并且以某种方式-它无法链接为控制台抛出一个错误。给出“找不到变量：游戏”

我玩过“游戏文件”作为类，将其导出，更改。检查了所有内容，但仍然找不到错误。

game.js：

``` let Game = function() {

    constructor(canvas, context) {
    // this.config = config; // customization
    this.canvas = canvas;
    this.context = context;
```

Head Html：

<script src="js/game.js"></script>

<script>$(document).ready(function () {
        $("#high-scores-page").hide();
        $("#about-page").hide();
        $("#canvas").hide();
        $("#game-over-box").hide();

        $("#start-game-button").click(function () {
            $("#menu-page").hide();
            $("#game-over-box").hide();
            $("#canvas").show();

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var game = new Game(canvas, context);
            game.newGame();
            game.run();
        });
</script>

期望它可以正常工作。而是拥有：

找不到变量：游戏

Answer 1

您不需要在Game对象中使用显式构造函数，因为Game已经是构造函数。只需删除构造函数并将所有需要的参数传递给Game构造函数本身即可：

let Game = function (canvas, context) {
    this.canvas = canvas;
    this.context = context;
}

Game.prototype.newGame = function () {
    //your code goes here
}

Answer 2

在变量声明的代码块之后添加 Game.js ：

window.Game = Game

解决此问题。通过这种方式，我们使Game变量成为全局变量。

！！注意：正如我读到的-这不是最好的解决方案，但至少可以使所有工作正常，因为现在可以访问该变量。

使用JavaScript在HTML中找不到变量

2 个答案: