キャラクターに向かっていく弾(自機狙い弾)

class Canvas {
	constructor() {
		// キャンバスの生成
		this.canvas = document.createElement('canvas');
		// htmlのbodyに追加
		document.body.append(this.canvas);
		this.ctx = this.canvas.getContext('2d');
		// キャンバスのサイズをブラウザのウィンドウいっぱいにする
		this.canvas.width = document.documentElement.clientWidth;
		this.canvas.height = document.documentElement.clientHeight;
	}

	// 画面の塗りつぶしメソッド
	canvasFill() {
		// 色薄い緑に
		this.ctx.fillStyle = 'rgb(191, 255, 191)';
		// キャンバスのサイズで塗りつぶす
		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
	}

	getCanvas() {
		return this.canvas;
	}

	getContext() {
		return this.ctx;
	}
}

// 読み込みが完了したときの処理
window.onload = function() {
  init();
};

// 初期処理
const init = function() {
  // Canvasの生成
  const CanvasClass = new Canvas();
  // Canvasの塗りつぶし
  CanvasClass.canvasFill();
  // 黒点の配列
  let blackDots = [];
  // Canvasがクリックされた時のイベントを登録する
  CanvasClass.getCanvas().addEventListener('click', e => {
    // 変数 e には、クリックイベントが格納されている
    // 赤点をクリックされた位置に移動する
    redDot.x = e.x;
    redDot.y = e.y;
    // 黒点の生成
    const dot = Object.create(blackDot);
    // 黒点の位置を青点にする
    dot.x = blueDot.x;
    dot.y = blueDot.y;
    // 黒点の最終地点をクリックされた点にする
    dot.endPosX = e.x;
    dot.endPosY = e.y;
    // 青点から赤点への角度を計算する
    dot.angle = calcAngle(redDot, blueDot);
    blackDots.push(dot);
  });
  // 100ms毎にキャンバスを塗潰し、各点を描画する
  setInterval(function() {
    CanvasClass.canvasFill();
    drawDot(CanvasClass.getContext(), blackDots);
  }, 100);
}

// 青点から赤点への角度を計算する
const calcAngle = function(red, blue) {
  return Math.atan2(red.y - blue.y, red.x - blue.x);
}

// 各点の描画
const drawDot = function(ctx, blackDots) {
  // 赤点
  ctx.beginPath();
  ctx.arc(redDot.x, redDot.y, redDot.radius, 0, 360 * Math.PI / 180, false);
  ctx.fillStyle = redDot.color;
  ctx.fill();
  // 青点
  // blueDot.moveDot();
  ctx.beginPath();
  ctx.arc(blueDot.x, blueDot.y, blueDot.radius, 0, 360 * Math.PI / 180, false);
  ctx.fillStyle = blueDot.color;
  ctx.fill();
  // 黒点の描画
  for(let i = 0; i < blackDots.length; i ++) {
    blackDots[i].moveDot();
    ctx.beginPath();
    ctx.arc(blackDots[i].x, blackDots[i].y, blackDots[i].radius, 0, 360 * Math.PI / 180, false);
    ctx.fillStyle = blackDots[i].color;
    ctx.fill();
  }
  // 黒点が終点位置にいたら配列から削除する
  for(let i = 0; i < blackDots.length; i ++) {
    if(!blackDots[i].isRemove) continue;
    blackDots = blackDots.splice(i, 1);
  }
}

// 赤点
const redDot = {
  x: 100,
  y: 100,
  radius: 10,
  color: 'rgba(255, 0, 0, 0.8)',
};

// 青点
const blueDot = {
  x: 200,
  y: 200,
  angle: 0,
  radius: 10,
  color: 'rgba(0, 0, 255, 0.8)',
  // 円状に青点を動かす
  moveDot: function() {
    this.x += Math.cos(this.angle) * this.radius * 2;
    this.y += Math.sin(this.angle) * this.radius * 2;
    this.angle ++;
    if(this.angle >= 360) this.angle = 0;
  }
};

// 黒点
const blackDot = {
  x: 0,
  y: 0,
  endPosX: 0,
  endPosY: 0,
  radius: 3,
  speed: 5,
  angle: 0,
  color: 'rgba(0, 0, 0, 1)',
  isRemove: false,
  // 黒点の移動
  moveDot: function() {
    this.x += this.speed * Math.cos(this.angle);
    this.y += this.speed * Math.sin(this.angle);
    this.isEndPos();
  },
  // 黒点が終点位置にいるかチェックする
  isEndPos: function() {
    let isEndX = false;
    if(0 <= this.speed * Math.cos(this.angle)) {
      if(this.endPosX <= Math.round(this.x)) isEndX = true;
    } else {
      if(Math.round(this.x) < this.endPosX) isEndX = true;
    }
    let isEndY = false;
    if(0 <= this.speed * Math.sin(this.angle)) {
      if(this.endPosY <= Math.round(this.y)) isEndY = true;
    } else {
      if(Math.round(this.y) < this.endPosY) isEndY = true;
    }
    if(isEndX && isEndY) this.isRemove = true;
  },
}