Click for Points

by Andrew Maxwell

HTML

<body style="text-align: center; font-family: sans-serif">
    <button id="button" style="padding: 10px 0; font-size: 2em"></button>
    <div style="font-size: 2em"><span id="score"></span> points</div>
    <br/>
    <br/>
    <div id="upgrades"></div>
</div>

CSS

button {width: 400px; font-weight: bold}

JavaScript

var greenPoints = 1;
var penalty = 10;

var greenTime = 500;
var redTime = 2000;

var green = false;
var score = 0;


$("#button").mouseup(function(){
    score += green ? greenPoints : -penalty;
    if (score < 0) score = 0;
    update();
});

function go(){
    green = false;
    update();
    setTimeout(function(){
        green = true;
        update();
        setTimeout(go, greenTime);
    }, redTime);
}

var upgrades = [
	{
		words: "Increase green time 20%",
		base: 5,
		mult: 2,
		action: function(){
			greenTime *= 1.2;
		}
	},{
		words: "Decrease red time 10%",
		base: 20,
		mult: 2,
		action: function(){
			redTime /= 1.1;
		}
	},{
		words: "Double points per click",
		base: 30,
		mult: 4,
		action: function(){
			greenPoints *= 2;
			penalty *= 2;
		}
	},{
		words: "Decrease penalty by 10%",
		base: 100,
		mult: 5,
		action: function(){
			penalty = Math.max(0, Math.floor(penalty * 0.9));
		},
		condition: function(){
			return penalty > 0;
		}
	}
];

function description(item){
	var points = !item.condition || item.condition() ? price(item) + " points" : "MAXED OUT";
	return "Level " + (item.level + 1) + ": " + item.words + " (" + points + ")";
}
function price(item){
	return item.base * Math.pow(item.mult, item.level);
}

upgrades.forEach(function(item){
	
	item.level = 0;
	
	item.button = $("<button>")
        .text(description(item))
        .click(function(){
			
            score -= price(item);
			item.action();
			item.level++;
            item.button.text(description(item));
            update();
        })
        .appendTo("#upgrades");
		
	$("<br>").appendTo("#upgrades");
});

function update(){
    
    $("#score").html(score);
    
    upgrades.forEach(function(item){
        item.button.prop("disabled", (item.condition && !item.condition()) || price(item) > score);
    });
    
	$("#button")
        .css("background", green ? "lime" : "red")
        .html(green ? 
			"GET " + greenPoints + " POINT" + (greenPoints == 1 ? "" : "S") 
			:...