API tools faq
paste
Advertisement
BABJ

Javascript Empty Array Problem

BABJ
Oct 27th, 2019
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- Memory Game -->
  4. <!-- Javascript to control flipping of images -->
  5. <html>
  6.    <head>
  7.       <meta charset = "utf-8">
  8.       <title>Memory Game</title>
  9.       <link rel="stylesheet" href="memoryCss.css">
  10.       <link rel="stylesheet"
  11.         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  12.        <link rel="stylesheet" href="table.css">
  13.         <link  rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aclonica&display=swap">
  14.      <script type='text/javascript'>
  15.       var imgArr = new Array(6);
  16.       var tblArr = new Array(12);
  17.       var cardImg;
  18.       var cardNum;
  19.       var cMatch =[[],[]];
  20.       var imgID;
  21.       var arrMatch;
  22.       var index;
  23.       //var match1;
  24.       //var match2;
  25.       //var matches;
  26.      
  27.       var defaultImage = "memImages/CardBack.png";
  28.       imgArr[0]="memImages/OFYellows.png"; //Array of all the images.
  29.       imgArr[1]="memImages/OGImg.png";
  30.       imgArr[2]="memImages/MSYell.png";
  31.       imgArr[3]="memImages/OFInn.png";
  32.       imgArr[4]="memImages/GCYellow.png";
  33.       imgArr[5]="memImages/YSLake.png"
  34.       var pic=0; // variable for changing images.
  35.       var pic=1; // variable for changing images.
  36.       var tblArrLen=tblArr.length;
  37.       tblArr = [imgArr[0],imgArr[0],imgArr[1],imgArr[1],imgArr[2],imgArr[2],imgArr[3],imgArr[3],imgArr[4],imgArr[4],imgArr[5],imgArr[5]];
  38.       shuffle(tblArr);
  39.       var clicked;
  40.       var noClickcount=0;
  41.   function changeimage(cardNum,cardImg)
  42.   {
  43.    if (pic==0)
  44.      {
  45.        pic=1;
  46.        document.getElementById(cardNum).src=cardImg;
  47.      
  48.      }
  49.    else
  50.      {
  51.        pic=0;
  52.        document.getElementById(cardNum).src=defaultImage;
  53.      }
  54.   }
  55.   function dragstart_handler(ev) {
  56.  // Add the target element's id to the data transfer object
  57.  ev.dataTransfer.setData("application/my-app", ev.target.id);
  58.  ev.dataTransfer.dropEffect = "move";
  59. }
  60. function dragover_handler(ev) {
  61.  ev.preventDefault();
  62.  ev.dataTransfer.dropEffect = "move"
  63. }
  64. function drop_handler(ev) {
  65.  ev.preventDefault();
  66.  // Get the id of the target and add the moved element to the target's DOM
  67.  var data = ev.dataTransfer.getData("application/my-app");
  68.  ev.target.appendChild(document.getElementById(data));
  69. }      
  70.  
  71. function shuffle(array) {
  72.   array.sort(() => Math.random() - 0.5);
  73. }
  74. function deClick(clicked) {
  75.          
  76.                  imgID = clicked;
  77.                  
  78.                  return imgID;
  79.                
  80.             }  
  81. var imIdx= deClick(clicked);
  82.  
  83. function findMatch(imIdx){
  84.    if (imIdx=="tblArr0"){
  85.    arrMatch=tblArr[0];
  86.     }
  87.     else if (imIdx=="tblArr1"){
  88.     arrMatch=tblArr[1];
  89.     }
  90.     else if (imIdx=="tblArr2"){
  91.     arrMatch=tblArr[2];
  92.     }
  93.     else if (imIdx=="tblArr3"){
  94.     arrMatch=tblArr[3];
  95.     }
  96.     else if (imIdx=="tblArr4"){
  97.     arrMatch=tblArr[4];
  98.     }
  99.     else if (imIdx=="tblArr5"){
  100.     arrMatch=tblArr[5];
  101.     }
  102.     else if (imIdx=="tblArr6"){
  103.     arrMatch=tblArr[6];
  104.     }
  105.     else if (imIdx=="tblArr7"){
  106.     arrMatch=tblArr[7];
  107.     }
  108.     else if (imIdx=="tblArr8"){
  109.     arrMatch=tblArr[8];
  110.     }
  111.     else if (imIdx=="tblArr9"){
  112.     arrMatch=tblArr[9];
  113.     }
  114.     else if (imIdx=="tblArr10"){
  115.     arrMatch=tblArr[10];
  116.     }
  117.     else if (imIdx=="tblArr11"){
  118.     arrMatch=tblArr[11];
  119.     }
  120.     return arrMatch;
  121.     }
  122.      var numMatch;
  123.      var count=1;
  124.      cMatch=[];
  125.     function isMatch(){
  126.        
  127.        if(noClickcount<=1){
  128.      
  129.        cMatch.unshift(arrMatch);}
  130.        if(noClickcount>=2){
  131.        cMatch.push(arrMatch);{
  132.        /* if cMatch[0]===cMatch[1]{
  133.       cMatch[0].draggable="true";
  134.        cMatch[0].draggable="true";*/
  135.        }
  136.        }
  137.        }
  138.        else{
  139.        cMatch[0].draggable="false";
  140.        cMatch[0].draggable="false";
  141.        }
  142.        // noClickcount++;
  143.        if(noClickcount>3){
  144.      
  145.        noClickcount=0;
  146.        
  147.        }
  148.        //cMatch=[];
  149.      /* if(noClickcount>=2){
  150.       if(cMatch[0].cardImg==cMatch[1].cardImg&&cMatch[0].cardNum!=cMatch[1].cardNum[1]{
  151.       numMatch++;
  152.       noClickcount=0;
  153.       cMatch = [];
  154.       }
  155.       }
  156.        /*{if (count==1){{
  157.        match[0]=findMatch(imIdx);
  158.      
  159.        }
  160.         count+=1;
  161.        
  162.        if (count==2){
  163.        match[1]=findMatch(imIdx);
  164.        }}
  165.        
  166.        {
  167.        if (match[0]==match[1]){
  168.        bMatch = true;}
  169.        else if (match[0]!=match[1])
  170.        {changeimage(match[0],imIdx);
  171.         changeimage(match[1],imIdx);
  172.         bMatch= false;
  173.        
  174.        }
  175.        else{}}
  176.        //do(
  177.        //count+=1;
  178.        //}while (count<2);
  179.        count=0;
  180.        return bMatch;*/
  181.        
  182.      
  183.      
  184.        
  185.     }
  186.     var bVal = isMatch();
  187.     function start(){
  188.     changeimage(cardNum,cardImg);
  189.     deClick(clicked);
  190.    
  191.     findMatch(imIdx);
  192.     isMatch();
  193.     }
  194.      window.addEventListener("load",start,false);
  195.      </script>
  196.    </head>
  197.    
  198. <body>
  199.    <div> <h1>Yellowstone Memory Game</h1>
  200.    
  201.    <br><br></div>
  202.    <table class="table">
  203.        <tbody class = "table"><tr class="success" ><td><img src="memImages/CardBack.png"; id="tblArr0"; onClick="deClick(this.id);changeimage('tblArr0',tblArr[0]); "
  204.         onClick="document.getElementById('tblArr0').src='tblArr[0]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  205.         <td><img src="memImages/CardBack.png"; id="tblArr1"; onClick="deClick(this.id);changeimage('tblArr1',tblArr[1]); "
  206.         onClick="document.getElementById('tblArr1').src='tblArr[1]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  207.         <td><img src="memImages/CardBack.png"; id="tblArr2"; onClick="deClick(this.id);changeimage('tblArr2',tblArr[2]); "
  208.         onClick="document.getElementById('tblArr2').src='tblArr[2]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  209.         <td><img src="memImages/CardBack.png"; id="tblArr3"; onClick="deClick(this.id);changeimage('tblArr3',tblArr[3]); "
  210.         onClick="document.getElementById('tblArr3').src='tblArr[3]';"draggable="true" ondragstart="dragstart_handler(event)"></td></tr>
  211.        
  212.         <tr class="danger"><td><img src="memImages/CardBack.png"; id="tblArr4"; onClick="deClick(this.id);changeimage('tblArr4',tblArr[4]); "
  213.         onClick="document.getElementById('tblArr4').src='tblArr[4]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  214.         <td><img src="memImages/CardBack.png"; id="tblArr5"; onClick="deClick(this.id);changeimage('tblArr5',tblArr[5]); "
  215.         onClick="document.getElementById('tblArr5').src='tblArr[5]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  216.         <td><img src="memImages/CardBack.png"; id="tblArr6"; onClick="deClick(this.id);changeimage('tblArr6',tblArr[6]); "
  217.         onClick="document.getElementById('tblArr6').src='tblArr[6]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  218.         <td><img src="memImages/CardBack.png"; id="tblArr7"; onClick="deClick(this.id);changeimage('tblArr7',tblArr[7]); "
  219.         onClick="document.getElementById('tblArr7').src='tblArr[7]';"draggable="true" ondragstart="dragstart_handler(event)"></td></</tr>
  220.        
  221.         <tr class="info"><td><img src="memImages/CardBack.png"; id="tblArr8"; onClick="deClick(this.id);changeimage('tblArr8',tblArr[8]); "
  222.         onClick="document.getElementById('tblArr8').src='tblArr[8]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  223.         <td><img src="memImages/CardBack.png"; id="tblArr9"; onClick="deClick(this.id);changeimage('tblArr9',tblArr[9]); "
  224.         onClick="document.getElementById('tblArr9').src='tblArr[9]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  225.         <td><img src="memImages/CardBack.png"; id="tblArr10"; onClick="deClick(this.id);changeimage('tblArr10',tblArr[10]); "
  226.         onClick="document.getElementById('tblArr10').src='tblArr[10]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
  227.         <td><img src="memImages/CardBack.png"; id="tblArr11"; onClick="deClick(this.id);changeimage('tblArr11',tblArr[11]); "
  228.         onClick="document.getElementById('tblArr11').src='tblArr[11]';"draggable="true" ondragstart="dragstart_handler(event)"></td></</tr>
  229.        
  230.         </tbody>
  231.         </table>
  232.        
  233.        
  234.     <div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"style="height:280px;width:100%;">Drop Zone</div>
  235. <p id = "success"></p> 
  236.  
  237. </body>
  238. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!