##はじめに
こんにちは！@70days_jsです。
星空の風景を作ってみました。(gif)↓

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

##サイトURL
https://sin2cos21.github.io/day73.html

##やったこと
星空の風景を作りました。
3秒経つとエイリアンが現れます。

html↓

  <body>
    <canvas id="canvas"></canvas>
  </body>

css↓

body {
  background-color: rgba(14, 34, 71, 1);
  margin: 0;
  overflow: hidden;
}

background-colorは真っ黒じゃなく、少し紺っぽい色にしてみました。

JavaScript(109行） ↓

//変数宣言__________________________________________
let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  canvasW = (canvas.width = window.innerWidth),
  canvasH = (canvas.height = window.innerHeight),
  stars = [],
  aliens = [],
  N = 100, //星の数
  eN = 10, //エイリアンの数
  myURL = "day73_1.png";

//星obj__________________________________________
function Star(ctx) {
  this.ctx = ctx;
  this.initialize();
}

Star.prototype.initialize = function() {
  this.x = Math.random() * canvasW;
  this.y = Math.random() * canvasH;
  this.size = Math.random() * 1;
  this.r = 255;
  this.g = 255;
  this.b = 0;
  this.a = Math.ceil(Math.random() * 10);
};

Star.prototype.render = function() {
  this.draw();
  this.statusChange();
};

Star.prototype.draw = function() {
  let color = this.r + "," + this.g + "," + this.b + "," + this.a;
  let ctx = this.ctx;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  ctx.fillStyle = "rgba(" + color + ")";
  ctx.fill();
  ctx.closePath();
};

Star.prototype.statusChange = function() {
  this.size += 0.01;
  this.a += 0.1;
  if (this.a <= 1) this.a = 0.1;
  if (this.size >= 0.5) this.size = 0;
};

//エイリアンobj______________________________________

function Alien(ctx, imgObj) {
  this.ctx = ctx;
  this.img = imgObj;
  this.size = 1;
  this.x = Math.random() * canvasW;
  this.y = Math.random() * canvasH;
}

Alien.prototype.render = function() {
  this.draw();
  this.statusChange();
};

Alien.prototype.draw = function() {
  this.ctx.drawImage(this.img, this.x, this.y, this.size, this.size);
};

Alien.prototype.statusChange = function() {
  if (this.size <= 60) this.size += 0.2;
  else {
    this.x += 5;
    this.y += 5;
  }
};

//実行____________________________________________

function render() {
  ctx.clearRect(0, 0, canvasW, canvasH);
  for (var i = 0; i < stars.length; i++) {
    stars[i].render();
  }
  for (var i = 0; i < aliens.length; i++) {
    aliens[i].render();
    if (aliens[i].x > canvasW || aliens[i].y > canvasH) aliens.splice(i, 1);
  }
  requestAnimationFrame(render);
}

for (var i = 0; i < N; i++) {
  let star = new Star(ctx);
  stars.push(star);
}

function comeOnAliens() {
  for (var i = 0; i < eN; i++) {
    let moto = new Image();
    moto.src = myURL;
    let one = new Alien(ctx, moto);
    aliens.push(one);
  }
}

setTimeout(comeOnAliens, 3000);

render();

オブジェクトは星とエイリアンの二つ用意しています。
render()関数がトリガーになっています。

エイリアンが来る時間はsetTimeout()で設定しています。

setTimeout(comeOnAliens, 3000);

星は実際にcanvasに書いてるのですが、エイリアンの方は画像を使っています。

let moto = new Image();

エイリアンは画面外に去ったらインスタンスを削除しています。

if (aliens[i].x > canvasW || aliens[i].y > canvasH) aliens.splice(i, 1);

これがなかったらずっと実行してしまうので動作が重くなります。

##感想
エイリアン...いるのかな？

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

##参考

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

アイコンを使用させていただきました。ありがとうございます！