DEV Community

loading...

I made a game in Vue. Animation/Mechanics with GreenSock, High Scores with LocalForage.

codestuff2 profile image Adam Whitlock ・1 min read

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:

Edit bounce-game

Or fork the github repo:

GitHub logo 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.

Discussion

pic
Editor guide