simple incremental game

index.html

<div id="game">
	
	<div id="controls">
		<p><button onclick="lighterClick(1)">Make Spark</button> 💥 <span id="spark">0</span> </p>
		<p><button onclick="growFire()">Grow Fire</button> 🔥 <span id="fire">0</span> </p>
		<p><span id="fireCost">10</span>💥 = 🔥</p>
	</div>
		<div id="graph"></div>
</div>

script.js

var spark = 0;
var fire = 0;

function lighterClick(number) {
	spark = spark + number;

	document.getElementById("spark").innerHTML = spark;
	var edge = Math.sqrt(spark * fire);
	$('#graph').height(edge).width(edge)
	
	var fireCost = Math.floor(10 * Math.pow(1.1, fire));
	
	var lightness = spark / fireCost <= 1 ? spark / fireCost : 1 ;
	
	var color = 'hsla(' + fire + ',90%,'+ lightness*100 +'%,1)';
	$('#graph').css('background', color)
	
};

function growFire()
{
	var fireCost = Math.floor(10 * Math.pow(1.1, fire));

	if (spark >= fireCost)
	{
		fire++;
		spark = spark - fireCost;
		
		document.getElementById('fire').innerHTML = fire;
		document.getElementById('spark').innerHTML = spark;
	}
	var nextCost = Math.floor(10 * Math.pow(1.1, fire));
	document.getElementById('fireCost').innerHTML = nextCost;
}

window.setInterval(function() {

	lighterClick(fire);
	

}, 500);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

simple-incremental-game.markdown

simple incremental game

based on http://dhmholley.co.uk/incrementals.html

A Pen by M on CodePen.

License.

style.css

body {
	background: black;
	color: white;
	font-family: 'M+ 2m', 'Monaco', 'Ubuntu Mono',  monospace;
	font-size: 11pt;
	margin: 0;
	line-height: 1.5;
}

button {
	font-family: inherit;
	font-weight: bold;
	font-size: inherit;
	background: #111;
	color: #eee;
	border: none;
}

#game {
	display: flex;
	flex-wrap: wrap;
	flex-direction: col-reverse;
	//justify-content: flex-end;
	align-items: flex-end;
}

#game div {
}

#controls {
	padding: 1em;	
	text-shadow: 0px 0px 0.5em black;
}

::selection {
	background: yellow;
	color: #111;
}

button {
	background: orange;
	color: #111;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	padding: 0 0.5em;
	position: relative;
	user-select: none;
}

button:hover {
	background: #fff;
}
button:active {
	top: 1px;
}
button.disabled {
	cursor: default;
	opacity: 0.5;
}

#graph {
	//background: yellow;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}