a tiny whack-a-mole game
source link: https://jvns.ca/blog/2017/06/26/vue-js-fun/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
a tiny whack-a-mole game
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).
Rules:
- 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
Usually when I write Javascript I use jQuery and make a lot of callbacks and the code I write is sort of a disaster.
I’m excited about vue.js right now because it feels like an easier way to make tiny interactive javascript programs like this one.
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 (!won()
).
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.
javascript
Okay, but the app needs, like, callbacks and Javascript and stuff. Here’s all
the javascript! It has a squash
function and a won
function. It feels about
as simple as the code for a whack-a-mole game should be which is.. pretty
simple.
var app = new Vue({
el: '#app',
data: {
mole_grid: [ // this is the initial grid, with 2 moles on it
// all the game state is here basically!
[0, 1, 0],
[0, 0, 0],
[1, 0, 1]
],
has_won: false, // also store if the player won yet
},
methods: {
set_mole: function(x_coord, y_coord, value) {
this.mole_grid[x_coord][y_coord] = value;
Vue.set(this.mole_grid, x_coord, this.mole_grid[x_coord]);
},
squash: function(x_coord, y_coord) {
this.set_mole(x_coord, y_coord, 0);
},
// check if we won yet
won: function () {
if (this.has_won) {
return true
}
var sum = 0;
for (var i in this.mole_grid) {
for (var j in this.mole_grid[i]) {
sum += parseInt(this.mole_grid[i][j]);
}
}
if (sum == 0) {
this.has_won = true;
}
return this.has_won;
}
}
})
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// add a new mole to squash every 500ms
setInterval(function() {
console.log(app.won());
app.set_mole(getRandomInt(0, app.mole_grid.length), getRandomInt(0, app.mole_grid[0].length), 1)
}, 500);
that’s all
I don’t have a lot of opinions about javascript libraries (my local npm installation is definitely broken), but I do like to make tiny interactive webpages on the internet occasionally and this seems like a nice way to do that.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK