Question

我正在研究最终项目（交互式Javascript游戏等），并决定通过学习画布和HTML5给自己一个挑战。我也在尝试学习Javascript对象（并组织许多人似乎投入到一个大的脚本标签中）等等，所以请原谅我的一些可能的愚蠢。：）

所以目前我的核心工作正在进行，但我正在尝试制作一个开始画面（我将模糊启动选项背后的暂停随机游戏）。游戏涉及躲避障碍。当我使用全局变量上下文绘制障碍时，一切正常。当我尝试传入一个变量时它会死掉。这是有效的：

var mainCanvas = document.getElementById("objectsToAvoidCanvas");
var mainContext = mainCanvas.getContext('2d');

function Obstacle(){
    var height;
    var width;
    var xPosition;
    var yPosition;
    var isOffScreen;
    var isSafeToAddMore;
    var speed;
    var anonymousCreation = function(){
        this.width = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
        this.height = Math.floor((Math.random() * window.innerHeight * 0.7) + 1);       

        this.xPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
        this.yPosition = this.height * -1;

        this.isOffScreen = false;
        this.isSafeToAddMore = false;

        this.speed = 1;

        mainContext.fillStyle = '#009933';
        mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height);

    };  

    anonymousCreation();

};

Obstacle.prototype.drawInRandomPlace = function(){
    yPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);

    mainContext.fillStyle = '#009933';
    mainContext.fillRect(xPosition, yPosition, width, height);        
};

然而，沿着这些方面发生了一些事情：

    function Obstacle(context){
        var height;
        var width;
        var xPosition;
        var yPosition;
        var isOffScreen;
        var isSafeToAddMore;
        var speed;
        var mainCanvas
        var mainContext

var anonymousCreation = function(){
            this.mainContext = context

            this.width = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
            this.height = Math.floor((Math.random() * window.innerHeight * 0.7) + 1);       

            this.xPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
            this.yPosition = this.height * -1;

            this.isOffScreen = false;
            this.isSafeToAddMore = false;

            this.speed = 1;

            mainContext.fillStyle = '#009933';
            mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height);

        };  

        anonymousCreation();

    };


    Obstacle.prototype.drawInRandomPlace = function(){
        yPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);

        mainContext.fillStyle = '#009933';
        mainContext.fillRect(xPosition, yPosition, width, height);
    };

我已尝试使用this.mainContext = context或实际抓取传递的字符串document.getElementById(aString)。在构造函数中只是一堆不同的变体等。已经工作了一个多小时，无法理解，所以我想我会问你们。可能已经盯着它看了太久。

谢谢！

Answer 1

当您切换到this.mainContext时，您没有替换mainContext的所有其他实例：

 var anonymousCreation = function(){
                this.mainContext = context;

                this.width = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
                this.height = Math.floor((Math.random() * window.innerHeight * 0.7) + 1);       

                this.xPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
                this.yPosition = this.height * -1;

                this.isOffScreen = false;
                this.isSafeToAddMore = false;

                this.speed = 1;

                /* old
                mainContext.fillStyle = '#009933';
                mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height);
                */

                this.mainContext.fillStyle = '#009933'; //added this.
                this.mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height); //added this.

            };  

            anonymousCreation();

        };

Answer 2

this.mainContext = context是有罪的。您的anonymousCreation函数没有上下文参数。 ~~虽然子函数可以访问用var声明的变量，但是它们不能从父函数访问参数。~~我撒了谎。我测试this它似乎有效。虽然我没有真正看到子功能的重点，但Javascript是一种非常松散的语言，你可以用异国时尚做事。

当你使用＆＃34; var＆＃34;要声明对象内的内容，您声明无法从外部访问的私有成员。除非你计划制作吸气剂和制定者，否则我不建议系统地这样做。我更喜欢这样做：

function MyObject(arg1, arg2) {
    this.property1 = arg1;
    this.property2 = arg2;
}

MyObject.prototype.myFunction = function(arg) {
    console.log(this.property1 + this.property2);
};

sampleInstance = new MyObject(1, 2);

使用canvas上下文可以作为全局使用，但是当我传递它时

2 个答案: