We are mostly done with the UI elements, so we can now go into the game scenery components. We will have some new components to do--the player castles, a health and food bubble for each one, and some animated clouds in the background for good measure.
Create a new world.js file in the components folder, and include it in the page:
<!-- ... -->
<script src="components/ui.js"></script>
<script src="components/world.js"></script>
<script src="main.js"></script>We will start with the castles.
This one is actually pretty simple since it consists of only two images and a castle-banners component that will take care of the health and food display:
- In the
world.jsfile, create a new castle component with two images that accepts aplayersand anindexprop:
Vue.component('castle', {
template: `<div class="castle" :class="'player-' + index">
<img class="building" :src="'svg/castle' + index + '.svg...