Pyramath Sample Game

by Ron Eaglin

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="center">
    	<h1>Pyramath (HTML Version)</h1>

    <hr>
    	<h3>Original game and tutorial can be found <a href="http://www.iseecards.com/pyramath/game/SpeedPyramath.html" target="_blank">here</a></h3>

    <div id="game">
        <div id="pyramid" class="game" style="position: relative; top:20px;left:20px; width:675px; height:600px; background-color:yellow ">
           
        </div>
        <div id="texts" class="game" style="left:50px;bottom:100px">
            <div id="score"></div>
            <br>
            <br>
            <div id="message"></div>
        </div>
        <div id="deal" class="game" style="bottom:60px;right:200px;">
            <div id='timer'></div>
            <br>
            <button type="button" id="newCard">Deal New Card</button>
            <br>
            <br>
            <div id="card" class="ui-widget-content"></div>
        </div>
    </div>
    <p id="copyright">&#169;2015 Drixle Products</p>
</div>

JavaScript

$(window).load(function () {
    var startGame = true;
    var timer = true;
    var interval;
    var time = 0;
    var id = 0;
    var values = new Array();

    var drops = ['1', '2', '3', '4', '5', '12', '23', '34', '45', '1223', '2334', '3445', '12232334', '23343445', '1223233423343445'];
    var dropNum = 0;

    // Sets up drop zones on pyramid image. 

    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 5 - i; j++) {
            document.getElementById('pyramid').innerHTML += '<div class="drop" id="' + drops[dropNum] + '" data="null" data-card="null" style="position: absolute; top:' + (5 + (i * 100)) + 'px;left:' + (5 + (i * 62.4) + (j * 135)) + 'px; width:125px; height:175px; background-color: #e0ffff; border: 5px solid navy;" ></div>';
            dropNum++;
        }
    }

    // New Card button clicked
    // startGame - boolean true - before first click

    $("#newCard").click(function () {
        if (startGame) {
            for (var i = 1; i <= 5; i++) {
                var num = Math.floor(Math.random() * 10);
                var div = document.getElementById(i.toString());
                div.innerHTML += '<img src="https://cop4813eaglin.pbworks.com/f/' + num + '.png">';
                div.setAttribute("data", num);
            }
            startGame = false;
        } else {
            if (timer) {
                interval = setInterval(function () {
                    time++;
                    document.getElementById("timer").innerHTML = time + " seconds";
                }, 1000)
                timer = false;
            }
            var num = Math.floor(Math.random() * 10)
            var cId = 'c' + id;
            addCard(num, cId);
            values[id] = num;
            id++;
        }
    });

    function addCard(num, cId) {
        var img = document.createElement("img");
        img.id = cId;
        img.src = "https://cop4813eaglin.pbworks.com/f/" + num + ".png";
       ...