CreateJS - 働くクリッカーやティッカーを取得できません。

createJSを使用してゲームのメニューページをデザインしようとしていますが、ボタンのやりとりが正しく機能することができません。私はいくつかの障害物にぶつかってきました。そして、私はここで解決されることを望んでいました。CreateJS - 働くクリッカーやティッカーを取得できません。

私はに実行した最初のバリケードがonclickのである：私はstart_gameを呼び出すようにcanvas.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;

それはうまくいきますが、スタートボタンは同じように...

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.on("tick", stage);

希望：

createjs.Ticker.addEventListener("tick", tick); 
// OR 
createjs.Ticker.on("tick", tick);

また、それはすべてあなたのダニの方法がありませんであれば、ステージは、ダニのイベントを取得することができます！

出典

2016-11-07 22:36:58 Lanny

ありがとうございます！それはたくさんの助けになりました！これらの古くからの古い方法のいくつかを実演しているチュートリアルがたくさんあるようです。 –

CreateJS - 働くクリッカーやティッカーを取得できません。

答えて

関連する問題