VueとCSSとTypeScriptでシューティングゲーム「ネコメザシアタック2020」を作ったのでソースと解説

<TamaSan :tamaX="1.39" /> 

import Pos from './Pos' // x, y, r（角度）をセットで保持する値クラス

export default {
  /**
  * 指定したX位置（一周=8）に対応する座標・回転角を求めます
  * @param val X位置
  * @param gw 地面の幅
  * @param gh 地面の高さ
  */
  at: (val: number, gw: number, gh: number): Pos => {
    const segIndex = Math.floor(val)
    const prog = val - segIndex
    const turnsR = Math.floor(val / 8) * 360

    switch (segIndex % 8) {
      case 0:
        return new Pos(gw * prog, 0, 0 + turnsR)
      case 1:
        return new Pos(gw, 0, prog * 90 + turnsR)
      case 2:
        return new Pos(gw, gh * prog, 90 + turnsR)
      case 3:
        return new Pos(gw, gh, 90 + prog * 90 + turnsR)
      case 4:
        return new Pos(gw * (1 - prog), gh, 180 + turnsR)
      case 5:
        return new Pos(0, gh, 180 + prog * 90 + turnsR)
      case 6:
        return new Pos(0, gh * (1 - prog), 270 + turnsR)
      default:
        return new Pos(0, 0, 270 + prog * 90 + turnsR)
    }
  }
}

  const tamaPos = computed<Pos>(() => Angle8.at(props.tamaX, ground.w, ground.h))

<!-- たまさんの土台（中にたまさん本体もいる） -->
<TamaHome
  :tamaX="tamaHomeState.tamaX / 100"
  :groundPos="activePlanet.pos"
  :groundSize="activePlanet.size"
  :groundRound="activePlanet.round"
/>

<!-- 惑星1 -->
<Planet
  :round="planet1State.round"
  :pos="planet1State.pos"
  :size="planet1State.size"
/>

<!-- 惑星2 -->
<Planet
  :round="planet2State.round"
  :pos="planet2State.pos"
  :size="planet2State.size"
/>

setup () {
  /** たまさん（土台）の状態 */
  const tamaHomeState = reactive<TamaHomeState>({
    tamaX: 0,
    planetIndex: 0 // 乗っている惑星のindex
  })

  const planet1State = /* 略：惑星1の位置・角度・サイズ */
  const planet1State = /* 略：惑星2の位置・角度・サイズ */

  /** planetIndexの値によって惑星1か惑星2のどちらかを返す */
  const activePlanet = computed<PlanetState>(() =>
    tamaHomeState.planetIndex % 2 === 0 ? planet1State : planet2State
  )
  // ...略
}

const getTamaPos = (): Pos | null => {
  // テンプレート内のDOMを取得
  // ※Vue2のthis.$refs('tamaBody')と同じ
  // この部分は後ろの節でも解説しています
  const tamaBody = tamaBody.value // div要素
  if (!tamaBody) { return null }
  const p = tamaBody.getBoundingClientRect()
  return new Pos(p.x + p.width / 2, p.y + p.height / 2, 0)
}

<div class="pos-detector">
  <div class="detector-top" ref="detTop"></div>
  <div class="detector-bottom" ref="detBottom"></div>
</div>

<style lang="scss" scoped>
.pos-detector {
  position: absolute;
  width: 0px;
  height: 100px;
  top: calc(50% - 50px);
  left: 50%;
  div {
    position: absolute;
    width: 1px;
    height: 1px;
  }
  .detector-top {
    top: 0;
  }
  .detector-bottom {
    bottom: 0;
  }
}

const detTop = ref<HTMLDivElement>(null) // Vue2の this.$refs.detTop の宣言
const detBottom = ref<HTMLDivElement>(null) // 同上
const getTamaPos = (): Pos | null => {
  const elTop = detTop.value
  const elBtm = detBottom.value
  if (!elTop || !elBtm) { return null }
  const pTop = elTop.getBoundingClientRect() // 上側の位置を取得
  const pBtm = elBtm.getBoundingClientRect() // 下側の位置を取得
  const cx = (pTop.x + pBtm.x) / 2 // 中心X
  const cy = (pTop.y + pBtm.y) / 2 // 中心Y
  const rad2ang = (rad: number) => rad / Math.PI * 180 // ラジアン→角度の変換関数
  const r = rad2ang(Math.atan2((pBtm.y - pTop.y), (pBtm.x - pTop.x))) // Math.atan2で角度を求める
  return new Pos(cx, cy, r)
}

<template>
  <div>
     <button @click="getSpan">Get ref</button>
     <span ref="msg">Hello</span>
  </div>
</template>

<script>
export default {
  methods: {
    // this.$refsでテンプレート内のSpan要素を取得できる
    getSpan () { console.log(this.$refs('msg')) }
  }
}
</script>

<template>
  <!-- 同じなので省略 -->
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'
export default createComponent({
  setup () {
    const msg = ref() // 中身のないrefを作る。※重要なのは名前※
    // msg.valueでテンプレート内の要素にアクセスできるようになる
    const getSpan = () => { console.log(msg.value) }
    return {
      msg,
      getSpan
    }
  }
})
</script>

<script lang="ts">
    ... 略 ...
    const msg = ref<HTMLSpanElement>() // 型を明示してrefを作る
    const getSpan = () => {
      const msgSpan = msg.value // HTMLSpanElementとして取得できる
    }
    ... 略 ...
</script>

<template>
  <div>
    <TamaSan ref="tamaRef" /><!-- このたまさんにアクセスしたい -->
  </div>
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'
import TamaSan from './TamaSan.vue' // たまさんコンポーネント読み込み

export default createComponent({
  components: { TamaSan },
  setup () {
    const tamaRef = ref<TamaSan>() // TamaSan型
    return { tamaRef }
  }
})
</script>

const tamaRef = ref<InstanceType<typeof TamaSan>>()

const tamaRef = ref<Vue>()