I See Cards Game Part 3 - Adding Interactivity

by Jason Pandelos

HTML

<body onload="loadCards()">
<table>
    <tr>
        <td>
            <span class="cards" id="C1" onclick='newCard("C1");'></span>
        </td>
        <td>
            <span class="cards" id="C2" onclick='newCard("C2");'></span>    
        </td>
    </tr>
    <tr>
        <td>
            <span class="cards" id="C3" onclick='newCard("C3");'></span>
        </td>
        <td>
            <span class="cards" id="C4" onclick='newCard("C4");'></span>    
        </td>
    </tr>
</table>
</body>

CSS

.cards { 
    display: block; 
    width: 190px; 
    height: 261px;  
    background-repeat: no-repeat;
    border:3px solid #a1a1a1;
    border-radius: 18px;
}

JavaScript

function Card(name, image, xIndex, yIndex)
{
    this.name = name;
    this.image = image;
    this.xOffset = image.xOffset[xIndex];
    this.yOffset = image.yOffset[yIndex];
    this.backgroundPosition = function() {
        return this.xOffset + " " + this.yOffset;}
    
};

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 cards = new Array();
cards[0] = new Card('Airplane', image1, 0, 0);
cards[1] = new Card('Ambulance', image1, 1, 0);
cards[2] = new Card('Balloons', image1, 2, 0);
cards[3] = new Card('Baseball Field', image1, 3, 0);
cards[4] = new Card('Billboard', image1, 4, 0);
cards[5] = new Card('Cemetery', image1, 0, 1);
cards[6] = new Card('Chicken', image1, 1, 1);

function loadCards()
{
    SetCard("C1", cards[getRandomInt(0,6)]);
    SetCard("C2", cards[getRandomInt(0,6)]);
    SetCard("C3", cards[getRandomInt(0,6)]);
    SetCard("C4", cards[getRandomInt(0,6)]);
}

function SetCard(elementId, card)
{-

   var element = document.getElementById(elementId);    
   element.style.backgroundImage = card.image.src; 
   element.style.backgroundPosition = card.backgroundPosition(); 
}

function newCard(elementId)
{
    SetCard(elementId, cards[getRandomInt(0,6)]);
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}function Card(name, image, xIndex, yIndex)
{
    this.name = name;
    this.image = image;
    this.xOffset = image.xOffset[xIndex];
    this.yOffset = image.yOffset[yIndex];
    this.backgroundPosition = function() {
        return this.xOffset + " " + this.yOffset;}
    
};

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 cards = new Array();
cards[0] = new Card('Airplane',...