CreateJS - 無法獲取Clicker或Ticker的工作原理

我試圖使用createJS爲遊戲設計菜單頁，但無法使按鈕交互正常工作。我遇到了一些障礙，我希望能在這裏解決一個或兩個問題。CreateJS - 無法獲取Clicker或Ticker的工作原理

我碰到的第一個障礙是的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>

這臺像這樣的舞臺......

Main Menu Screen

如果我設置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>

差不多我已經看到了行情設立這樣的事情（添加了某種形式的動畫互動，當然）每一個例子，但是當我用我的，舞臺似乎沒有更新。我得到的只是灰色的畫布。

我在做什麼錯？

來源

2016-11-07 Brian Reynolds

您的代碼使用了一些不再受支持的舊方法。具體而言，不再有任何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);

希望幫助！

來源

2016-11-07 22:36:58 Lanny

謝謝！這非常有幫助！似乎有很多教程都在浮動，展示了一些陳舊，過時的方法。 –

CreateJS - 無法獲取Clicker或Ticker的工作原理

回答

相關問題