Vue 3 Slider Puzzle Game
This is a single-page application that allows users to play a slider puzzle game. The game consists of rearranging the parts of a picture until it looks correct. The app has a timer that shows the elapsed time of the game, which is then stored in local storage. Once the puzzle is solved, a message is displayed to the user.
The game is created using the following three Vue components:
Puzzles.vue: This component contains the selection of puzzles with varying difficulties. The component uses computed properties and methods to manage the selection of puzzles and the game’s difficulty level.
Records.vue: This component displays the records of past games, which is stored in local storage.
SliderPuzzles.vue: This component creates the slider puzzle game itself. It uses computed properties and methods to manage the game’s state, including tracking the elapsed time and checking if the puzzle has been solved.
The following technologies were used to create this project:
Vue 3: The app was built using Vue 3.
HTML5 and CSS3: The app uses HTML5 and CSS3 to provide the layout and styling.
Unsplash: The images used in the puzzles were sourced from Unsplash.
Moment: A Vue package called Moment was used to provide the timer functionality.
To run the project, you can follow these steps:
Clone the repository from GitHub.
Install the required packages using
Run the app using
npm run serve.
Access the app in your web browser at
If you’d like to contribute to this project, please fork the repository and make changes in your own fork. Once you’ve made your changes, submit a pull request to the main repository.
We would like to thank the developers of Vue, Jest, Moment, and Unsplash for their contributions to this project.