CreateJS - Не могу получить клик или тикер для работы Как я хочу

Я пытаюсь создать страницу меню для игры с помощью createJS, и я не могу заставить взаимодействие кнопки работать правильно. Я столкнулся с несколькими препятствиями, и я надеялся, что один или оба из них будут разрешены здесь.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>

Это устанавливает сцену, как так ...

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);

Вы также можете сделать этап получить событие клеща, если это все, что ваш метод клещ делает:

createjs.Ticker.on("tick", stage);

Надежда, что помогает!

источник

2016-11-07 22:36:58 Lanny

Спасибо! Это очень помогло! Кажется, что есть много учебников, плавающих вокруг, демонстрирующих некоторые из этих старых, устаревших методов. –

CreateJS - Не могу получить клик или тикер для работы Как я хочу

ответ

Смежные вопросы