CreateJS - 无法让 Clicker 或 Ticker 以我想要的方式工作答案

【问题标题】：CreateJS - Can't Get Clicker or Ticker to Work How I WantCreateJS - 无法让 Clicker 或 Ticker 以我想要的方式工作
【发布时间】：2016-11-08 06:36:58
【问题描述】：

我正在尝试使用 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>

几乎我见过的每个示例都设置了类似的代码（当然，添加了某种动画交互），但是当我使用我的时，舞台似乎没有更新。我得到的只是灰色的画布。

我做错了什么？

【问题讨论】：

标签： html onclick listener createjs ticker

【解决方案1】：

您的代码使用了一些不再受支持的旧方法。具体来说，不再有任何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事件，如果这就是你的tick方法所做的一切：

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

希望有帮助！

【讨论】：

谢谢！这有很大帮助！似乎有很多教程在流传，展示了其中一些旧的、过时的方法。