チュートリアル:Vueとハート“クリッカー”を作成します.JSとFirebase

こんにちは!
このチュートリアルでは、“ハートクリッカー”の相互作用/ゲームを作る方法を学びます!

このチュートリアルでは、Javascript、Vue、Web開発を学びたい人のための良い練習することができます、それはまた、小さなリフレッシュを必要とする経験の開発者に合うことができます.
このチュートリアルをベストにするには、次のように準備してください.
- Vueアプリ(vue-cliを使用することができます).
- FireBaseプロジェクトとアプリケーション(後に設定します).
OK良い、今私たちを開始する準備が整いました.
パート1 -ハートを作成する
この部分では、JavaScriptのキャンバス要素を使用してハートを描画することに焦点を当てます.
新しいコンポーネントを作成し、それをHeartClicker名前とすべてのアプリケーションを置き換えます.このコンポーネントを持つvueテンプレートなので、テンプレートは次のようになります.

<template>
  <div id="app">
    <HeartClicker />
  </div>
</template>

テンプレートにキャンバス要素を追加すると、後で使用するためのdivでそれをラップすることができます.

<template>
  <div>
    <canvas 
      id="heart" 
      :width="width" 
      :height="height"></canvas>
  </div>
</template>

次に、コンポーネントのデータ内のハートの幅と高さのプロパティを定義します.

data() {
  return {
    width: 150,
    height: 150
  }
}

VUE documentationによると、ビューをレンダリングした後に呼び出されるマウントメソッドで、ハートを描画します.

Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

ハートを描くためにHTMLキャンバスをつかむ

const canvas = this.$el.querySelector('#heart');
if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fillStyle = '#FF0000'; // heart color
    ctx.fill(); // fill the shape we draw
}

ブラウザをチェックしてください.

パート2 - firebaseセットアップ
今のところテストモードでリアルタイムデータベースを追加します.
ゼロの値を持つフィールド名' count 'を作成します.

さて、NPMや糸でプロジェクトにFirebaseを追加します.

npm i firebase

srcフォルダで新しいフォルダーサービスを作成し、ファイルをクリックします.js
FireBaseのためのロジックを分離することは良い習慣です.
ClickCountマネージャー.js

import firebase from 'firebase';

const firebaseConfig = {
    ...
};

firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const firebaseCountRef = db.ref('/count');

const registerToCounts = (onValue) => {
     firebaseCountRef.on('value', snapshot => onValue(snapshot.val()));
}

const addClick = () => {
    firebaseCountRef.transaction(function(count) {
        return count + 1;
    })
}

export {addClick, registerToCounts}

あなたのアプリの下でFireBase設定からFirebaseConfigをコピーします
スクリプトを分析しましょう.
まず、firebase.initializeApp(firebaseConfig)関数を使用してFireBaseアプリケーションを初期化し、FireBaseデータベースへの参照と、リアルタイムデータベースで以前に作成したcountフィールドを参照します.

const db = firebase.database();
const firebaseCountRef = db.ref('/count');

RegisterToCount関数は、FireBaseで保存するグローバルカウンタへの更新を取得するために使用されます.
addClick関数を追加し、新しいクリックを保存します.
私たちは、これらの機能をエクスポートする私たちのハートクリッカーコンポーネントで使用する.
パート3 -コンポーネントのFireBaseの使用
FireBaseの準備と設定をしたので、ハートクリッカーコンポーネントで使用できます.
ハートクリッカーコンポーネントに戻り、ClickCountManagerメソッドをインポートします.

import {addClick, registerToCounts} from '../services/ClickCountManager';

新しいGlobalClickフィールドをデータに追加します.

data() {
    ...
    globalClicks: 0,
}

次に、ハートクリッカーコンポーネントで新しい「onclick」ハンドラmethodを追加します.

methods: {
    onClick(e) {
        addClick();
    }

キャンバス要素にメソッドをアタッチします

<template>
  <div>
    <canvas 
        id="heart" 
        :width="width" 
        :height="height" 
        @click="onClick"></canvas>
    <p>{{globalClicks}}</p>
  </div>
</template>

そして、最後に、あなたのコンポーネントの作成された機能のアップデートをカウントするために登録します:

created() {
    registerToCounts(globalClicks => {
        this.globalClicks = globalClicks;
    })
},

私は、生成されるライフサイクルフック(https://vuejs.org/v2/api/#created)のカウントに登録します.Vue lifecycle diagramを見てみることをお勧めします.
ブラウザを開き、ハートをクリックすると、FireBaseおよびGlobalCountプロパティの更新のカウントフィールドが表示されます.
概要
あなたが学んだこと

はVueコンポーネント

を作成する

はVueコンポーネント

にデータを使用する

Vueライフサイクル

FireBaseリアルタイムデータベースの使用と統合
私はあなたがこのチュートリアルを楽しんでください、下記の議論であなたの考え/フィードバックを書いてください.

ボーナスレベル!ジュースを加える
あなたがスパイスのものをしたい場合は、どのようにいくつかの簡単なCSSとキャンバス粒子を使用してあなたの心に“ジュース”を追加する方法を学びますボーナスレベルに継続することができます.
ボーナスレベルは別のポストにあります.

ボーナスレベル- Vue。ハート・クリック

シイアングレス・ Jan 30・ 4分読む

#javascript #html #vue #firebase

ここでソースを取得できます.

サングレス / ブエニーハートクリッカー

Vueによる心臓「クリッカー」。JSとFirebase