create.js - perticle gravity

by uto usui

HTML

<div class="wrap">

  <h1>create.js</h1>
  <p>パーティクル<br>重力</p>
  <canvas id="myCanvas" width="250" height="250"></canvas>

</div>

SCSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-family: Helvetica, 'Helvetica';
  text-align: center;
}

h1 {
  font-size: 42px;
  font-weight: bold;
  color: #32355a;
}

canvas {
  margin: 20px auto;
  border: 3px dashed rgba(#32355a, .55);
}

JavaScript

window.addEventListener("load", init);

function init() {
      // ステージを作成
      var stage = new createjs.Stage("myCanvas");
      // パーティクルの大きさ(半径)
      var size = 10;
      // 赤い丸を作成
      var particle = new createjs.Shape();
      particle.graphics.beginFill("DarkRed").drawCircle(0, 0, size);
      stage.addChild(particle);
      particle.x = stage.canvas.width / 2;
      particle.y = 0;
      // 速度情報
      var vy = 0;
      // 時間経過
      createjs.Ticker.addEventListener("tick", handleTick);
			//
      function handleTick() {
        // 重力
        vy += .5;
        // 摩擦
        vy *= 0.95;
        //
        particle.y += vy;
        // 地面の作成
        if (particle.y > stage.canvas.height - size) {
          particle.y = stage.canvas.height - size; // 行き過ぎ補正
          vy *= -1; // Y軸の速度を反転
        }
        // ステージの更新
        stage.update();
      }
			createjs.Ticker.timingMode = createjs.Ticker.RAF;
    }