gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 05:33:14 24 4
gpt4 key购买 nike

我是 Javascript 的新手,我正在尝试编写一个涉及移动 block 的简单游戏。这些 block 由继承 createjs.Container 类的 MBlocks 类表示,我添加了一个名为 select 的方法,它应该如果通过 true,则将 block 中圆圈的颜色变为红色;如果通过 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>

最佳答案

你在调用 init 吗?...

在您发布的代码中,您从未调用过 init,因此,在那种情况下,您还没有定义 mBlocks 数组。

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

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

使用 IIFE

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

最后的建议......停止思考“类”......在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
};

关于javascript - 在击键事件期间难以访问类方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25582350/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com