I had a coworker ask if it would be possible to use Vue to make a simple game. Challenge accepted!
This "Bouncing Game" essentially is just a collision detection mechanic implemented through GreenSock.
https://greensock.com
More specifically, I used the TimelineLite to do most of the animation, and then used the Draggable utility to implement the collision detection used to trigger scoring throughout the game.
The high scores are saved via LocalForage, which is a great library for using web technologies to save data in a 'semi-persistent' manner.
https://localforage.github.io/localForage/
Admittedly, the game resides within a single component, and I probably could refactor it a bit to make it more performant and modular, but I just thought I would share this little 'weekend project' with you all :)
Give it a shot and let me know what your high score is!
Take a look at the codesandbox:
Or fork the github repo:
adamwhitlock1
/
bounce-game-vue
a simple vue game. Chris wanted to make a game in jquery like this, so I made one in vue. Uses Vue, LocalForage, and GreenSock
bounce-game
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Run your tests
yarn run test
Lints and fixes files
yarn run lint
https://github.com/adamwhitlock1/bounce-game-vue
Thanks for checking it out.
Top comments (0)