Creating the components for shuffling pictures
The slider puzzle game provides the slider puzzle where the player shuffles the tiles into a picture to win, the elapsed time display, the logic for rearranging the puzzles, the logic to check if we win, and a timer to calculate the elapsed time since the game started.
To calculate the elapsed time easily, we can use the
moment library. To install the library, we can run
npm install moment. Once we have installed the package, we can begin writing the necessary code.
Let's create the
src/components/SliderPuzzle.vue file. The full code for this file can be found at https://github.com/PacktPublishing/-Vue.js-3-By-Example/blob/master/Chapter03/src/components/SliderPuzzle.vue.
We will start by creating the component with the
<script> import moment from "moment"; const correctPuzzleArray = [ "image_part_001.jpg", "image_part_002.jpg", "image_part_003...