소개

firebase로 동기화한 게임은 만들 수 있을지 궁금했습니다.
그래서 간단한 0 × 게임을 만들었습니다.

환경

vue-cli 3

firestore

결론과 데모

할 수 있었습니다!

완성된 앱은 여기에서 재생할 수 있습니다.
다른 플레이어가 없다고 생각하기 때문에 혼자서 놀아주세요.

간단한 코드 해설

<template>
  <div class="boardPage">
    <div v-for="(pieces, y) in formattedBoard" :key="y" class="row">
      <div v-for="(piece, x) in pieces" :key="x" @click="put(x, y)"  class="col">
        <div class="stone">
          <stone :type="piece"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["docId"],
  data: () => {
    return {
      resultMessage: "",
      myPlayer: 0,
      ref: {
        board: [0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      joinGame: false,
      buttomMessage: "ゲームに参加する"
    };
  },
  components: {
    stone: stone
  },
  methods: {
    put(x, y) {
      if (this.ref.turn === this.myPlayer && this.ref.board[y * 3 + x] === 0 && this.ref.judgement==='') {
        this.ref.board[y * 3 + x] = this.myPlayer;
        this.nextPlayer();
        this.resultCheck();
        this.updateRef(this.ref);
      }
    },
    nextPlayer() {
      this.ref.turn = this.ref.turn === 1 ? 2 : 1;
    },
    updateRef(updateRef) {
      const db = firebase.firestore();
      db.collection("rooms")
        .doc(this.docId)
        .update(updateRef);
    },
    initBoard() {
      const db = firebase.firestore();
      db.collection("rooms")
        .doc(this.docId)
        .onSnapshot(docs => {
          this.ref = docs.data();
        });
    }
  },
  created() {
    this.initBoard();
  }
};
</script>

template의 내용에 대해서

template 에서는 board 배열을 보기 쉽게 표시하고 있습니다.

script 내용에 대해

페이지가 생성되면 initBoard()가 호출되어 Firestore의 onSnapshot() 메소드에서 데이터를 ref에 저장합니다.

(onSnapshot ()의 기능으로 Firestore 측에서 데이터에 변경이 있으면 자동으로 다시 저장합니다)

돌을 두면 updateRef() 가 불려 가 갱신된 ref 데이터를 Firestore 측에 보내고 있습니다.

요약

Firestore의 onSnapshot() 메소드로 바로 구현할 수 있었습니다.

자세한 것은 이쪽( Cloud Firestore에서 실시간 업데이트 받기 )

사이고에게

firesbase는 일본어 문서가 충실하기 때문에 매우 추천합니다. 과제로서 방법을 바꾸면 통신 횟수를 더 줄일 수 있을지도. (이대로라면 무료 테두리를 바로 다 써버릴 것 같다・・・)

Github에서 코드를 게시하고 있습니다.
더럽습니다만, 신경이 쓰이는 분은 여기 부터 부디.