我正在用JavaScript编写一个简单的游戏。 我当时使用的是单个JS文件,结果变成一团糟。 因此,我将其重构为几个类。 但是我遇到了一些变量变为“ null”的问题。

在重绘函数中,“ this.ctx”变量为空。 我不明白为什么它为null ...在launchGame方法中正确初始化。

var Game = {
    username : "",
    password : "",
    state : "login",

    interactables : [],
    interactablesOffset : 0,
    c : document.getElementById('gameCanvas'),
    ctx : null,

    usernameInput : "", passwordInput : "", loginBtn : "", loginBtnText : "Login",

    //Initialises handlers and launches the game cycle
    launchGame : function () {
        //Initialize
        this.c.addEventListener("click", this.handleClick, false);
        this.ctx = this.c.getContext('2d');

        setInterval(gameInstance.redraw, 300);
    },

    //Redraws the game every 300 ms
    redraw: function () {
        this.interactablesOffset = 0;
        var user = this.usernameInput != null ? this.usernameInput.value() : "";
        var pw = this.passwordInput != null ? this.passwordInput.value() : "";
        **this.ctx.clearRect(0, 0, 800, 800);//this.ctx is null**
        switch (state) {
            case "login":
                displayLoginMenu(user, pw);
                break;
        }
    },

    //Displays the login menu
    displayLoginMenu : function (_username, _password) {
        ctx.font = "bold 14px sans-serif";
        ctx.fillText("Username:", 5, 70);
        usernameInput = new CanvasInput({ canvas: document.getElementById('gameCanvas'), x: 100, y: 50, value: _username });

        ctx.font = "bold 14px sans-serif";
        ctx.fillText("Password:", 5, 120);
        passwordInput = new CanvasInput({ canvas: document.getElementById('gameCanvas'), x: 100, y: 100, value: _password });

        loginBtn = Object.create(BaseButton);
        loginBtn.x = 100;
        loginBtn.y = 150;
        loginBtn.width = 162;
        loginBtn.height = 25;
        this.addIteractable(obj);

        this.paintInteractables();
    },

    //Paints the interactables to the screen
    paintInteractables : function () {
        for(var i = 0; i < interactables.length; i++)    {
            var obj = interactables[i];
            if(obj !=null)
                obj.paint();
        }
    },
    //Adds an interactable component to the screen
    addIteractable : function addIteractable(obj) {
        interactables[interactablesOffset] = obj;
        interactablesOffset++;
    },

    //Handles clicks on game
    handleClick : function (e) {
        console.log('click: ' + e.offsetX + '/' + e.offsetY);
        for (var i = 0; i < interactables.length; i++) {
            var element = interactables[i];
            if (e.offsetX >= element.x && e.offsetX <= element.x + element.w
                && e.offsetY >= element.y && e.offsetY <= element.y + element.h) {
                console.log("clickBtn");
                interactables[i].pressed();
            }
        }
    }

}

var gameInstance = Object.create(Game);
gameInstance.launchGame();

===============>>#1 票数:2 已采纳

您在此代码中失去上下文:

setInterval(gameInstance.redraw, 300);

因此gameInstance.redraw将在全局对象上下文( window )中被调用。 这意味着, this里面它会指向而不是一个游戏实例,但到窗口对象。

要修复它,您可以:

launchGame : function () {
    //Initialize
    this.c.addEventListener("click", this.handleClick, false);
    this.ctx = this.c.getContext('2d');

    var self = this;
    setInterval(function() {
        self.redraw();
    }, 300);
},

要么

setInterval(this.redraw.bind(this), 300);

  ask by Reinard translate from so

未解决问题?本站智能推荐:

2回复

JavaScript超出范围

基于chrome开发人员工具,我认为我正在处理一个断点,可以解决。 是我定义函数的方式吗? 下面的脚本是一个include js文件和数组'timeStamp,我希望可用于其他函数中,而不必每次都调用loadData函数。 一旦离开for循环,甚至在离开函数之前,timeStamp数组
3回复

Javascript变量未更新-可能超出范围[重复]

可能重复: AJAX响应数据未保存到全局范围? 我基本上有一个循环,使用AJAX与我的站点上的脚本联系,然后使用该脚本的响应更新字符串。 这是代码: 记录字符串时,Firebug控制台仅显示http://localhost/view/ 。 就像我的上传脚本中的img_
2回复

Javascript中的变量函数超出范围

在所附的代码中,我尝试在函数外部访问变量i,为什么它不起作用? sum(1, 3); console.log("i =", i); //i is undefined
1回复

Firebase-变量超出范围

如果这是一个业余问题,请原谅我,我是第一次接触API。 我一直在与Firebase合作,以存储在整个脚本中使用的“得分”列表数组。 在Firebase函数之一中,该值已更新,但该值未在全局范围内更新。 我不确定目前缺少什么。 这是一个代码段,值0和1记录在控制台上。
1回复

变量如何超出范围?

我有以下jquery代码: 在编译时我得到错误: 'var1','var2','var3' & 'var4' are used out of scope 。 但是,我认为没有问题,因为它们已被声明在使用它们的同一功能中。 请帮忙! 更新:这是否与当前函数之外的som
3回复

变量超出范围了吗?

我的代码: 现在这很好用..除了当我有多个弹出窗口时。 我将范围缩小到的是每当我创建一个新的弹出窗口时,它都会更改yes_button,no_button,ok_button和popup的值。 因此,当上一个弹出窗口尝试使用这些变量时,它们都指向新的弹出窗口而不是当前弹出窗口。
1回复

HTA Javascript-为什么对象在onbeforeunload中超出范围?

这有点奇怪。 我一直在尝试从父对象中调用子对象中的函数,但是它似乎超出了onbeforeunload函数的范围。 这些函数调用在onbeforeunload之外工作,因此仅在onbeforeunload中调用时才会失败。 我可以通过使子对象成为全局对象来解决此问题,但我试图避免这种情况。
3回复

Javascript成员函数超出范围

我有一个创建锚对象的类。 当用户单击锚点时,我希望它从父类运行一个函数。 我该怎么做?
1回复

将jquery变量定义为超出范围的函数

我正在尝试将参数(gmap_settings)传递给包含的外部js文件中的函数(初始化)。 我的php文件看起来像这样: 为了简单起见,可以说外部js文件如下所示: 无论我尝试什么,我都无法弄清楚如何将gmap_settings传递给initialize() 。 我已经在外部
1回复

ReactJS访问变量在渲染函数中超出范围

我有一个配置文件,我想在其中一个组件中导入和渲染/循环播放。 配置文件: data.config.js component.js文件 预期的控制台输出: 我得到的结果: Uncaught SyntaxError: Unexpected identifier as