Clicker

by Andrew Maxwell

HTML

<body ng-app ng-controller="ctrl">

	<h1>{{ money | currency }}</h1>
	
	<button ng-click="click()">click to get {{ amt | currency }}</button>
	
	<div ng-show="started">
		<h2>{{ elapsedTime() }} seconds</h2>
		<h2>{{ total / elapsedTime() | number }} dollars per second</h2>
		
		<button 
			ng-repeat="upgrade in upgrades" 
			ng-click="buy(upgrade)"
			ng-disabled="upgrade.price > money"
			title="{{ upgrade.description }} You have bought this {{ upgrade.owned }} times."
		>Buy {{ upgrade.name }} (${{ upgrade.price }})</button>
	</div>
	
</body>

JavaScript

function ctrl($scope){
	
	$scope.money = 0
	$scope.total = 0
	$scope.amt = 1
	
	var startTime = 0
	
	function get(){
		$scope.total += $scope.amt
		$scope.money += $scope.amt
	}
	
	$scope.elapsedTime = function(){
		return startTime ? (new Date() - startTime) / 1000 : 0
	}
	
	$scope.upgrades = [
		{
			name: "ugly chipmunk",
			description: "Auto click once per minute.",
			price: 5, 
			effect: function(){
				setInterval(get, 60000)
			}
		},
		{
			name: "helping hand",
			description: "Auto-click once per second.",
			price: 200,
			effect: function(){
				setInterval(get, 1000)
			}
		},
		{
			name: "plastic clicker",
			description: "1.5x the clicking power!",
			price: 500,
			effect: function(){
				$scope.amt *= 1.5
			}
		},
		{
			name: "wooden clicker",
			description: "2x the clicking power!",
			price: 5000,
			effect: function(){
				$scope.amt *= 2
			}
		},
        {
            name: "stone clicker",
            description: "3x the clicking power!",
            price: 50000,
            effect: function(){
                $scope.amt *= 3
            }
        }
            
      
	]
	
	$scope.click = function(){
		get()
		
		if (!startTime){
			setInterval(function(){
				$scope.$apply()
			}, 100)
			
			startTime = new Date()
			$scope.started = true
		}
	}
	
	$scope.buy = function(upgrade){
		
		upgrade.effect()
		$scope.money -= upgrade.price
		upgrade.owned = (upgrade.owned || 0) + 1
		
	}
	
}