Your bird site needs some interactivity. Create an interactive concentration/mat

Question

Your bird site needs some interactivity.

Create an interactive concentration/matching bird card game.

You must create 10 cards as images, all the same size and one ‘backside’ card image.

The dealer should deal 10 cards at the start of the game.

When the card is turned over, the user scores a point.

Keep track of the total points and display the total to the user each time they score a point and at the end of the game.

The difference here is that this is a JavaScript application. So all of the interactivity must be handles by the browser. You could use the Canvas element if you choose, but it’s not required.

** this is only info i have, i just need a basic structre with guidlines provided*

Explanation / Answer

My understanding of your requirement is that you show total to place holders that can be filled with an image. You will have only 5 unique images and each image repeat twice. Then let the user click to a place holder to show the image assigned to that place. Let the user make another click and show 2nd image. If they both match he scores a point and images are disabled. Else both images are hidden again. Uses clicks again till he matches all images.

Write Javascript function listener and match with 3 global variables click1, click2 initiated to undefined and score initiated to 0.

Script code with comments is below

<script>
var click1;
var click2;
var score = 0;

function match (e1,e2) {
   if (e1==1 && e2==5) {
       return true;
   }

   if (e1==3 && e2==6) {
       return true;
   }

   if (e1==2 && e2==10) {
       return true;
   }

   if (e1==9 && e2==7) {
       return true;
   }

   if (e1==4 && e2==8) {
       return true;
   }

   return false;
}

function listner(event) {
  
   var element = event.target || event.srcElement;
  
   if (!click1) { // if click1 was not assigned assign the id of the div
  
       click1= element.id;

       // show the image by removing hidden class
       document.getElementById(click1).className.replace(/hidden/,'');
  
   } else {

       click2 = element.id;

       // show the image by removing hidden class
       document.getElementById(click2).className.replace(/hidden/,'');

       if (match(click1,click2)) {
           // if the similar images we decided match score is incremented
           score = score+1;
          
           // remove elements
           document.getElementById(click1).remove();
           document.getElementById(click2).remove();

           // alert the player
           alert("Your score: "+score);
       }
      
       // make them undefined for next click and hide the images by adding hidden class to the element
       document.getElementById(click1).className += " hidden";
       document.getElementById(click2).className +=" hidden";
       click1=undefined;
       click2=undefined;

   }
}

</script>

Related Questions

Navigate

• Browse (All)
• Browse Y
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.