I See Cards Game Part 4 - Playability

by trochiml

HTML

<body onload="loadCards()">
    <div class="gametitle">I See Cards Game</div><br/>
    <div class="instructions">
    Instructions: This is a game to play while riding in the car.  When you see an object - click on it to add to your score. You can discard a card if you don't see it. Try to find as many objects as possible - have fun!
    </div>
    <br/><br/>
<table>
    <tr>
        <td>
            <span class="cards" id="C1" onclick='newCard(0);'></span>
            <input type="button" id="D1" class="discard" onclick='discardCard(0);' value="Trade"></input>
        </td>
        <td>
            <span class="cards" id="C2" onclick='newCard(1);'></span>    
            <input type="button" id="D2" class="discard" onclick='discardCard(1);' value="Trade"></input>

        </td>
        <td>
            <span class="cards" id="C3" onclick='newCard(2);'></span>    
            <input type="button" id="D3" class="discard" onclick='discardCard(2);' value="Trade"></input>

        </td>

    </tr>
    <tr>
        <td>
            <span class="cards" id="C4" onclick='newCard(3);'></span>
                        <input type="button" id="D4" class="discard" onclick='discardCard(3);' value="Trade"></input>

        </td>
        <td>
            <span class="cards" id="C5" onclick='newCard(4);'></span>   
                        <input type="button" id="D5" class="discard" onclick='discardCard(4);' value="Trade"></input>
        </td>
                <td>
            <span class="cards" id="C6" onclick='newCard(5);'></span>    
            <input type="button" id="D6" class="discard" onclick='discardCard(5);' value="Trade"></input>

        </td>
    </tr>
    <tr>
    <td colspan="3">
        <div id="score" class="score">Score: </div>
        </td>
    </tr>
    
</table>
</body>

CSS

.cards { 
    display: block; 
    width: 190px; 
    height: 261px;  
    background-repeat: no-repeat;
    border:3px solid #a1a1a1;
    border-radius: 18px;
}
.discard {
	-moz-box-shadow:inset 0px 0px 0px 0px #bee2f9;
	-webkit-box-shadow:inset 0px 0px 0px 0px #bee2f9;
	box-shadow:inset 0px 0px 0px 0px #bee2f9;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
	background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
	background-color:#63b8ee;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	text-indent:0;
	border:2px solid #3866a3;
	display:inline-block;
	color:#14396a;
	font-family:Comic Sans MS;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:43px;
	line-height:43px;
	width:190px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 4px #7cacde;
}
.discard:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
	background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
	background-color:#468ccf;
}
.discard:active {
	position:relative;
	top:1px;
}

.score {
 	border:2px solid #3866a3;
	display:inline-block;
	color:#14396a;
	font-family:Comic Sans MS;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
}

.instructions {
 	border:2px solid...

JavaScript

var score = 0;
function Card(index, name, image, xIndex, yIndex, score)
{
    this.index = index;
    this.name = name;
    this.image = image;
    this.score = score;
    this.xOffset = image.xOffset[xIndex];
    this.yOffset = image.yOffset[yIndex];
    this.backgroundPosition = function() {
        return this.xOffset + " " + this.yOffset;}
    this.backgroundImage = function() {
        return this.image.src; }
};

var image1 = {
   xOffset: new Array("-2px", "-205px", "-407px", "-609px", "-811px"),
    yOffset: new Array("-4px", "-277px", "-552px"),
    src: 'url(https://cop4813eaglin.pbworks.com/f/ISeeCards1.png)',
};

var image2 = {
   xOffset: new Array("-2px", "-205px", "-407px", "-609px", "-811px"),
    yOffset: new Array("-4px", "-277px", "-552px"),
    src: 'url(https://cop4813eaglin.pbworks.com/f/ISeeCards2.png)',
};

var MAXCARDS = 12;
var cards = new Array();
cards[0] = new Card(0,'Airplane', image1, 0, 0, 3);
cards[1] = new Card(1,'Ambulance', image1, 1, 0, 4);
cards[2] = new Card(2,'Balloons', image1, 2, 0, 3);
cards[3] = new Card(3,'Baseball Field', image1, 3, 0, 3);
cards[4] = new Card(4,'Billboard', image1, 4, 0, 1);
cards[5] = new Card(5,'Cemetery', image1, 0, 1, 1);
cards[6] = new Card(6,'Chicken', image1, 1, 1, 4);
cards[7] = new Card(7,'Mobile Home', image2, 0, 0, 3);
cards[8] = new Card(8,'Motorcycle', image2, 1, 0, 1);
cards[9] = new Card(9,'Museum', image2, 2, 0, 5);
cards[10] = new Card(10,'Newspaper Box', image2, 3, 0, 2);
cards[11] = new Card(11,'No Littering Sign', image2, 4, 0,3);
cards[12] = new Card(12,'Police Car', image2, 0, 1, 3);
cards[13] = new Card(13,'Portable Restroom', image2, 1, 1, 3);

var spanId = new Array("C1", "C2", "C3", "C4", "C5", "C6" );
var activeCards = new Array();

function loadCards()
{
    // Puts 6 initial cards on the board
    for (var i=0; i < 6; i++)
    {
    SetCard(i, cards[getUnusedCardId(i,i)]);
    }
}

function SetCard(space, card)
{
    // Places a card on the screen
    // There are 6 spaces...