Question

我用createjs写了一个小游戏。只是在displayObject上进行了隐藏，并将其隐藏起来。

每次我对这个物体进行嘲讽时，画布都会在iOS Safari中停留一段时间。我该如何解决这个问题？

演示：

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.combined.js"></script>

<script type="text/javascript">
  function preload(){
    document.addEventListener("touchstart",function(e){e.preventDefault();},false);
    var canvas = document.getElementById("canvas");
    var stage = new createjs.Stage(canvas);
    createjs.Touch.enable(stage);
    var container = new createjs.Container();
    stage.addChild(container);
    var rings = 40;
    var radius = 50;
    var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];

    for (var i = 0; i < 10; i++) {
      shape = new createjs.Shape();
      for (var j = rings; j > 0; j--) {
        shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, radius * j / rings);
      }
      shape.x = Math.random() * canvas.width;
      shape.y = $(window).height()+50*Math.random()*20;
      shape.velX = Math.random() * 10 - 5;
      shape.velY = Math.random() * 10 - 5;
      shape.on("mousedown", function () {
        this.visible = false;
        stage.update();
      });
      shape.snapToPixel = true;
      container.addChild(shape);


    }
    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", tick);
    function tick(event) {
      var l = container.getNumChildren() ;
      for (var i = 0; i < l; i++) {
        shape = container.getChildAt(i);
        shape.y = shape.y-5;
        if(shape.y<-250||!shape.visible){
          shape.x = (canvas.width-150) * Math.random();
          shape.y = canvas.height;
          shape.visible = true;
        }
      }
      stage.update(event);
    }
  }



</script>

<body onLoad="preload();">
  <div class="box">
    <canvas id="canvas"  width="640" height="1040"></canvas>
  </div>

</body>

createjs mousedown不会感觉流利

0 个答案: