Memory the Game V1

Circular icon with two abstract cats

Click here to play Memory the game || Click here to view the Github Repo

To view the refactored version 2, click here

 

 

In order to become better at JavaScript, I decided to create Memory the Game as a web application. The idea was create a colorful, interactive browser game in which the user can decide how many tiles he or she wants to use. It also had to work on as many browsers possible and no use of JavaScript libraries; only Vanilla JS.
The game is started by spawning a number of tiles with each number twice; meaning two tiles have the same number. The numbers are first produced by a for loop and put into an array:

function Tile(hiddenNumber, isFaceUp, back, front, HTMLtileContainer)
{
	this.hiddenNumber = hiddenNumber;
	this.isFaceUp = isFaceUp;
	this.back = back;
	this.front = front;
	this.HTMLtileContainer = HTMLtileContainer;
}

 

Then it is time to create a tile and assign it a number from the bottomValue array:

do
	{
		var index = Math.floor(Math.random() * window["bottomValue"].length);

		var bottomRandomValue = window["bottomValue"][index];

		window["bottomValue"].splice(index, 1);

		var divTileContainer = document.createElement("div");
		divTileContainer.setAttribute("class", "tile-container");

		window["contentContainer"].appendChild(divTileContainer);

		var innerTileContainerFront = document.createElement("div");
		innerTileContainerFront.class = "front";
		innerTileContainerFront.setAttribute("class", "front");

		var innerTileContainerBack = document.createElement("div");
		innerTileContainerBack.class = "back";
		innerTileContainerBack.setAttribute("class", "back");

		divTileContainer.appendChild(innerTileContainerFront);
		divTileContainer.appendChild(innerTileContainerBack);

		var NewTile = new Tile(bottomRandomValue, false, innerTileContainerBack, innerTileContainerFront, divTileContainer);

		window["tileContainer"].push(NewTile);

	}
	while(window["bottomValue"].length > 0);

 

 

To see if the user clicked a tile, I check for events and look for the Source Element and check it, if possible, against a different object. If their targets match, then I know the user clicked on two tiles. After that a check goes out to see whether their hiddenNumbers are a match.

 

 

When the tiles are a match it removes them from the game with a nice fade out: