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

Vueとの「ハートクリッカー」のボーナスパーツです.JSとFirebaseはここで見つけられます.

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

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

#javascript #html #firebase #vue

このボーナス部分では、ほんの少しの努力でジュースを加えていきます.
私はチュートリアルを取ることをお勧めします.
第1部
CSSコードから始めましょう.
まず最初に、心臓がクリック可能であることをユーザーに明らかにしましょう.
あなたのタグでは、以下のように定義カーソルを定義します.

<style lang="scss" scoped>
  canvas#heart {
    cursor: pointer;
  }    
</style>

より良い.
今すぐ少しアニメーションやリサイズを追加してみましょう(私たちの心)、あなたが探している素敵な感じを得るためにアニメーションで遊ぶことができる、私はCSSのキュービックBezierタイミング機能を使用して簡単な幅のスケールに行きました.
次のコードをCSSに追加します.

canvas#heart {
  cursor: pointer;
  width: 50px;
  transition: width 0.3s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    width: 55px;
  }
  &:active {
    width: 50px;
  }
}

パート2 -粒子!
粒子の効果のために私は心の後ろから爆発カラフルな円を使用します.
まず、キャンバス要素の下にキャンバス要素を追加し、idを粒子に設定します.

<canvas
  id="particles"
  :width="particlesWidth"
  :height="particlesHeight"></canvas>

このCSS

canvas#particles {
  position: absolute;
  left: 0;
  z-index: -1;
}

「関数クラス」を使用します.これは、基本的には、オブジェクトを作成するためにインスタンス化する関数です.
私たちのクラスでは、粒子の動作を変更し、変更することができますいくつかのプロパティがあります

MaxLife -どれくらいの時間は、粒子が「生きる」でしょう.

半径-円のサイズ.

色-粒子の色.

粒子出発点のランダム性

3つの定数とVueコンポーネントの定義の外の関数を追加します.

// a simple util function we'll use later
const random = (min, max) => {
    return Math.random() * ( max - min ) + min;
}

const PARTICLES_NUMBER = 150;
const MIN_LIFE = 50;
const MAX_LIFE = 150;

Vueコンポーネントメソッドで、新しいメソッドを追加し、パーティクルを呼び出します.

X -キャンバス上のスタートXの位置.

Y -キャンバス上のスタートY位置.

半径-円半径.

index -粒子の一意のIDとして使用する現在のインデックス.

セルフ－Vue「これ」

作成したパーティションメソッドで、次のプロパティーを先頭に追加します.

this.x = x;
this.y = y;
this.dx = Math.random()*10-5;
this.dy = Math.random()*10-5;
this.gravity = 0;
this.radius = radius;

this.id = index;
this.life = 0;
this.maxLife = random(MIN_LIFE, MAX_LIFE);
this.color = self.colors[Math.floor(Math.random()*self.colors.length)];

私たちのパーティクルクラスで円を描くには、パーティクルインスタンスの一部となるDraw関数を追加します.
粒子内のプロパティの下にDraw関数を追加します.

this.draw = () => {
  self.ctx.beginPath();              
  self.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2, false);
  self.ctx.strokeStyle = this.color;
  self.ctx.lineWidth = 4;
  self.ctx.stroke();
}

それは私たちが私達の粒子に更新機能を追加するように今、私たちは今、粒子をアニメーション化したい描画部分です.

this.update = () => {
    if (this.x + this.radius > self.particlesWidth || this.x - this.radius < 0){
    this.dx = -this.dx;
    }
    if (this.y + this.radius > self.particlesHeight || this.y - this.radius < 0){
    this.dy = -this.dy;
    }
    this.life++;
    if (this.life >= this.maxLife) {
        delete self.particles[this.id];

    }
    this.x+=this.dx;
    this.y+=this.dy;
    this.dy += this.gravity;
    this.draw();

}

UPDATE関数は、現在の位置に従って呼び出されるたびにパーティクルを移動し、最大のライフタイムをパスした場合にチェックします.もしそうなら、我々はコンポーネントに追加するパーティクル配列からパーティクルを削除します.
パート3 -コンポーネントのキャンバスに粒子を描画
Vueコンポーネントで作成したパーティクルクラスを使用します.
次のプロパティーをコンポーネントのデータに追加します.

particlesWidth: 1000,
particlesHeight: 1000,
particles: [],
ctx: null,
colors: ['rgba(243,82,92,0.8)','rgba(0,103,76,0.5)','rgba(149,178,58,0.5)','rgba(252,206,68,0.8)','rgba(245,127,79,0.5)']

3つの新しいメソッドを追加します.

INIT -我々が爆発を作りたいときはいつでも、呼ばれます.

AnimateParticle -粒子をフレームごとにアニメーション化する(requestAnimationFrameを参照).

ResizeCanvas -画面にキャンバスサイズを調整する機能.

init(x, y) {
  this.particles = (new Array(PARTICLES_NUMBER)).fill(null)
    .map((v, i) => new this.Particle(x, y, 0.5, i, this));

},

animateParticle() {
    requestAnimationFrame(this.animateParticle);
    // COOLNESS: if we don't clear rect it becomes a cool random drawing tool!
    this.ctx.clearRect(0, 0, this.particlesWidth, this.particlesHeight);
    this.particles.forEach(part => part.update());
},

resizeCanvas(canvas) {
    canvas.width = this.particlesWidth = window.innerWidth;
    canvas.height = this.particlesHeight = window.innerHeight;
}

2つのもの左:

ユーザーが心臓をクリックしたときにinit関数を呼び出します.

粒子のアニメーションをアクティブにします.

次の行をonclickメソッドに追加します.

this.init(e.clientX, e.clientY);

コンポーネントのマウントフックで次のコードを追加します

const particlesCanvas = this.$el.querySelector('#particles');
this.resizeCanvas(particlesCanvas);
window.addEventListener('resize', () => this.resizeCanvas(particlesCanvas));

if (particlesCanvas.getContext) {
  this.ctx = particlesCanvas.getContext('2d');
  this.animateParticle();
}

おめでとう!あなたはボーナスレベルを終えた!あなたに乾杯!
概要
あなたはJavaScriptと小さなCSSを使用してあなたの仕事にいくつかのジュースを追加する方法を、このチュートリアルで学んだことがあります、私はあなたが効果を再生するには、夢中になって、結果を共有することをお勧めします.
このチュートリアルを受けたおかげで、私はあなたが楽しんで、何か新しいことを学び、実用的願っています.🖤