Help us understand the problem. What is going on with this article?

VuejsとFirebaseでオンライン対戦のボードゲームを作ってみた

はじめに

firebaseで同期したゲームは作れるのか気になりました。
そこで、簡単な〇×ゲームを作りました。

環境

  • vue-cli 3
  • firestore

結論とデモ

gif.gif
できました!

完成したアプリはここで遊べます。
他にプレイヤーは居ないと思うので、一人二役で遊んでください。

簡単なコードの解説

<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でコードを公開しています。
汚いですが、気になった方はこちらからどうぞ。

kawa_1214
楽しんで読んでもらえるような記事にしたいです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away