Hello! The other day I was learning about vue.js and I thought it was kind of fun so I made this whack-a-mole game (jsfiddle). (if you’re reading this in RSS / email you should maybe click on the post to see the game).
- moles are orange. click them to whack them
- if you whack all the moles you win
Here, you can play it:
To make this game work I needed to:
- make event handlers that whack the mole when I click on an orange mole
- make the game disappear when the player wins
- automatically add new moles every 0.5 seconds to be whacked
Here is the display logic for this game! It is pretty simple! There is some
HTML and it only displays the table if the game is still going (
The thing I like about this is – I just need to define a data structure for my
game state (
mole_grid). Each entry in that grid is 1 if there’s a mole there
an 0 if there’s no mole. Vue.js automatically takes care of updating the HTML
when my game state updates. This is also how React works but vue seems less
complicated to me than React and I only want to do simple things anyway.