- Vue.js 2 Web Development Projects
- Guillaume Chau
- 241字
- 2021-07-02 22:34:33
The hand
Our next component will be the current player hand, holding the five cards they have. It will be animated with a 3D transition and will also be responsible for the card animations (when the card is drawn, and when it is played).
- In the components/ui.js file, add a component registration with the 'hand' ID and a basic template, with two p elements:
Vue.component('hand', {
template: `<p class="hand">
<p class="wrapper">
<!-- Cards -->
</p>
</p>`,
})
The wrapper element will help us position and animate the cards.
Each card in the hand will be represented by an object. For now, it will have the following properties:
- id: The card definition unique identifier
- def: The card definition object
As a reminder, all the card definitions are declared in the cards.js file.
- Our hand component will receive these card objects representing the player hand via a new array prop called cards:
Vue.component('hand', {
// ...
props: ['cards'],
})
- We can now add the card components with the v-for directive:
<p class="wrapper">
<card v-for="card of cards" :def="card.def" />
</p>
- To test our hand component, we will create in the app state a temporary property called testHand (in the state.js file):
var state = {
// ...
testHand: [],
}
- Add a createTestHand method in the main component (in the main.js file):
methods: {
createTestHand () {
const cards = []
// Get the possible ids
const ids = Object.keys(cards)
// Draw 5 cards
for (let i = 0; i < 5; i++) {
cards.push(testDrawCard())
}
return cards
},
},
- To test the hand, we also need this temporary testDrawCard method that simulates a random card draw:
methods: {
// ...
testDrawCard () {
// Choose a card at random with the ids
const ids = Object.keys(cards)
const randomId = ids[Math.floor(Math.random() * ids.length)]
// Return a new card with this definition
return {
// Unique id for the card
uid: cardUid++,
// Id of the definition
id: randomId,
// Definition object
def: cards[randomId],
}
}
}
- Use the created lifecycle hook to initialize the hand:
created () {
this.testHand = this.createTestHand()
},
cardUid is a unique identifier on cards drawn by the players that will be useful to identify each of the cards in the hand, because many cards can share the exact same card definition, and we will need a way to differentiate them.
- In the main template, add the hand component:
template: `<p id="#app">
<top-bar :turn="turn" :current-player-
index="currentPlayerIndex" :players="players" />
<hand :cards="testHand" />
</p>`,
The result in your browser should look like this:

推薦閱讀
- 手機(jī)安全和可信應(yīng)用開(kāi)發(fā)指南:TrustZone與OP-TEE技術(shù)詳解
- 軟件安全技術(shù)
- GitLab Cookbook
- Mastering JavaScript Object-Oriented Programming
- Android和PHP開(kāi)發(fā)最佳實(shí)踐(第2版)
- 少年輕松趣編程:用Scratch創(chuàng)作自己的小游戲
- 跟老齊學(xué)Python:輕松入門
- 編寫(xiě)高質(zhì)量代碼:改善C程序代碼的125個(gè)建議
- Getting Started with Laravel 4
- PHP 7+MySQL 8動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)從入門到精通(視頻教學(xué)版)
- Spring核心技術(shù)和案例實(shí)戰(zhàn)
- 微服務(wù)架構(gòu)深度解析:原理、實(shí)踐與進(jìn)階
- Head First Kotlin程序設(shè)計(jì)
- Mastering Magento Theme Design
- MonoTouch應(yīng)用開(kāi)發(fā)實(shí)踐指南:使用C#和.NET開(kāi)發(fā)iOS應(yīng)用