Remaking Retro Games with Vue.js

on YouTube ↗40m

" summary

A concrete remake of a retro Pokémon‑style game built with Vue.js, showing setup with Vue CLI, single‑file components, a 40px grid for positioning and keyboard movement in 40px steps, and collision detection via an ~18×N matrix. State is centralized with a Vuex store (actions, mutations, getters, watchers), debugging uses vue‑devtools, combat is triggered on grass tiles with reactive HP bars and timed combat sequences — the working prototype demonstrates these mechanics.

AI-written summary · about

" chapters (14)

1. 0:00Vue.js project intro
2. 2:07Vue CLI setup
3. 5:45Reactive data and events
4. 8:12Character movement props
5. 11:49Grid creation and pixels
6. 13:54Vuex for app state
7. 18:27Collision handling
8. 22:41Character orientation computed
9. 24:26Combat triggers and modes
10. 28:30HP display and reactivity
11. 32:22Attack selection flow
12. 35:53Damage calculation update
13. 38:21Combat end and return
14. 39:23Conclusion

" related talks

• 43mRemaking Retro Games with Vue.jsNicolas Decoster, Juliane Blier · DevFest du bout du monde 2019
• 44mRemaking retro games with Vue.jsNicolas Decoster, Juliane Blier · BDX I/O 2019
• 32mVideo Games with Vue, Lessons LearnedNuria Soriano · Women Techmakers Barcelona 2019
• 34mGame Development with Vue.js / Nuxt.js and PhaserWinnie Hellmann · code.talks 2019
• 27mAdvanced animations with Vue.js: taking your interface to the next levelKrystal Campioni · Laracon EU 2018
• 36mUnderstanding client side routing with Vue.jsHassan Djirdeh · JSCamp 2018
• 24mVue js in Practice: Hybridizing Objects and FunctionsBetsy Haibel · NationJS 2017
• 49mVue and Vuex: Structure your app with centralized state managementChristoffer Noring · Øredev 2018