nature simulator

<html>
<head>
<style>
.area{
	position:absolute;
	width:200;
	height:100;
}
#block{
	position:absolute;
	width:1000;
	height:1000;
	top:0;
	left:0;
}
</style>
</head>
<body onmousedown="clicked(event);">
<canvas></canvas>
<div class="area" style="top:220; left:20;" id="area1" onclick="chop();"></div>
<div class="area" style="top:240; left:260;" id="area2" onclick="construct();"></div>
<div class="area" style="top:240; left:630;" id="area3" onClick="grow();"></div>
<div class="area" style="top:0; left:630;" id="sell" onClick="sellit();"></div>
<div id="block"></div>
<script type="text/javascript">
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
var sky=new Image();
sky.src="sky.jpg";
var hills=new Image();
hills.src="hills.png";
var skyframe=0;
var wheat = new Image;
wheat.src="wheatyoung.png"
var house = new Image();
house.src="homeconstruct.png";
var trees = new Image();
trees.src="trees.jpg";
var sell = new Image();
sell.src = "sell.jpg";
var pipe = new Image();
pipe.src="pipe.jpg";
can.width=sky.width;
can.height=sky.height;
var click=false;
var mouse={x:0, y:0};
var grown=false;
var breadcount=0;
var money=0;

var dialogue=[
	"Welcome to nature simulator 2015!  Click to continue",
	"First, grow some wheat by clicking on it.",
	null,
	"Build a house to keep away from hot, dry days!",
	null,
	"Now turn the wheat into bread by clicking on it.",
	null,
	"Sell some of that bread, might as well profit!",
	null,
	"reviews: 'wow', 'great bread!'",
	"'I want 50 more bread!'",
	null,
	"You have to produce more bread!",
	"Chop down those trees to clear some land first.",
	null,
	"Now build a factory in its place!",
	"It will help you a lot.",
	null,
	"Great job!  Have fun selling 100 bread!",
	null,
	"dont mind us we are just investigating",
	"dont mind us we are just investigating",
	"dont mind us we are just investigating",
	null,
	"Halt, you are under arrest!",
	"Halt, you are under arrest!",
	"Halt, you are under arrest!",
	"your charges:",
	"Illegal fast-growth fertelizer",
	"pollution of the enviroment",
	"and the extinction of a bird species",
	"you died, executed for your crimes",
	"you didn't understand what you did was illegal",
	"well, now you know",
	"you monster"
];
var dn=0;
dnlimit=1;
ctx.font="20px Arial";

var backgroundsound = new Audio("Nature Background Music 1.m4a");
backgroundsound.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
backgroundsound.play();

var backgroundsoundch = new Audio("chaos.mp3");
backgroundsoundch.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
backgroundsoundch.volume=0;
backgroundsoundch.play();

var chopping= new Audio("chopping.m4a");

var endmusic= new Audio("endmusic.m4a");

function clicked(e){
	click=true;
	mouse.x=e.clientX;
	mouse.y=e.clientY;
}

function introduction(){
	ctx.fillStyle="rgb(100,100,100)";
	ctx.fillText(dialogue[dn], 200, 100);
	if(click){
		dn++;
		click=false;
	}
}

function grow(){
	if(!grown){
		wheat.src="wheatgrown.png";
		dnlimit=3;
		grown=true;
	}else{
		wheat.src="wheatyoung.png";
		breadcount++;
		grown=false;
		if(dn>=6){
			dnlimit=7;
		}
	}
}

function construct(){
	if(dn==4){
		house.src="homebuilt.png";
		dnlimit=5;
		backgroundsoundch.volume=0.1;
		backgroundsound.volume=0.9;
	}
}

function sellit(){
	if(breadcount>0){
		if(dn==8){
			dnlimit=10;
		}
		if(dn==11 && breadcount>=50){
			money+=500;
			breadcount-=50;
			dnlimit=13;
		}
		if(breadcount>0){
			money+=10;
			breadcount--;
		}
		if(breadcount==250){
			dnlimit=22;
			backgroundsound.volume=0.2;
			backgroundsoundch.volume=0.8;
		}
		if(breadcount==300){
			dnlimit=30;
			backgroundsound.volume=0;
			backgroundsoundch.volume=1;
		}
	}
}

function chop(){
	if(dn==14){
		trees.src="treestumps.jpg";
		dnlimit=16;
	}
	if(dn==17){
		trees.src="factory.jpg";
		dnlimit=18;
		backgroundsound.volume=0.5;
		backgroundsoundch.volume=0.5;
	}
}

function loop(){
	clear();
	draw();
	if(dn<=dnlimit){
		document.getElementById("block").style.display="block";
		introduction();
	}else{
		document.getElementById("block").style.display="none";
	}
	producebread();
	skyframe++;
	if(dn==31){
		end();
	}else{
		requestAnimationFrame(loop);
	}
}

loop();

function clear(){
	ctx.clearRect(0,0,can.width,can.height);
}

function draw(){
	drawSky();
	ctx.drawImage(hills,0,250);
	ctx.drawImage(sell, 720, 20);
	drawWheat();
	drawHouse();
	drawTrees();
	drawbread();
}

function drawbread(){
	if(dn>=6){
		ctx.fillText("bread: "+breadcount, 10, 20);
	}
	if(dn>=8){
		ctx.fillText("money: "+money, 10, 50);
	}
	//ctx.fillText(dn, 10, 80);
}

function drawSky(){
	if(skyframe==can.width){skyframe=0;}
	ctx.drawImage(sky,skyframe,0);
	var clippedw=can.width-skyframe;
	ctx.drawImage(sky,0,0,sky.width,sky.height,(-1)*(sky.width-skyframe),0,sky.width,sky.height);
}

function drawWheat(){
	ctx.drawImage(wheat, 70, 230);
	ctx.drawImage(wheat, 700, 253);
}

function drawHouse(){
	ctx.drawImage(house, 220, 200);
}

function drawTrees(){
	ctx.drawImage(trees, 20, 180);
	if(dn >= 19 && breadcount>=150){
		ctx.drawImage(pipe, 590, 276);
	}
}

function producebread(){
	if(dn>=18 && money>0){
		breadcount++;
		money-=5;
	}
}

function end(){
	backgroundsound.pause();
	backgroundsoundch.pause();
	endmusic.play();
	requestAnimationFrame(fadeoutof);
}

var timescalled=1;

function fadeoutof(){
	timescalled++;
	if(timescalled%300==0){
		dn++;
	}
	if(dn>31 && dn<35){
		ctx.fillStyle="white";
		ctx.fillText(dialogue[dn], 200, 100);
	}
	ctx.fillStyle="rgba(0,0,0,.01)";
	ctx.fillRect(0,0,can.width,can.height);
	requestAnimationFrame(fadeoutof);
}
</script>
</body>
</html>