The animated clouds

To add some life to the game world, we will create a few clouds that will slide in the sky. Their position and animation duration will be random and they will go from the left to the right of the window.

1. In the world.js file, add the minimum and maximum durations for the cloud animation:

      const cloudAnimationDurations = {
        min: 10000, // 10 sec
        max: 50000, // 50 sec
      }

1. Then, create the cloud component with an image and a type prop:

      Vue.component('cloud', {
        template: `<p class="cloud" :class="'cloud-' + type" >
          <img :src="'svg/cloud' + type + '.svg'" />
        </p>`,
        props: ['type'],
      })

There will be five different clouds, so the type prop will range from 1 to 5.

1. We will need to change the z-index and transform CSS properties of the component with a reactive style data property:

      data () {
        return {
          style: {
            transform: 'none',
            zIndex: 0,
          },
        }
      },

1. Apply these style properties with the v-bind directive:

      <p class="cloud" :class="'cloud-' + type" :style="style">

1. Let's create a method to set the position of the cloud component using the transform CSS property:

      methods: {
        setPosition (left, top) {
          // Use transform for better performance
          this.style.transform = `translate(${left}px, ${top}px)`
        },
      }

1. We need to initialize the horizontal position of the cloud when the image is loaded, so that it's outside of the viewport. Create a new initPosition that uses the setPosition method:

      methods: {
        // ...
        initPosition () {
          // Element width
          const width = this.$el.clientWidth
          this.setPosition(-width, 0)
        },
      }

1. Add an event listener on the image with the v-on directive shorthand that listens to the load event and calls the initPosition method:

      <img :src="'svg/cloud' + type + '.svg'" @load="initPosition" />