Memory Game Template




Memory Game Template


This is a fun game to share with friends while building your Programming Skills.

Source Code


HTML5 CSS and JavaScript


<!DOCTYPE html>
<html>
    <head>
        <title>Memory Game</title>
        <style>
        /*change board bg color and size in top section */ 
/*change box and font size in bottom section */ 
            div#board{
    background: #00ff7f;
    border:#0000FF 1px solid;
    width:320px;
    height:340px;
    padding:15px;
    margin:0px auto;
}

div#board > div{ 
    border:#00838F 1px solid;
    width:70px;
    height:70px;
    float:left;
    margin:2px;
    padding:2px;
    font-size:37px;
    cursor:pointer;
    text-align:center;
}

        </style>
    </head>
     <!-–change background color here -–>
         <body bgcolor="gold">
        <div id="title" class="text-center">
         <!–-change title here-–>
    <h1 style="text-align: center">Memory Game</h1>
  </div>
  
<div id="board"></div>
  
  <script>
      //add matching object or words to this array 
//simply add more matching objects for larger game
var array = ["🙂","🙂","😍","😍","😎","😎","🤓","🤓","😀","😀","😂","😂","🤗","🤗","🤣","🤣"];
var values = [];
var ids = [];
var flipped = 0;
Array.prototype.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 = '';
    array.shuffle();
    for(var i = 0; i < array.length; i++){
        output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+array[i]+'\')"></div>';
    }
    document.getElementById('board').innerHTML = output;
}

function memoryFlipTile(tile,val){
    if(tile.innerHTML == "" && values.length < 2){
        tile.style.background = '#FFF';
        tile.innerHTML = val;
      if(values.length == 0){
            values.push(val);
            ids.push(tile.id);
        } else if(values.length == 1){
            values.push(val);
            ids.push(tile.id);
      if(values[0] == values[1]){
                tiles_flipped += 2;
            
                values = [];
                ids = [];
                
      if(tiles_flipped == array.length){
//change alert message here               
   alert("Great Job!!! 🙂 Play again?");
                    document.getElementById('board').innerHTML = "";

newBoard();
  }  } else {
       function flip2Back(){
                
 var tile_1 = document.getElementById(ids[0]);
 var tile_2 = document.getElementById(ids[1]);
                  
    tile_1.innerHTML = "";
    tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
    tile_2.innerHTML = ""; 
    tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
       values = [];
       ids = [];
                }
                setTimeout(flip2Back, 800);
            }}}}

  </script>
  <script>newBoard();</script>
  <!--adapted from original https://github.com/mavi888/memory_game_js-->
    </body>
</html>





Share with Friends


Twitter Facebook Google LinkedIn Email Pinterest Reddit StumbleUpon TumblrWhatsApp



Free Code Examples:







Comments

Post a Comment

Popular posts from this blog