TowerDPS

A tower dps calculator

by danShumway

HTML

<div>Click to change tower type. Default grid-size is 3x4, can be changed in left hand bottom window.</div>
<div><span>Tower Type:</span>  <span id="tower_type"></span>
</div>
<div><span>Tower Damage Per Second (or contributed for boost):</span>  <span id="tower_dps"></span>
</div>
<div><span>Cost to Build:</span>  <span id="tower_cost"></span>
</div>
<div><span>DPS:</span>  <span id="tower_DPS"></span>
</div>
<div><span>Damage/Cost Efficiency:</span>  <span id="tower_efficiency"></span>
</div>
<button id="dps" onclick="getBest(calculateDPS)">Calculate DPS</button>
<button id="cr" onclick="getBest(calculateCostRatio)">Calculate CostRatio</button>
<input type="checkbox" id="show" checked>Show Calculations

CSS

td {
    width:100px;
    height:100px;
    background-color:green;
}
span {
    font-size:20px;
}

JavaScript

//-------------------------------------------------------------
//CHANGE THESE FOR DIFFERENT SIZES, THEN HIT RUN.
//--------------------------------------------------------------

COLUMNS = 4;
ROWS = 3;

//--------------------------------------------------------------







//------------------------------------------------------------
//Code - copyright Daniel Shumway, licensed under MIT.

//Creates data model and dom model of table.
var towers = [];
var table;
var init = function (width, height) {
    towers = [];
    table = document.createElement('table');
    for (var i = 0; i < width; i++) {
        towers.push([]);
        var tr = document.createElement('tr');
        table.appendChild(tr);
        //Also create DOM.
        for (var j = 0; j < height; j++) {
            towers[i].push(new Swarm());
            var td = document.createElement('td');
            td.id = i + "_" + j;
            td.i = i;
            td.j = j;
            td.style.backgroundColor = "blue"; //.innerHTML = 's';
            tr.appendChild(td);

            (function (i, j, td) {
                td.addEventListener("mouseover", function (e) {
                    document.getElementById("tower_dps").innerHTML = towers[i][j].damage;
                    document.getElementById("tower_cost").innerHTML = towers[i][j].cost;
                    document.getElementById("tower_type").innerHTML = towers[i][j].type;
                });

                td.addEventListener("mousedown", function (e) {
                    if (td.style.backgroundColor == "green") {
                        td.style.backgroundColor = "blue";
                        towers[td.i][td.j] = new Swarm();
                    } else {
                        td.style.backgroundColor = "green";
                        towers[td.i][td.j] = new Boost();
                    }

                    interactions();
                    document.getElementById("tower_DPS").innerHTML = calculateDPS();
                   ...