title: Memory matching card game
body: <p>I have 11 images:
  5 cards with red numbers (1-5) images.
  5 cards with black numbers (1-5) images.
  1 cover card image.</p>
  
  <p>using notepad++, I want to create a VERY simple card memory game. using basic or simple JavaScript techniques. </p>
  
  <p>I have tried if else statements, but am not an expert, as I am still learning JavaScript. I tried making the variables equal to multiple values, but it didn't work. </p>
  
  <pre><code>
  &lt;html&gt;
  &lt;head&gt;&lt;meta charset="utf-8"&gt;
  &lt;title&gt;Memroy card game&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  
  
  &lt;a href="#" onClick = "turn_card(0);"&gt;&lt;img id="0" src ="card_cover.png" &gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(1);"&gt;&lt;img id="1" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(2);"&gt;&lt;img id="2" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(3);"&gt;&lt;img id="3" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(4);"&gt;&lt;img id="4" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;&lt;br&gt;
  &lt;a href="#" onClick = "turn_card(5);"&gt;&lt;img id="5" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(6);"&gt;&lt;img id="6" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(7);"&gt;&lt;img id="7" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(8);"&gt;&lt;img id="8" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  &lt;a href="#" onClick = "turn_card(9);"&gt;&lt;img id="9" src ="card_cover.png"&gt;&lt;/a&gt;&amp;nbsp;
  
  
  &lt;script&gt;
  
   var card = new Array(10);
  
  
         card[0] = "b5.png";
         card[1] = "r1.png";
         card[2] = "b1.png";
         card[3] = "b2.png";
         card[4] = "r2.png";
         card[5] = "r3.png";
         card[6] = "r4.png";
         card[7] = "b3.png";
         card[8] = "r5.png";
         card[9] = "b4.png";
  
      var number = new Array(5, 1, 1, 2, 2, 3, 4, 3, 5, 4); //card number
      var ura_omote = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0) //front and back flags
      var times = 0;      //Number of cards flipped
  
      var front_card_num = new Array ( 10, 10 );  //positions of flipped cards
  number[5]=card[0],card[8];
  number[4]=card[9], card[6];
  number[3]=card[7],card[5];
  number[2]=card[3],card[4];
  number[1]=card[1],card[2];
  
  
   function turn_card (g) {
  document.images[g].src=card[g];
  
  }
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is how I want the processing to go like:</p>
  
  <p>(step 1): start</p>
  
  <p>(step 2): is the picture "cover card"? ...
  if[No] ---> [processing is over]
  if[Yes]--->Change the flag on the front and back. Set the number of the card you flipped.</p>
  
  <p>(step 3): is it the second picture AKA the "second card" (any picture)?...
  if[No]--->[processing is over]</p>
  
  <p>(step 4): if[Yes]-->Does the number of the second card match with first card's number?
  if[yes]it displays as "You got it!". Then, Reset the number of turns.</p>
  
  <p>if[No]--->Change the flag on the front and back to reverse the display image "Sorry". Then, Reset the number of turns.</p>
  
  <p>OVER.</p>