C=document.body.children[0];c=C.getContext("2d");f=500;C.width=800;C.height=f;a=Array(f*5);A=Array(f*5);t=n=g=0;N=200;W=50;for(B=i=10;i<f;){c.moveTo(0,i);c.lineTo(f,i);c.moveTo(i,0);c.lineTo(i,f);i+=B}c.stroke();Q=c.fillStyle="#55a";function m(d){return d-d%B}function K(d){c.fillStyle=d}function P(){Q=c.fillStyle;K("#fff");c.fillRect(f,B,f,f);K("#000");c.fillText("$"+N+" Pop:"+g,f,W);K(Q)}function l(){for(k=G=J=0;k<f*5;k++){if(a[k]!=2&&a[k]>=0){n=0;for(b=-100;b<101;b+=W)for(u=-2;u<3;u++){F=a[k]-a[k+b+u];F==-3?n-=B:F==-1?n+=2:(F==-2||F==1&&A[k]>0)&&(n+=7)}a[k]<1?(A[k]>0&&G++,n+=j,N++):a[k]>2?(A[k]>0&&J++,n+=g,N+=5):(n+=g/5,N+=2);M=Math.random()*n;i=Q;(M>20||M<5&&A[k]==1)&&(K("#ccc"),A[k]=1,M<5&&(K("#888"),G--,A[k]=0),c.fillRect(k%W*B,m(k)/W*B,7,5));K(i)}a[k]==2&&(N--,A[k]=2);j=J;g=G}}window.onclick=function(d){x=m(d.pageX);y=m(d.pageY);N>4&&(N-=5,x>f?(N+=5,t++,y=0,x=f,t>3?(K("#55a"),t=0):t==1?K("#c00"):t==2?K("#0d0"):t==3&&K("#ba3")):a[y*5+x/B]=t,c.fillRect(x,y,B,B))};setInterval(P,W);setInterval(l,f*B);
//CitySim1k
//Petter Nyman
//2010
//Bunch of variables used multiple times. The most eye catching is perhaps the two arrays. I used a 2d Array at first but that isn't really js material. I used one(a) to keep tile type and the other(A) to keep inhabitation status.
//t = type, 0 = house, 1 = commerce,2 = park,3 = industry
//g = houses
C = document.body.children[0], c = C.getContext("2d"), f = 500, C.width = 800, C.height = f, a = new Array(f * 5), A = new Array(f * 5), t = n = g = 0, N = 200, W = 50, B = i = 10;
//Create grid that is 500x500 pixels and 50x50 blocks
while (i < f) {
c.moveTo(0, i);
c.lineTo(f, i);
c.moveTo(i, 0);
c.lineTo(i, f);
i += B;
}
c.stroke();
//tmp color used throughout
Q = c.fillStyle = '#55a';
//Get grid position from pixel value
function m(o) {
return o - (o % B);
}
//Shorter fillStyle since it's used a lot
function K(Y) {
c.fillStyle = Y;
}
//Updating money and population
function P() {
Q = c.fillStyle;
K('#fff');
//Blank before printing again. clearRect would probably be friendlier.
c.fillRect(f, B, f, f);
K('#000');
c.fillText('$' + N + ' Pop:' + g, f, W);
K(Q);
}
//Calculate block feelings and 'taxes'
function l() {
//tmp house and job values
G = J = 0;
//for every block in grid
for (k = 0; k < f * 5; k++) {
//if block!=park && is not empty
if (a[k] != 2 && a[k] >= 0) {
//feeling/value variable, the higher, the more likely someone is to move into the block
n = 0;
//get every block in a 2 block radius
for (b = -100; b < 101; b += W) {
for (u = -2; u < 3; u++) {
//Dirty horrible trick, types are defined as an int, and one type minus another is arranged in a way that they match up in regards of 'who' like 'who' (houses likes parks etc.)
F = a[k] - a[k + b + u];
//-3 = house-industry,-1 = industry-com/house-com,-2 = house-park/com-industy,1 = com-house
F == -3 ? n -= B : F == -1 ? n += 2 : F == -2 || F == 1 && A[k] > 0 ? n += 7: t;
}
}
//How much money each building/block creates, if(habitated)
(a[k]<1) ? (A[k]>0?G++:f, n += j, N++) :(a[k]>2) ? (A[k]>0?J++:f, n += g, N += 5) : (n += g / 5, N += 2);
M = Math.random() * n;
i = Q;
//Check to see if someone moves in our out.
(M > 20 || (M<5 && A[k] == 1)) ? (K('#ccc'), A[k] = 1, (M < 5) ? (K('#888'), G--,A[k] = 0):f, c.fillRect((k % W) * B, (m(k) / W) * B, 7, 5)) : f;
K(i);
}
//Parks cost money
(a[k] == 2) ? (N--, A[k] = 2) : f;j=J;g=G;
}
}
window.onclick = function(e) {
//pageX is the safe option and I don't have anywhere to put the other mouse checkers anywhere.
x = m(e.pageX);
y = m(e.pageY);
//if enough money, if(within limits)? build a block, else(change block type)
(N > 4) ?(N -= 5, (x > f) ? (N += 5, t++, y = 0, x = f, (t > 3) ? (K('#55a'), t = 0) : (t == 1) ? K('#c00') : (t == 2) ? K('#0d0') : (t == 3) ? K('#ba3') : f) : a[(y * 5) + (x / B)] = t, c.fillRect(x, y, B, B)) : f;
}
//update money
setInterval(P, W);
//taxes & costs every five seconds
setInterval(l, f*B);
