Vue.js 3 By Example

Chapter 3: Building a Slider Puzzle Game with Tests

In the previous chapter, we created a simple GitHub app with Vue that had some components added to it. In this chapter, we will build a simple slider puzzle game. The game's goal is to rearrange parts of a picture till it looks like what we expect. It will have a timer to calculate the elapsed time and will display it on the screen. Once we rearrange the image's parts correctly, we will see a 'You Win' message, and the elapsed time will be recorded in local storage if it is in the top 10 fastest times. We have multiple puzzles that we can choose from so that we can have more variety in our game. This makes it more interesting than just having one puzzle.

To build the apps, we will build components ...