エイプリルフールはじめました

2019-04-01T07:14:06+09:00

リリースしてからはじめてのエイプリールフールだったのでちょっと遊んでみました。ふわふわと飛んでいるのはくりえいとくんです。

元々

Crieit

という文字が顔に見えたのでそれをそのまま絵にしてみたらおばけになった、という感じです。クリックすると色々喋ります。

特筆することも無いので動き回らせているプログラムでも貼っておきます。

おばけクラス

move()で動かし、getX()とgetY()で表示するための位置を取得しているだけのよくあるクラスです。

Goast.ts

const ymax = 50
const width = 100

export default class Ghost {
  id: number
  private x = 0
  private y = 0
  private basey = 0
  private ax = 0
  private angle = 0

  constructor() {
    this.id = Date.now()

    if (Math.round(Math.random()) === 0) {
      this.x = -width
      this.ax = Math.floor(Math.random() * 2 + 2)
    } else {
      this.x = window.innerWidth
      this.ax = -Math.floor(Math.random() * 2 + 2)
    }

    this.basey = Math.floor(Math.random() * window.innerHeight)
    this.calculateY()
  }

  calculateY() {
    this.y = this.basey + Math.sin(this.angle) * ymax
  }

  move() {
    this.x += this.ax
    this.angle += Math.PI / 50
    if (this.angle >= Math.PI * 2) {
      this.angle -= Math.PI * 2
    }
    this.calculateY()
  }

  finished() {
    if (this.ax < 0 && this.x < -width) {
      return true
    }
    if (this.ax > 0 && this.x > window.innerWidth) {
      return true
    }
    return false
  }

  getX() {
    return this.x
  }

  getY() {
    return Math.floor(this.y)
  }

  getAx() {
    return this.ax
  }
}

おばけたちの管理コンポーネント

これも特に特筆することのない単なるゲームループ的なコンポーネントです。おばけを管理して画面からはみ出したら削除したりしています。

おばけコンポーネント

もう動きはおばけクラス、管理は前述のコンポーネントで行われているので、ここでは表示したりクリックイベントを処理したりするだけです。これで一通り完了です。面倒だったので表示はfixedにしてスクロールは考慮しないようにしています。

まとめ

さあ、みなさんも新元号のことは忘れてエイプリールフールやりましょう。今からでも間に合います！！！！！（？）

「エイプリルフール」の記事 - Crieit

エイプリルフールはじめました

おばけクラス

おばけたちの管理コンポーネント

おばけコンポーネント

まとめ