Make a simple game with Vuejs

Re-type the number you see below. Ez right?

Vuejs Memory Game

The idea is simple. Display a number and then let the user type the number they see on screen. There is a twist though. We start by displaying single digit number and then we proceed by adding the number of digits displayed as the user goes to higher levels. We also introduce a timeout display on the number, such that the number will display only for a specific duration and then it will be hidden from the user. Ez right?

I am going to skip the html and css part and get right into the vuejs part and making the game.

Generating a random number.

Generating a random number in javascript is pretty easy. Just throw in Math.random() and we are done. The problem though is Math.random() only generates a random number between 0 and 1. We want to be able to generate integers with n number of digits. The code below enables us to do that.

	function generateNumber(digits) {
	var min = Math.pow(10, digits - 1)
	var max = Math.pow(10, digits)
	var num = Math.floor(Math.random() * (max - min + 1)) + min
	return num;
	}

view raw generatenum.js hosted with ❤ by GitHub

Now that generating a random number is taken care of let’s make a new vue instance with the game setup.

	new Vue({
	el: "#app",
	data: {
	randomNum: 0, // random number that will be displayed to the user
	level: 1, // indicates the level a user is on.
	sublevel: 0, // indicates the sublevel the user is on
	number: '', // the number typed by the user. we will compare this with randomNum
	errorCount: 0, // number of times the user typed the wrong number
	gameEnd: false,
	wrongFeedback: false
	}
	)

view raw vueinstance.js hosted with ❤ by GitHub

Lets imagine that the user has already seen the number, how long should we wait before hiding it? This is how i did it. let time = this.level * 160 . There is no special thing about the 160 . After testing with various interval i concluded that this interval would be pretty fair. We will use setTimeout to hide the number by calling hideNumber() function.

	function hideNumber() {
	var el = document.getElementById('number')
	el.innerHTML = el.innerHTML.replace(/\w/gi, '·');
	}
	function showNumber(number) {
	var el = document.getElementById('number')
	el.innerHTML = number
	}

view raw showhide.js hosted with ❤ by GitHub

One last thing. We need to display a number a soon our component is loaded. In vuejs this is simple. We need to place our code in the mounted function.

	mounted: function () {
	this.randomNum = generateNumber(this.level)
	}

view raw mounted.js hosted with ❤ by GitHub

Putting it together.

	function generateNumber(digits) {
	var min = Math.pow(10, digits - 1)
	var max = Math.pow(10, digits)
	var num = Math.floor(Math.random() * (max - min + 1)) + min
	return num;
	}
	function hideNumber() {
	var el = document.getElementById('number')
	el.innerHTML = el.innerHTML.replace(/\w/gi, '·');
	}
	function showNumber(number) {
	var el = document.getElementById('number')
	el.innerHTML = number
	}
	new Vue({
	el: "#app",
	data: {
	randomNum: 0,
	level: 1,
	sublevel: 0,
	number: '',
	errorCount: 0,
	gameEnd: false,
	wrongFeedback: false
	},
	mounted: function () {
	this.randomNum = generateNumber(this.level)
	},
	methods: {
	nextNumber: function () {
	if (this.number === this.randomNum) {
	this.wrongFeedback = false
	if (this.sublevel === this.level) {
	this.level++
	this.sublevel = -1
	}
	this.sublevel++
	this.number = ''
	this.randomNum = generateNumber(this.level)
	var time = this.level * 160
	setTimeout(hideNumber, time)
	} else {
	this.wrongFeedback = true
	this.errorCount++
	showNumber(this.randomNum)
	if (this.errorCount == 3) {
	this.gameEnd = true
	}
	}
	},
	start: function () {
	hideNumber()
	},
	restartGame: function(){
	this.level = 1
	this.sublevel = 0
	this.gameEnd = false
	this.wrongFeedback = false
	this.errorCount = 0
	this.number = ''
	this.randomNum = generateNumber(this.level)
	}
	}
	})

view raw game.js hosted with ❤ by GitHub

The demo.

Vuejs Memory Game

This post was inspired by Pham Mikun’s codepen (React Version)

Comments

[webdeasy.de]

Nice one! :D Simple, but it's perfect to understande the Vue technic by a practical example.