Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next.
I understand that I need some functions to handle the clicking of two flags at a time and then check if they match each other. Any suggestions on how I can accomplish this? Please keep in mind that I am very new to all of this.
(function() {
'use strict';
var flagTarget1 = document.getElementById('flag1');
var flagTarget2 = document.getElementById('flag2');
var i;
var j;
//Function for shuffling an array
Array.prototype.shuffle = function() {
var input = this;
for (var i = input.length - 1; i >= 0; i--) {
var randomIndex = Math.floor(Math.random() * (i + 1));
var itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
return input;
}
var swedishFlag = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
// Code for other flags omitted for brevity
// List of classes
var class1 = ['sweden', 'litauen', 'japan', 'tyskland', 'elfenbenskusten', 'sweden', 'litauen', 'japan', 'tyskland', 'elfenbenskusten']
// List of flags
var flaglist = [swedishFlag, japanFlag, litauenFlag, elfenbenskustenFlag, tysklandFlag, swedishFlag2, japanFlag2, litauenFlag2, elfenbenskustenFlag2, tysklandFlag2];
// Shuffling the flag list
flaglist.shuffle();
class1.shuffle();
// Rendering flags on the screen
// Event listener code omitted for brevity
})();
After implementing some advice I received, I managed to make part of the game work. When two matching flags are found, a "congratulations" message is displayed. However, I still need help figuring out how to flip the cards back over if they don't match while keeping them visible if they do match. Any guidance would be highly appreciated.
Edit: I really appreciate the assistance so far, but I have a few more hurdles to overcome before the game runs smoothly.
The program mistakenly identifies identical class names within flagQueue[0] and flagQueue[1]. I used console.log(flagQueue) to investigate and discovered this
[div#flagga0.ruta.hidden, div#flagga5.ruta.hidden]
Congratulations it's a pair (even though it isn't)
At the start of pickFlag(), the first action taken is to hide the flag, even when the initial flag has been clicked. This results in all subsequent flags being hidden as well. Is there a way to compare the hidden flag with its original state before being clicked?
fiddle: https://jsfiddle.net/b05sdy9o/
Thank you once again!