はじめに

こんにちは！@70days_jsです。
マウスの位置に円を起き、リリースボタンを押したら円が動き出すものを作りました。
デリートボタンで円が消えます。(gif)↓

今日は71日目。(2019/12/28)
よろしくお願いします。

サイトURL

やったこと

マウスの位置に円を起き、リリースボタンを押したら円が動き出し、デリートボタンで円が消えるものを作りました。

html↓

  <body>
    <input type="button" value="delete" id="delete" />
    <input type="button" value="release" id="release" />
    <canvas id="canvas"></canvas>
  </body>

htmlはボタンとcanvasだけです。

css↓

body {
  margin: 0;
  background-color: black;
}

# delete {
  position: absolute;
  left: 10px;
  top: 10px;
}

# release {
  position: absolute;
  left: 100px;
  top: 10px;
}

cssはボタンの位置を変えたぐらいです。

JavaScript↓

let canvas = document.getElementById("canvas"),
  myDelete = document.getElementById("delete"),
  myRelease = document.getElementById("release"),
  ctx = canvas.getContext("2d"),
  twidth = (canvas.width = window.innerWidth),
  theight = (canvas.height = window.innerHeight),
  chars = [],
  mode;

function Circle(ctx, x, y) {
  this.size = 10;
  this.ctx = ctx;
  this.x = x;
  this.y = y;
  this.r = Math.floor(Math.random() * 256);
  this.g = Math.floor(Math.random() * 256);
  this.b = Math.floor(Math.random() * 256);
  this.a = Math.ceil(Math.random() * 10);
  this.v = Math.ceil(Math.random() * 10);
}

Circle.prototype.potision = function() {
  this.x += this.v;
  this.y += this.v;

  if (this.x < 0 + this.size) this.v *= -1;
  if (this.x > twidth - this.size) this.v *= -1;
  if (this.y < 0 + this.size) this.v2 *= -1;
  if (this.y > theight - this.size) this.v2 *= -1;
};

Circle.prototype.render = function() {
  this.draw();
  if (mode === true) this.potision();
};

Circle.prototype.draw = function() {
  let ctx = this.ctx,
    color = this.r + "," + this.g + "," + this.b + "," + this.a;

  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  ctx.fillStyle = "rgba(" + color + ")";
  ctx.fill();
  ctx.closePath();
};

document.body.addEventListener("mousemove", returnMousePosition);
function returnMousePosition(e) {
  let char = new Circle(ctx, e.pageX, e.pageY);
  chars.push(char);
}

function render() {
  ctx.clearRect(0, 0, twidth, theight);
  ctx.fill();
  for (var i = 0; chars.length > i; i++) {
    let char = chars[i];
    char.render();
  }

  requestAnimationFrame(render);
}
myRelease.addEventListener("click", function() {
  mode = true;
});

myDelete.addEventListener("click", function() {
  chars.length = 0;
});

render();

リリースに関しては、ボタンを押したらイベントで検知して、modeという変数の値をtrueに変えることで動き出すように設定しています。↓

myRelease.addEventListener("click", function() {
mode = true;
});

メソッドの部分で、modeを判定しています。↓

Circle.prototype.render = function() {
this.draw();
if (mode === true) this.potision();//←ここ。falseなら動かない。
};

デリートはオブジェクトを入れている配列の値を0にするだけです。↓

myDelete.addEventListener("click", function() {
chars.length = 0;
});

感想

リリース時に動き出す方向に法則があるのでなんとかしたいですね。
どうすればいいんだろう。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。