Remaking Retro Games with Vue.js
summary
A playable Pokemon Red clone is rebuilt using Vue 3 and Vue CLI, rendering a 40px tile grid with arrow-key movement and collision for walls. Game state (position, HP, environment) is stored in a Vuex store with getters and mutations, and combat is implemented as a separate component: a six-step battle state machine that updates HP bars and returns to the map. The app uses refs, computed properties, and watchers and the demo runs live.
AI-written summary · about
chapters (28)
- 0:00Vue.js intro
- 2:52Retro game with Vue.js
- 3:13Base structure & components
- 4:16Data binding & reactivity
- 5:47Conditional rendering
- 6:51Event handling
- 8:23Component display
- 9:30Custom methods
- 10:59Dynamic styles
- 12:26Props for data
- 13:29Arrow key movement
- 15:16Movement grid
- 16:40Vuex state
- 19:28Collision handling
- 21:59Advanced computed props
- 23:04Character state
- 25:55Pokémon battle triggers
- 27:42Battle component
- 28:45HP display
- 31:11HP state in Vuex
- 32:38Message window
- 33:43Attack selection
- 35:10Enemy attack choices
- 36:16HP reduction & animations
- 37:39Battle end
- 39:08Back to movement
- 41:19Vue.js key concepts
- 42:00Vue DevTools
related talks
40mRemaking Retro Games with Vue.js
44mRemaking retro games with Vue.js
32mVideo Games with Vue, Lessons Learned
36mUnderstanding client side routing with Vue.js
34mGame Development with Vue.js / Nuxt.js and Phaser
35mCommon Mistakes in Vue.js and How to Avoid Them
27mAdvanced animations with Vue.js: taking your interface to the next level
40mLive code a game on the browser with Opal and Vue.js