My Cabbages! [EXAMPLE]

Basic example of an incremental game, uses jQuery.

by Ben Wochinski

HTML

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 
<div class="container">
    <div class="center">
         <h1 id="pagetitle">My Cabbages!</h1>

        <div style="width:450px;margin-left:auto;margin-right:auto;">
            <div style="float:left;width:200px;margin-right:20px;">
                 <h3 id="cash">Balance: <br/>$<span id="total_cash">20.00</span></h3>

                <p class="tiny">(Selling <span id="selling_second">0</span> per second)</p>
            </div>
            <div style="float:right;width:200px;margin-left:20px;">
                 <h3 id="total">Cabbages: <br/><span id="total_cabbage">0</span></h3>

                <p class="tiny">(Collecting <span id="cabbage_second">0</span> per second)</p>
            </div>
        </div>
    </div>
    <div style="clear:both;" class="center">
        <div id="cabbage">
            <img src="http://www.desktop-icon.com/stock-icons/desktop-buffet/cabbage-icon.gif" width="94" height="94" />
        </div>
        <div>Gather <span id="cabbage_click">1</span> cabbage</div>
    </div>
    <br/>
    <div class="center">
        <button id="buy_field" type="button" title="Increase Cabbage per Click.">Plant <span id="field_cost">18</span> more cabbage</button>
    </div>
    <div class="center">
        <button id="sell_cabbage" type="button" title="Sell Cabbage for Cash.">Sell <span id="cabbage_lot">1</span> cabbage ($<span id="cabbage_lot_worth">0.10</span>)</button>
        <button id="buy_contract" type="button" title="Increase Cabbage sold per Click.">Negotiate Contract: $<span id="contract_cost">25.00</span>

        </button>
    </div>
    <br/>
    <div class="center">
        <button id="hire_worker" type="button" title="Increase Cabbage collected per Second.">Hire Worker: $<span id="worker_cost">13.00</span>

        </button>
        <button id="buy_tools" type="button" title="Increase Cabbage collected per Worker per Second.">Buy...

CSS

div.container {
    background: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#cabbage {
    position: relative;
    top: 3px;
    left: 10px;
}
#cabbage:active {
    top: 6px;
    left: 11px;
}
#total, #cash {
    margin-bottom: -8px;
}
.tiny {
    font-size: 12px;
}
.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
hr {
    margin: 20px;
}
button {
    height: 32px;
    width: 225px;
    margin: 8px;
}
#footer {
    height: 50px;
    bottom: 100px;
}

JavaScript

/*How often to update the screen (in seconds)*/
var tickLen = 0.2;

/*Initialize the game variables*/
var cabbage = {};

function setDefaults() {
    cabbage.total = 0;
    cabbage.cash = 20.00;

    cabbage.sellWorth = 0.10;
    cabbage.sellNum = 1;

    cabbage.contractCost = 25.00;
    cabbage.contractScale = 1.4;

    cabbage.fieldNum = 0;
    cabbage.fieldCost = 18;
    cabbage.fieldScale = 1.27;

    cabbage.workerNum = 0;
    cabbage.workerCost = 13;
    cabbage.workerScale = 1.15;
    
    cabbage.toolNum = 1;
    cabbage.toolCost = 22;
    cabbage.toolScale = 1.17;

    cabbage.cartNum = 0;
    cabbage.cartCost = 50;
    cabbage.cartScale = 1.11;

    cabbage.marketingNum = 1;
    cabbage.marketingCost = 100;
    cabbage.marketingScale = 1.18;
}

/*reset all data*/
function resetAll() {
    localStorage.removeItem('cabbage');
    setDefaults();
    window.location.href=window.location.href;
}

/*uncomment below line to clear data on load*/
//resetAll();

/*Attempt to load saved local data*/
setDefaults();
var restore = localStorage.getItem('cabbage');
if (restore !== null) {
    /*Merge saved data with defaults, recursive*/
    $.extend(true,cabbage,JSON.parse(restore));
    updatePage();
}

/*Activate valid buttons*/
function setButtons() {
    if (cabbage.total >= cabbage.fieldCost) {
        $('#buy_field').prop("disabled", false);
    } else {
        $('#buy_field').prop("disabled", true);
    }

    if (cabbage.cash >= cabbage.toolCost) {
        $('#buy_tools').prop("disabled", false);
    } else {
        $('#buy_tools').prop("disabled", true);
    }
    
    if (cabbage.cash >= cabbage.workerCost) {
        $('#hire_worker').prop("disabled", false);
    } else {
        $('#hire_worker').prop("disabled", true);
    }

    if (cabbage.cash >= cabbage.contractCost) {
        $('#buy_contract').prop("disabled", false);
    } else {
        $('#buy_contract').prop("disabled", true);
    }

    if (cabbage.cash >= cabbage.cartCost) {
       ...