Announcement

Collapse
No announcement yet.

Javascript making me pull hair.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript making me pull hair.

    I've been making a small card game using javascript to keen my leet skills and hopefully (end result) produce a small advertising game for a local company. I've tried everything, and I'm at my ropes end... I keep getting object and undefined errors and for the life of me I can't figure out why:
    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Card Demo</title>
    <!--<script type="text/javascript" language="javascript" src="cardClass.js"></script>-->
    
    <script type="text/javascript" language="javascript">
    /* Bool compare of the colors */
    function cardCompare(cardOne, cardTwo) {
    	if (cardOne.color == cardTwo.color)
    		return true;
    	else
    		return false;
    }
    
    /* Removes the cards from play when they match */
    function cardObj_cardRemove() {
    	document.(this.id).visibility='hidden';
    }
    
    /* Resets the image if they don't match */
    function cardObj_cardReset() {
    	document.(this.id).src=this.off.src;
    }
    
    /* Create the mouse over effect */
    function cardObj_cardActivate() {
    	document.(this.id).src=this.on.src;
    }
    
    /* Creates the card object. */
    function cardObj(color, id) {
    	this.color = color;
    	this.id = id;
    	this.off = new Image();
    	this.on = new Image();
    	this.off.src = 'images/off.gif';
    	this.on.src = 'images/'+color+'_on.gif';
    
    	this.remove = cardObj_cardRemove;
    	this.activate = cardObj_cardActivate;
    	this.reset = cardObj_cardReset;
    }
    
    /* OnClick handler that runs the compare */
    var tempCard=undefined;
    
    function cardClick(card) {
    	card.activate;
    	if (tempCard==undefined) {
    		tempCard=card;
    	}
    	else {
    		if (cardCompare(tempCard,card)) {
    			tempCard.remove;
    			card.remove;
    			tempCard=undefined;
    			alert('Match')
    		}
    		else {
    			card.reset;
    			tempCard.reset;
    			tempCard=undefined;
    			alert('No Matches')
    		}
    	}
    }
    
    /* Starts the game and timer that checks for completion */
    function startGame() {
    }
    
    	/* Generate the cards */
    	card1 = new cardObj('red','card1');
    	card2 = new cardObj('red','card2');
    	card3 = new cardObj('blue','card3');
    	card4 = new cardObj('blue','card4');
    	card5 = new cardObj('yellow','card5');
    	card6 = new cardObj('yellow','card6');
    	card7 = new cardObj('green','card7');
    	card8 = new cardObj('green','card8');
    	card9 = new cardObj('brown','card9');
    	card10 = new cardObj('brown','card10');
    	card11 = new cardObj('pink','card11');
    	card12 = new cardObj('pink','card12');
    	card13 = new cardObj('black','card13');
    	card14 = new cardObj('black','card14');
    	card15 = new cardObj('white','card15');
    	card16 = new cardObj('white','card16');
    
    </script>
    <style type="text/css">
    img {width:155px; height:110px;}
    </style>
    </head>
    <body>
    	<table>
    		<tr>
    			<td colspan="8">Card Game Demo</td>
    		<tr>
    			<td><img id="card1" src="images/off.gif" name="card1" onclick="cardClick(card1)"/></td>
    			<td><img id="card2" src="images/off.gif" name="card2" onclick="cardClick(card2)"/></td>
    			<td><img id="card3" src="images/off.gif" name="card3" onclick="cardClick(card3)"/></td>
    			<td><img id="card4" src="images/off.gif" name="card4" onclick="cardClick(card4)"/></td>
    		</tr>
    		<tr>
    			<td><img id="card5" src="images/off.gif" name="card5" onclick="cardClick(card5)"/></td>
    			<td><img id="card6" src="images/off.gif" name="card6" onclick="cardClick(card6)"/></td>
    			<td><img id="card7" src="images/off.gif" name="card7" onclick="cardClick(card7)"/></td>
    			<td><img id="card8" src="images/off.gif" name="card8" onclick="cardClick(card8)"/></td>
    		</tr>
    		<tr>
    			<td><img id="card9" src="images/off.gif" name="card9" onclick="cardClick(card9)"/></td>
    			<td><img id="card10" src="images/off.gif" name="card10" onclick="cardClick(card10)"/></td>
    			<td><img id="card11" src="images/off.gif" name="card11" onclick="cardClick(card11)"/></td>
    			<td><img id="card12" src="images/off.gif" name="card12" onclick="cardClick(card12)"/></td>
    		</tr>
    		<tr>
    			<td><img id="card13" src="images/off.gif" name="card13" onclick="cardClick(card13)"/></td>
    			<td><img id="card14" src="images/off.gif" name="card14" onclick="cardClick(card14)"/></td>
    			<td><img id="card15" src="images/off.gif" name="card15" onclick="cardClick(card15)"/></td>
    			<td><img id="card16" src="images/off.gif" name="card16" onclick="cardClick(card16)"/></td>
    		</tr>
    	</table>
    </body>
    <script language="javascript">
    </script>
    </html>
    Code was originally in the include, but I've pulled it for development. Mind you, I've gone through SEVERAL iterations of syntax calls for the DOM objects, some seemed to work where others didn't. This is where I'm at now. Shoot me in the head.

    *Edit

    Updated with code that gives me no errors, but I don't seem to be doing the image swapping correctly.
    Last edited by Iceberg; 07-31-2007, 01:08 AM.
    USAR

  • #2
    Re: Javascript making me pull hair.

    Nevermind! I got up early this morning and restructured it into more of a class. The basics work for now!
    USAR

    Comment

    Connect

    Collapse

    TeamSpeak 3 Server

    Collapse

    Advertisement

    Collapse

    Twitter Feed

    Collapse

    Working...
    X