Question

我是Javascript的新手，我正在尝试编写一个涉及移动块的简单游戏。这些块由继承MBlocks类的类createjs.Container表示，我添加了一个名为select的方法，它应该将块中的圆的颜色变为红色如果它已通过true而灰色则通过false。这在init()函数中工作正常，但是当我尝试从击键事件中调用该函数时，控制台告诉我select方法不存在。不起作用的行位于reactKey函数中，如下所示：mBlocks[activeID].select(true);。我已经发布了以下代码。我不知道这是变量范围的问题，还是带有继承的类或其他完全不同的问题。欢迎任何建议。

<!DOCTYPE html>
<html>
<head>
<title>M-Blocks Game</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    var stage, mBlocks, bkgd;
    var sw, sh;
    var activeID;

    //MBlock class inherits from Container. MBlocks are squares that in addition to Container
    //properties have velocity and rotational velocity and can be either active or inactive
    //and selected or not selected
    var MBlock = function (x,y,color) {
        this.initialize(x,y,color);
    };
    MBlock.prototype = new createjs.Container();
    MBlock.prototype.Container_initialize = MBlock.prototype.initialize;
    MBlock.prototype.initialize = function(x,y,color) {
        this.Container_initialize();
        this.x = x;
        this.y = y;
        this.selected = false;
        this.color = color;
        this.lightCol = "#DDD";

        //Create and draw block
        this.block = new createjs.Shape();
        this.block.graphics.beginFill(this.color).drawRoundRect(x,y,30,30,7);
        this.addChild(this.block);

        //Create and draw light bulb
        this.light = new createjs.Shape();
        this.light.graphics.beginFill("#DDD").drawCircle(this.x+15,this.y+15,5);
        this.addChild(this.light);
    };
    MBlock.prototype.select = function(sel) {
        this.select = sel;
        this.light.graphics.clear();
        this.lightCol = "red";
        if (sel) this.lightCol = "red";
        else this.lightCol = "#DDD";
        this.light.graphics.beginFill(this.lightCol).drawCircle(this.x+15,this.y+15,5);
    };

    function init() {
        stage = new createjs.Stage("demoCanvas");

        sw = stage.canvas.width;
        sh = stage.canvas.height;

        activeID = 0;

        bkgd = new createjs.Shape();
        bkgd.graphics.beginFill("#DDF").drawRoundRect(0,0,sw,sh,7);
        stage.addChild(bkgd);

        mBlocks = [];
        mBlocks.push(new MBlock(0,0,"#0F0"));
        mBlocks.push(new MBlock(35,0,"#0F0"));
        activeID = 1;
        mBlocks[1].select(true);
        stage.addChild(mBlocks[0],mBlocks[1]);

        stage.update();
    }

    function reactKey(event) {
        if(event.keyCode==32) { //space key--switch between selection of active mBlocks
            mBlocks[activeID].select(false);
            activeID += 1;
            if (activeID >= mBlocks.length) activeID = 0;
            mBlocks[activeID].select(true);
            stage.update();
        }
    }

    function reactKeyUp(event) {
        //Code here
    }

    function onTick(){
        //Code here
    }

</script>

Answer 1

你在调用init吗？...

在您发布的代码中，您永远不会调用init，因此，在这种情况下，您还没有定义mBlocks数组。

也许你可以做这样的事情（如果你仍然想要使用init函数，否则你可以使用IIFE）

function init() {
    //init code
}
init();

使用IIFE

(function(){
    //init code
})();

最后的建议......停止思考＆＃34;类＆＃34; ...在javascript中没有这样的东西......最多你有构造函数创建具有相似结构的对象（创建模式） ......停止在静态课程中思考，开始思考动态定义。

修改在评论中讨论了这个问题一段时间之后，我们终于发现了 select 方法中的错误。

原始代码，有拼写错误：

MBlock.prototype.select = function(sel) { this.select = sel; //Here was the problem //more code };

更正后的代码：

MBlock.prototype.select = function(sel) { this.selected = sel; //more code };

在击键事件期间难以访问类方法

1 个答案: