- Vue.js 2 Web Development Projects
- Guillaume Chau
- 285字
- 2021-07-02 22:34:36
Food and health bubbles
This component contains an image and a text that displays the current amount for either the food or health of the castle. Its position will change depending on this amount--it will go up as the amount diminishes and will go down when it replenishes.
We will need three props for this component:
- type is either food or health; it will used for the CSS class and for the image path
- value is the amount displayed in the bubble
- ratio is the amount pided by the maximum amount
We also need a computed property to calculate the vertical position of the bubble with the ratio prop. The position will range from 40 pixels to 260 pixels. So, the position value will be given by this expression:
(this.ratio * 220 + 40) * state.worldRatio + 'px'
Remember to multiply every position or size with the worldRatio value, so the game takes into account the window size (it gets bigger if the window is bigger, or vice versa).
- Let's write our new bubble component:
Vue.component('bubble', {
template: `<p class="stat-bubble" :class="type + '-bubble'"
:style="bubbleStyle">
<img :src="'svg/' + type + '-bubble.svg'" />
<p class="counter">{{ value }}</p>
</p>`,
props: ['type', 'value', 'ratio'],
computed: {
bubbleStyle () {
return {
top: (this.ratio * 220 + 40) * state.worldRatio + 'px',
}
},
},
})
It has a root p element with the stat-bubble CSS class, a dynamic class (either 'food-bubble' or 'health-bubble', depending on the type prop value) plus a dynamic CSS style we set with the bubbleStyle computed property.
It contains an SVG image, which is not the same for food and health, and a p element with the counter class that displays the amount.
- Add a food and an health bubble to the castle-banners component:
template: `<p class="banners">
<!-- Food -->
<img class="food-icon" src="svg/food-icon.svg" />
<bubble type="food" :value="player.food" :ratio="foodRatio" />
<!-- Banner bar here -->
<!-- Health -->
<img class="health-icon" src="svg/health-icon.svg" />
<bubble type="health" :value="player.health"
:ratio="healthRatio" />
<!-- Banner bar here -->
</p>`,
- Dynamics 365 for Finance and Operations Development Cookbook(Fourth Edition)
- 深入核心的敏捷開發:ThoughtWorks五大關鍵實踐
- Learning Cython Programming
- LabVIEW 2018 虛擬儀器程序設計
- DevOps入門與實踐
- 碼上行動:零基礎學會Python編程(ChatGPT版)
- 零基礎學Python數據分析(升級版)
- Java Web程序設計任務教程
- Getting Started with Laravel 4
- PHP編程基礎與實例教程
- 區塊鏈技術進階與實戰(第2版)
- Nagios Core Administration Cookbook(Second Edition)
- 人工智能算法(卷1):基礎算法
- Emotional Intelligence for IT Professionals
- Python機器學習與量化投資