Javascript Array of images - memory board game

Question

Hi I've got this code which is a memory board game. I would like to know if its possible to change the letters and put images instead. I am completely new to javaScript and I am trying to learn by editing and understanding open source code.. any help would be appreciated thanks!

This is the Javscript code:

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_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]+'\')"></div>';
    }
    document.getElementById('memory_board').innerHTML = output;
}

function memoryFlipTile(tile,val){
    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(images/logo.jpg) no-repeat';
                    tile_1.innerHTML = "";
                    tile_2.style.background = 'url(images/logo.jpg) no-repeat';
                    tile_2.innerHTML = "";
                    // Clear both arrays
                    memory_values = [];
                    memory_tile_ids = [];
                }
                setTimeout(flip2Back, 700);
            }
        }
    }
}

This is the HTML Code

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>




</head>

<body>

<div id="memory_board"> </div>
<script> newBoard(); </script>

</body>
</html>

And finally this is the CSS code

div#memory_board{
    background: #CCC;
    border: #999 1px solid;
    width: 800px;
    height: 540px;
    padding: 24px;
    margin: 0px auto;
}

div#memory_board > div{
    background: url(images/logo.jpg) no-repeat;
    border: #000 1px solid;
    width: 71px;
    height: 71px;
    float: left;
    margin: 10px;
    padding: 20px;
    font-size: 64px;
    cursor: pointer;
    text-align:center;
}

Didn't you create an account yesterday asking how you could load the script after pageload without having to call onload? — Muqito
– Muqito, Commented Jun 14, 2014 at 10:08
No I didn't. This code is available online so it could be anyone — user3740112
– user3740112, Commented Jun 14, 2014 at 10:13

Gio · Accepted Answer · 2017-02-03 12:08:24Z

2

Easy way to change your code to do what you want - instead of

tile.innerHTML = val;

do:

tile.innerHTML = '<img src="' + val + '.png"/>';

which should work if you have A.png, B.png and so on in the same location as index.html.

If you wanted to go more in-depth with it, I wrote a tutorial about doing this with an html5 framework some time ago (apologies for linking to our own website)

edited Feb 3, 2017 at 12:08

answered Jun 14, 2014 at 10:47

Gio

8391 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3740112 Over a year ago

Thank you! That worked. Thanks for the link aswell I will check it out! :-)

Collectives™ on Stack Overflow

Javascript Array of images - memory board game

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related