- 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>`,
推薦閱讀
- Python 3.7網絡爬蟲快速入門
- Java應用與實戰
- ASP.NET動態網頁設計教程(第三版)
- 網店設計看這本就夠了
- Learning PHP 7
- Frank Kane's Taming Big Data with Apache Spark and Python
- HTML+CSS+JavaScript編程入門指南(全2冊)
- 大學計算機基礎
- 關系數據庫與SQL Server 2012(第3版)
- 產品架構評估原理與方法
- 趣學數據結構
- Learning GraphQL and Relay
- Spring MVC Cookbook
- Neo4j High Performance
- Professional Azure SQL Database Administration