Vue.js 2 Web Development Projects

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      }

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

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

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

3. We will need to change the z-index and transform CSS properties ...