There are several problems with the code below. The original code was written by a gentleman named Adam Khoury, and I tried to find it, but I can’t do it. The code creates a game with visual memory with the letters "from" to "L". I wanted to change it in relation to fractions. Thus, "1/4" and 25% will correspond. Or "33%" and "0.33", etc.
I am above my head. I am very rusty in javascript, and although I understand most of what is happening, I am completely lost on how to make it work.
My solution was as follows. I added a new array "memory_array2" with the corresponding fractions / decimals / percent values in pairs. I am analyzing memory_array and memory_array2 for the memoryFlipTile function. The idea was to "show" the second array, but use the values from the first array to match the corresponding pairs.
I tried replacing “val” in line 55 with val2, and although this will replace the values on the board with array2, it: a) creates them next to each other, and b) even if the corresponding fragments are upside down, they do not stay upside down.
I also don't quite understand what the function memory_values and memory_values.length are.
I fully understand how the code clears arrays when two cards are flipped, checks if the board is cleared and creates a new board, and flips the cards back if they do not match.
Your help will be greatly appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:795px;
height:340px;
padding:10px;
margin:0px auto;
}
div#memory_board > div{
background: url(tile_bg.jpg) no-repeat;
border:#000 1px solid;
width:90px;
height:43px;
float:left;
margin:10px;
padding:10px;
font-size:36px;
cursor:pointer;
text-align:center;
}
</style>
<script>
var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
var memory_array2 = ['13%','0.13','25%','1/4','1/3','0.33','0.7','70%','.5','1/2','1/8','12.5%','2/5','40%','3/4','75%','3/5','0.60','20%','0.20','1/10','10%','30%','0.30'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\',\''+memory_array2[i]+'\')"></div>';
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val,val2){
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
memory_values = [];
memory_tile_ids = [];
if(tiles_flipped == memory_array.length){
alert("Board cleared... generating new board");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = "";
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
</script>
</head>
<body>
<div id="memory_board"></div>
<script>newBoard();</script>
<p id="test"></p>
</body>
</html>