- Vue.js 2 Web Development Projects
- Guillaume Chau
- 129字
- 2021-07-02 22:34:36
Castle banners
The castle banners will display the health and food for the castle. There will be two components inside the castle-banners component:
- A vertical banner whose height changes, depending of the amount of the stat
- A bubble with the actual number displayed
It will look like this:

- First, create a new castle-banners component with only the stat icons and a player prop:
Vue.component('castle-banners', {
template: `<p class="banners">
<!-- Food -->
<img class="food-icon" src="svg/food-icon.svg" />
<!-- Bubble here -->
<!-- Banner bar here -->
<!-- Health -->
<img class="health-icon" src="svg/health-icon.svg" />
<!-- Bubble here -->
<!-- Banner bar here -->
</p>`,
props: ['player'],
})
- We also need two computed properties that calculate the health and food ratios:
computed: {
foodRatio () {
return this.player.food / maxFood
},
healthRatio () {
return this.player.health / maxHealth
},
}
The maxFood and maxHealth variables are defined at the beginning of the state.js file.
- In the castle component, add the new castle-banners component:
template: `<p class="castle" :class="'player-' + index">
<img class="building" :src="'svg/castle' + index + '.svg'" />
<img class="ground" :src="'svg/ground' + index + '.svg'" />
<castle-banners :player="player" />
</p>`,
推薦閱讀
- jQuery Mobile Web Development Essentials(Third Edition)
- 垃圾回收的算法與實現
- 算法基礎:打開程序設計之門
- 精通Scrapy網絡爬蟲
- JSP開發案例教程
- Big Data Analytics
- Apache Mahout Clustering Designs
- 零基礎入門學習Python(第2版)
- Kubernetes源碼剖析
- ArcGIS for Desktop Cookbook
- ExtJS Web應用程序開發指南第2版
- Xcode 6 Essentials
- OpenCV with Python Blueprints
- 愛上C語言:C KISS
- JavaEE架構與程序設計