我试图使用createJS为游戏设计菜单页面，但我无法让按钮交互正常工作。我遇到了几个障碍，我希望能在这里解决其中一个或两个。
我遇到的第一个障碍是onclick：
<html>
<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
//declare button containers
var p1_button;
var p2_button;
var p3_button;
var p4_button;
var start_button;
var options_button;
//initialize variables
var incirclesr = 40;
var outcirclesr = 50;
var circlesy = 150;
var inrectw = 280;
var inrecth = 30;
var inrectangle1y = 235;
var inrectangle2y = 310;
var outrectangle1y = 225;
var outrectangle2y = 300;
var outrectanglesx = 150;
var inrectanglesx = 160;
var outrectw = 300;
var outrecth = 50;
var circle_offset = 2 * (outcirclesr + 10)
//declare shapes
var stage;
var outcircles;
var outrectangles;
var outcircle1;
var outcircle2;
var outcircle3;
var outcircle4;
var incircle1;
var incircle2;
var incircle3;
var incircle4;
var outrectangle1;
var outrectangle2;
var inrectangle1;
var inrectangle2;
var p_num;
var p1;
var p2;
var p3;
var p4;
var start;
var options;
function init() {
// Change canvas color to off-white
canvas.style.backgroundColor = "#f5f5f5";
//initialize stage
stage = new createjs.Stage("canvas");
//initialize containers
p1_button = new createjs.Container();
p2_button = new createjs.Container();
p3_button = new createjs.Container();
p4_button = new createjs.Container();
start_button = new createjs.Container();
options_button = new createjs.Container();
//initialize shapes
outcircles = new createjs.Graphics().beginFill("#616161").drawCircle(0, circlesy, outcirclesr);
outrectangles = new createjs.Graphics().beginFill("#616161").drawRect(outrectanglesx,0,outrectw,outrecth);
outcircle1 = new createjs.Shape(outcircles);
outcircle2 = new createjs.Shape(outcircles);
outcircle3 = new createjs.Shape(outcircles);
outcircle4 = new createjs.Shape(outcircles);
incircle1 = new createjs.Shape();
incircle2 = new createjs.Shape();
incircle3 = new createjs.Shape();
incircle4 = new createjs.Shape();
outrectangle1 = new createjs.Shape(outrectangles);
outrectangle2 = new createjs.Shape(outrectangles);
inrectangle1 = new createjs.Shape();
inrectangle2 = new createjs.Shape();
//initialize text
p_num = new createjs.Text("Pick # of Players", "36px Arial", "#616161");
p_num.maxWidth = 1000;
p_num.textAlign = "center";
p_num.textBaseline = "middle";
p1 = new createjs.Text("1", "36px Arial", "#fafafa");
p1.maxWidth = 1000;
p1.textAlign = "center";
p1.textBaseline = "middle";
p2 = new createjs.Text("2", "36px Arial", "#fafafa");
p2.maxWidth = 1000;
p2.textAlign = "center";
p2.textBaseline = "middle";
p3 = new createjs.Text("3", "36px Arial", "#fafafa");
p3.maxWidth = 1000;
p3.textAlign = "center";
p3.textBaseline = "middle";
p4 = new createjs.Text("4", "36px Arial", "#fafafa");
p4.maxWidth = 1000;
p4.textAlign = "center";
p4.textBaseline = "middle";
start = new createjs.Text("Start", "36px Arial", "#fafafa");
start.maxWidth = 1000;
start.textAlign = "center";
start.textBaseline = "middle";
options = new createjs.Text("Options", "36px Arial", "#fafafa");
options.maxWidth = 1000;
options.textAlign = "center";
options.textBaseline = "middle";
//draw remaining shapes
incircle1.graphics.beginFill("#f50057").drawCircle(120, circlesy, incirclesr);
incircle2.graphics.beginFill("#00b0ff").drawCircle(240, circlesy, incirclesr);
incircle3.graphics.beginFill("#00e676").drawCircle(360, circlesy, incirclesr);
incircle4.graphics.beginFill("#ff9100").drawCircle(480, circlesy, incirclesr);
inrectangle1.graphics.beginFill("#f44336").drawRect(inrectanglesx, inrectangle1y, inrectw, inrecth);
inrectangle2.graphics.beginFill("#d500f9").drawRect(inrectanglesx, inrectangle2y, inrectw, inrecth);
//set remaining shape coords
outcircle1.x = 120;
outcircle2.x = 240;
outcircle3.x = 360;
outcircle4.x = 480;
outrectangle1.y = outrectangle1y;
outrectangle2.y = outrectangle2y;
//set text coords
p_num.x = canvas.width / 2;
p_num.y = circlesy - 100;
p1.x = canvas.width/2 - (circle_offset + circle_offset / 2);
p1.y = circlesy;
p2.x = canvas.width/2 - (circle_offset / 2);
p2.y = circlesy;
p3.x = canvas.width/2 + (circle_offset / 2);;
p3.y = circlesy;
p4.x = canvas.width/2 + (circle_offset + circle_offset / 2);;
p4.y = circlesy;
start.x = canvas.width / 2;
start.y = inrectangle1y + outrecth / 4;
options.x = canvas.width / 2;
options.y = inrectangle2y + outrecth / 4;
//add objects to containers/stage
p1_button.addChildAt(outcircle1, incircle1, p1, 0);
p2_button.addChildAt(outcircle2, incircle2, p2, 0);
p3_button.addChildAt(outcircle3, incircle3, p3, 0);
p4_button.addChildAt(outcircle4, incircle4, p4, 0);
start_button.addChildAt(outrectangle1, inrectangle1, start, 0);
options_button.addChildAt(outrectangle2, inrectangle2, options, 0);
stage.addChildAt(p_num, p1_button, p2_button, p3_button, p4_button, start_button, options_button, 0);
stage.update();
canvas.onclick = start_game;
}
function start_game() {
stage.removeAllChildren();
stage.update();
//start game here
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>
这样就设定了舞台......
如果我设置canvas.onclick来调用start_game，就像这样......
canvas.onclick = start_game;
然后它可以工作，但如果我想让开始按钮做同样的事情，就像这样......
start_button.onclick = start_game;
它没有用。
我的第二个障碍是听众/代号：
<html>
<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
//declare button containers
var p1_button;
var p2_button;
var p3_button;
var p4_button;
var start_button;
var options_button;
//initialize variables
var incirclesr = 40;
var outcirclesr = 50;
var circlesy = 150;
var inrectw = 280;
var inrecth = 30;
var inrectangle1y = 235;
var inrectangle2y = 310;
var outrectangle1y = 225;
var outrectangle2y = 300;
var outrectanglesx = 150;
var inrectanglesx = 160;
var outrectw = 300;
var outrecth = 50;
var circle_offset = 2 * (outcirclesr + 10)
//declare shapes
var stage;
var outcircles;
var outrectangles;
var outcircle1;
var outcircle2;
var outcircle3;
var outcircle4;
var incircle1;
var incircle2;
var incircle3;
var incircle4;
var outrectangle1;
var outrectangle2;
var inrectangle1;
var inrectangle2;
var p_num;
var p1;
var p2;
var p3;
var p4;
var start;
var options;
function init() {
// Change canvas color to off-white
canvas.style.backgroundColor = "#f5f5f5";
//initialize stage
stage = new createjs.Stage("canvas");
//initialize containers
p1_button = new createjs.Container();
p2_button = new createjs.Container();
p3_button = new createjs.Container();
p4_button = new createjs.Container();
start_button = new createjs.Container();
options_button = new createjs.Container();
//initialize shapes
outcircles = new createjs.Graphics().beginFill("#616161").drawCircle(0, circlesy, outcirclesr);
outrectangles = new createjs.Graphics().beginFill("#616161").drawRect(outrectanglesx,0,outrectw,outrecth);
outcircle1 = new createjs.Shape(outcircles);
outcircle2 = new createjs.Shape(outcircles);
outcircle3 = new createjs.Shape(outcircles);
outcircle4 = new createjs.Shape(outcircles);
incircle1 = new createjs.Shape();
incircle2 = new createjs.Shape();
incircle3 = new createjs.Shape();
incircle4 = new createjs.Shape();
outrectangle1 = new createjs.Shape(outrectangles);
outrectangle2 = new createjs.Shape(outrectangles);
inrectangle1 = new createjs.Shape();
inrectangle2 = new createjs.Shape();
//initialize text
p_num = new createjs.Text("Pick # of Players", "36px Arial", "#616161");
p_num.maxWidth = 1000;
p_num.textAlign = "center";
p_num.textBaseline = "middle";
p1 = new createjs.Text("1", "36px Arial", "#fafafa");
p1.maxWidth = 1000;
p1.textAlign = "center";
p1.textBaseline = "middle";
p2 = new createjs.Text("2", "36px Arial", "#fafafa");
p2.maxWidth = 1000;
p2.textAlign = "center";
p2.textBaseline = "middle";
p3 = new createjs.Text("3", "36px Arial", "#fafafa");
p3.maxWidth = 1000;
p3.textAlign = "center";
p3.textBaseline = "middle";
p4 = new createjs.Text("4", "36px Arial", "#fafafa");
p4.maxWidth = 1000;
p4.textAlign = "center";
p4.textBaseline = "middle";
start = new createjs.Text("Start", "36px Arial", "#fafafa");
start.maxWidth = 1000;
start.textAlign = "center";
start.textBaseline = "middle";
options = new createjs.Text("Options", "36px Arial", "#fafafa");
options.maxWidth = 1000;
options.textAlign = "center";
options.textBaseline = "middle";
//draw remaining shapes
incircle1.graphics.beginFill("#f50057").drawCircle(120, circlesy, incirclesr);
incircle2.graphics.beginFill("#00b0ff").drawCircle(240, circlesy, incirclesr);
incircle3.graphics.beginFill("#00e676").drawCircle(360, circlesy, incirclesr);
incircle4.graphics.beginFill("#ff9100").drawCircle(480, circlesy, incirclesr);
inrectangle1.graphics.beginFill("#f44336").drawRect(inrectanglesx, inrectangle1y, inrectw, inrecth);
inrectangle2.graphics.beginFill("#d500f9").drawRect(inrectanglesx, inrectangle2y, inrectw, inrecth);
//set remaining shape coords
outcircle1.x = 120;
outcircle2.x = 240;
outcircle3.x = 360;
outcircle4.x = 480;
outrectangle1.y = outrectangle1y;
outrectangle2.y = outrectangle2y;
//set text coords
p_num.x = canvas.width / 2;
p_num.y = circlesy - 100;
p1.x = canvas.width/2 - (circle_offset + circle_offset / 2);
p1.y = circlesy;
p2.x = canvas.width/2 - (circle_offset / 2);
p2.y = circlesy;
p3.x = canvas.width/2 + (circle_offset / 2);;
p3.y = circlesy;
p4.x = canvas.width/2 + (circle_offset + circle_offset / 2);;
p4.y = circlesy;
start.x = canvas.width / 2;
start.y = inrectangle1y + outrecth / 4;
options.x = canvas.width / 2;
options.y = inrectangle2y + outrecth / 4;
//add objects to containers/stage
p1_button.addChildAt(outcircle1, incircle1, p1, 0);
p2_button.addChildAt(outcircle2, incircle2, p2, 0);
p3_button.addChildAt(outcircle3, incircle3, p3, 0);
p4_button.addChildAt(outcircle4, incircle4, p4, 0);
start_button.addChildAt(outrectangle1, inrectangle1, start, 0);
options_button.addChildAt(outrectangle2, inrectangle2, options, 0);
stage.addChildAt(p_num, p1_button, p2_button, p3_button, p4_button, start_button, options_button, 0);
Ticker.addListener(window);
}
function tick() {
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>
我见过的每个例子都有代码设置这样的东西（当然还添加了某种动画交互），但是当我使用我的时候，舞台似乎没有更新。我得到的只是灰色的画布。
我做错了什么？
答案 0 :(得分：0)
您的代码使用了一些不再受支持的旧方法。具体来说，不再有任何onEvent样式的处理程序。旧版本（2010-2013）拥有像displayObject.onClick = function() {}这样的处理程序 - deprecated in favour of the event model。
相反，请使用：
start_button.addEventListener("click", startGame);
// OR
start_button.on("click", startGame);
同样，Ticker类使用事件而不是addListener方法。
createjs.Ticker.addEventListener("tick", tick);
// OR
createjs.Ticker.on("tick", tick);
你也可以让舞台获得刻度事件，如果这是你的tick方法的全部：
createjs.Ticker.on("tick", stage);
希望有所帮助！