Javascript memory, but with fractions

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>
    // Scripted By Adam Khoury in connection with the following video tutorial:
    // http://www.youtube.com/watch?v=c_ohDPWmsM0
    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;
                    // Clear both arrays
                    memory_values = [];
                    memory_tile_ids = [];
                    // Check to see if the whole board is cleared
                    if(tiles_flipped == memory_array.length){
                        alert("Board cleared... generating new board");
                        document.getElementById('memory_board').innerHTML = "";
                        newBoard();
                    }
                } else {
                    function flip2Back(){
                        // Flip the 2 tiles back over
                        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 = "";
                        // Clear both arrays
                        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>
+4
source share
2 answers

Good. Currently, the game consists in comparing string values, such as 'E'=='E', however, you are dealing with percentages / fractions / decimals.

You need to find a way to convert all these values ​​into one type so that they can be compared with each other. Now this type of preference will be decimal.

, , . eval [ ], "3/4" 0,75.

, , / .

eval('3/4') == '0.75'  //true
eval('3/4') === '0.75' //false

. . "50%" 0,5:

parseFloat(('50%')/100.0;  //0.5

, , , . :

function endsWith(str, suffix) { return str.slice(-suffix.length) === suffix }

if(endsWith(memory_values[0], '%')) {
    memory_values[0] = parseFloat(memory_values[0])/100.0;
}
if(endsWith(memory_values[1], '%')) {
    memory_values[1] = parseFloat(memory_values[1])/100.0;
}

memory_values[0] memory_values[1] .

( eval )

if(eval(memory_values[0]) == eval(memory_values[1])){
    ...
}

: http://pastebin.com/cwSjrsBD -: https://dl.dropboxusercontent.com/u/182097009/working.html

: eval('1/3') != '0.33' .

0

, .

  • memory_array memory_array2 .
  • , , .
  • .
  • .
  • isCombination().
  • title .
  • newBoard , , - .

// Scripted By Adam Khoury in connection with the following video tutorial:
// http://www.youtube.com/watch?v=c_ohDPWmsM0
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'],
    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'],
    memory_values = [],
    memory_tile_ids = [],
    tiles_flipped = 0,
    actualMemory;

Array.prototype.getShuffledIndices = function () {
    var indices = Array.apply(Array, { length: this.length }).map(function (_, i) { return i; }),
        i = this.length, j, temp;
    while (--i) {
        j = Math.random() * i | 0;
        temp = indices[j];
        indices[j] = indices[i];
        indices[i] = temp;
    }
    return indices;
}

function newBoard(memory) {
    if (memory) {
        actualMemory = memory;
    }
    tiles_flipped = 0;
    document.getElementById('memory_board').innerHTML = actualMemory.getShuffledIndices().map(function (a) {
        return '<div title="' + a + '" id="tile_' + a + '" onclick="memoryFlipTile(this, ' + a + ')"></div>';
    }).join('');
}
function memoryFlipTile(tile, val) {

    function isCombination(a, b) {
        if (a + 1 === b || b + 1 === a) {
            return (a + b - 1) % 4 === 0;
        }
    }
    function flip2Back() {
        // Flip the 2 tiles back over
        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 = "";
        // Clear both arrays
        memory_values = [];
        memory_tile_ids = [];
    }

    if (tile.innerHTML == "" && memory_values.length < 2) {
        tile.style.background = '#FFF';
        tile.innerHTML = actualMemory[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 (isCombination(memory_values[0], memory_values[1])) {
                tiles_flipped += 2;
                // Clear both arrays
                memory_values = [];
                memory_tile_ids = [];
                // Check to see if the whole board is cleared
                if (tiles_flipped == memory_array.length) {
                    alert("Board cleared... generating new board");
                    document.getElementById('memory_board').innerHTML = "";
                    newBoard();
                }
            } else {
                setTimeout(flip2Back, 700);
            }
        }
    }
}
// call with the wanted memory, in this case it is possible to select
// between memory_array and memory_array2
newBoard(memory_array2);
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;
}
<div id="memory_board"></div>
Hide result
0

Source: https://habr.com/ru/post/1612136/


All Articles