Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript-Jquery

    Am creating a jquery card game application. The problem is that i need to show using alert the draggable card but unfortunately the alert message shows the next card. Who can help me please?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="icon" type="image/png" href="c://Users/user/Desktop/JavaScript/favicon.png"/>
    <title>
    MemoryX
    </title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    <script src="jquery.ui.touch-punch.min.js"></script>
    </script>
    <script> 
    var arr1=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
    var deck=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
      var me=[1,1,1,1];
      var pc=[1,1,1,1];
     var xame=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
      var images=new Array("ace.jpg","joker.png","papas.jpg","queenpikk.jpg");
     // var me=new Array();
      //var pc=new Array();
      for (var i=0;i<4;i++)
    {
    //finds the cards of the real player
    var randomnum=Math.floor(Math.random()*53);
    me[i]=arr1[randomnum];
    }
    for (var i=0;i<4;i++)
    {
    //finds the cards of the pc player
     var randomnum=Math.floor(Math.random()*53);
    pc[i]=arr1[randomnum];
    }
    for (var i=0;i<53;i++)
    {
    //finds the cards of the deck
     var randomnum=Math.floor(Math.random()*53);
    xame[i]=arr1[randomnum];
    }
    
    
     $(document).ready(function(){
      
     //Make element droppable
     
    	     $("#trapula").draggable({
          //cancel: "a.ui-icon", // clicking an icon won't initiate dragging
          revert: "invalid", // when not dropped, the item will revert back to its initial position
          //containment: "document",
          helper: "clone",
          //cursor: "move"
    	
        });	
    
    	$("#start").click(function () {
    	$("#1").fadeOut();
        $("#2").fadeIn(); 
    //checks the #no to bring the aces
    if(me[0]==1){		
     document.getElementById("first").src = "ace.jpg";
    	}   
    	
    if(me[3]==1){		
     document.getElementById("fourth").src = "ace.jpg";
    	}
    	
     //checks the #no to bring the 2's
    if(me[0]==2){		
     document.getElementById("first").src = "two.png";
    	}   
    	
    if(me[3]==2){		
     document.getElementById("fourth").src = "two.png";
    
    	}
    if(me[0]==3){		
     document.getElementById("first").src = "three.jpg";
    
    	}   
    if(me[3]==3){		
     document.getElementById("fourth").src = "three.jpg";
    	}
    if(me[0]==4){		
     document.getElementById("first").src = "card_41.png";
    	}   
    if(me[3]==4){		
     document.getElementById("fourth").src = "card_41.png";
    	}	
    	
    	if(me[0]==5){		
     document.getElementById("first").src = "card_42.png";
    	}   
    	
    if(me[3]==5){		
     document.getElementById("fourth").src = "card_42.png";
    	}
    	
    	//checks the #no to bring the 6's
    	if(me[0]==6){		
     document.getElementById("first").src = "six.gif";
    
    	}   
    if(me[3]==6){		
     document.getElementById("fourth").src = "six.gif";
    
    	}
    		//checks the #no to bring the 7's
    if(me[0]==7){		
     document.getElementById("first").src = "seven.jpg";
    
    	}   
    if(me[3]==7){		
     document.getElementById("fourth").src = "seven.jpg";
    
    	}
    			//checks the #no to bring the 8's
    if(me[0]==8){		
     document.getElementById("first").src = "eight.jpg";
    
    	}   
    if(me[3]==8){		
     document.getElementById("fourth").src = "eight.jpg";
    	}
    	if(me[0]==9){		
     document.getElementById("first").src = "card_46.png";
    
    	}   
    if(me[3]==9){		
     document.getElementById("fourth").src = "card_46.png";
    	}
    				//checks the #no to bring the 10's
    if(me[0]==0){		
     document.getElementById("first").src = "ten.jpg";
    
    	}   
    if(me[3]==0){		
     document.getElementById("fourth").src = "ten.jpg";
    
    	}
    //checks the #no to bring the jokers
    if(me[0]==25){  	
    	document.getElementById("first").src = "joker.png";
    }
    if(me[3]==25){  	
    	document.getElementById("fourth").src = "joker.png";
    }
    
    
    //hide visible cards after 4seconds
    $("#2").show().delay('4000').hide('fast');
    $("#1").show().delay('4000').fadeIn();
    
    //show a set of cards for both players to pull
    $("#3").fadeIn();
    
    });	 
    
      // while deck is pressed once, the players take both a card 
     // and can replace it with one of their cards optionally 
    	 $("#trapula").bind("drag", function(){
    	   
    		for(var i=0;i<=53;i++)
    //make a deck for players to replace the cards with theirs
    {
    var randomn=Math.floor(Math.random()*53);
    xame[i]=deck[randomn];
    }
        //loop to show each time different card from deck
    	for(var i=0;i<=53;i++)
    	{			
    	//shows the cards of deck
    	if(xame[i]==0){		
     document.getElementById("trapula").src = "ten.jpg";
    	}	   
    if(xame[i]==1){		
     document.getElementById("trapula").src = "ace.jpg";
    	}
    	   
    if(xame[i]==2){		
     document.getElementById("trapula").src = "two.png";
    	}   
    if(xame[i]==3){		
     document.getElementById("trapula").src = "card_14.png";
    	}
    if(xame[i]==4){		
     document.getElementById("trapula").src = "card_41.png";
    	}   
    if(xame[i]==5){		
     document.getElementById("trapula").src = "card_42.png";
    	}	
    	if(xame[i]==6){		
     document.getElementById("trapula").src = "card_43.png";
    
    	}   
    if(xame[i]==7){		
     document.getElementById("trapula").src = "card_44.png";
    
    	}	
    	if(xame[i]==8){		
     document.getElementById("trapula").src = "eight.jpg";
     
    	}
    	if(xame[i]==9){		
     document.getElementById("trapula").src = "card_46.png";
     
    	}
    //checks the #no to bring the jokers
    if(xame[i]==25){  	
    	document.getElementById("trapula").src = "joker.png";
    
    }	
    //when the player choose the card position #1 from the deck
    // it transfer it to the player
    //it is changed the next card, not the draggable card
    }
    $( "#hidden1" ).droppable({
    		 drop: function() 
    		 {		 		
    		 
    	alert('The first card changed to:'+me[0]);
    		 }
    		});
    $( "#hidden2" ).droppable({
    		 drop: function() 
    		 {
    		
    		 alert('The 2nd card changed'+me[1]);
    		
    		 }
    		});	
    $( "#hidden3" ).droppable({
    		 drop: function() 
    		 {
    		
    		alert('The 2nd card changed'+me[2]);
    		 }
    		});	
    $( "#hidden4").droppable({
    		 drop: function() 
    		 {
    		 
    			alert('The 2nd card changed'+me[3]);
    		 }
    		});
    			 	
    
    	 
    });	
     
    $("#stop").click(function () {
         $("#2").fadeOut();
    	 $("#1").fadeIn();
    
      });	
    
    //show the cards
    //$("#deckCard").click(function (){
    	// for(var i;i<4;i++){
    //document.write('My card is:'+me[i]);
    //}
    $("#deckCard").click(function () {
      
      });
    });	
    	
        	   for (var i=0;i<4;i++)
    {
    
    //show the cards
    document.write(" My card is: "+me[i]);
    document.write("<br/>");
    document.write(" Your card is: "+pc[i]);
    document.write("<br/>");
    
    }
    </script>
    
    <script type="text/javascript"></script><link rel='stylesheet' type='text/css' href='/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.css' /></head>
    <body><script type='text/javascript' language='javascript' src='/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&amp;0=0&amp;0=0'></script>
    <p id="0">
    
    </p>
    <button id="start"> Start</button>
    <button id="stop"> Stop</button>
    <button id="deckCard">New Card</button>
    
    <p id="1" >
      <img src="cardb.png" id="hidden1" width="100px" height="100px" />
     <img src="cardb.png" id="hidden2" width="100px" height="100px" />
     <img src="cardb.png" id="hidden3" width="100px" height="100px" />
     <img src="cardb.png" id="hidden4" width="100px" height="100px" />
     
    </p>
    
    <div id="2" style="display: none;"> 
    
     <img src="papas.jpg" id="first" width="100px" height="100px" />
     <img src="cardb.png" id="second" width="100px" height="100px" />
     <img src="cardb.png" id="third" width="100px" height="100px" />
     <img src="papas.jpg" id="fourth" width="100px" height="100px" />
     <img src="joker.png" id="hidden" width="100px" height="100px" style="display:none">
     
    </div>
    
    <div id="3" style="display: none;">
    <img src="cardb.png" id="trapula" width="100px" height="100px"/>
    
    </div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Difficult for me to understand the game based on the code, but here is something for you to consider while you debug it:

    If your array element me[0] is displaying the wrong card, then it means one of two things (...or both, or... ):
    1. me[0]'s value has been modified to reference a different card
    2. me[0] has been shifted out of the array, placing me[1] at position me[0]


    Either way, it must ne the result of a bug in your code: DEBUG! DEBUG! DEBUG!

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    1. ID's cannot start with a number
    2. you should only use document.write on page load, otherwise it will rewrite the html document once you click one of those button, and then you entire page will break. look at javscripts innerHTML, or jQuery's .html()

    theres more but im tired

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sbhmf View Post
    Difficult for me to understand the game based on the code, but here is something for you to consider while you debug it:

    If your array element me[0] is displaying the wrong card, then it means one of two things (...or both, or... ):
    1. me[0]'s value has been modified to reference a different card
    2. me[0] has been shifted out of the array, placing me[1] at position me[0]


    Either way, it must ne the result of a bug in your code: DEBUG! DEBUG! DEBUG!
    Quote Originally Posted by DanInMa View Post
    1. ID's cannot start with a number
    2. you should only use document.write on page load, otherwise it will rewrite the html document once you click one of those button, and then you entire page will break. look at javscripts innerHTML, or jQuery's .html()

    theres more but im tired
    Can you tell me specific correction that i can do?

  • #5
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sbhmf View Post
    Difficult for me to understand the game based on the code!
    Sorry for the double post but i couldn't edit the previous one.

    I need to put the last element of the array xame[] in the me[0] if it is draggable in the first card, me[1] in the second card etc...

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    document.write is dead - it is only needed for Netscape 4 and earlier.

    alert is for debugging only - that's why is displays extra checkboxes in most browsers.

    A long series of if statements comparing the same field to different values is better written as a switch statement. Where the statement it runs is the same except for the value being assigned the code would be better rearranged to use a single statement and an array instead of the long series of if statements.

    JavaScript belongs at the bottom of the page just before the </body> tag.

    I would recommend completely rewriting that code and testing it a piece at a time making sure each piece works before moving on to the next. To do what you want that script to do only requires about 1/5 to 1/4 the amount of code that you currently have.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you give me specifically which part of my code need to be replaced, removed or deleted?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •