Monochrome is puzzle game where the goal is to make all the tiles the same color. Press any key to restart a level.
t=36;l=p=q=w=z=0;function L(){l=[],m='G333444G334455J061234560F11111770772206677077330557707744444F1112210002603063000233322J55511a5551611a16361a1161a55511a555444a444aa4a444444444H17401740050200523765200104003760376'.replace(/a/g,5555).match(/\D\d+/g)[p];w=m.charCodeAt()-65;for(j=1;m[j];j+=w)l.push(m.substr(j,w).split(''));D()}function B(s,x,y,w,h){c.fillStyle='#'+'000F00FA0FF00F055FC0FFFF'.substr(s*3,3);c.fillRect(x,y,w,h)}function D(){a.width+=0;i=l.length;k=l[0].length;B(z,0,0,k*t+8,i*t+8);for(;i--;)for(j=k;j--;)B(l[i][j],4+j*t,4+i*t,t,t,c.strokeRect(4+j*t,4+i*t,t,t));if(z)B(0,q*t+9,w*t+9,t-9,t-9)}function S(o,n,x,y){if((v=l[y])&&v[x]&&v[x]==o){v[x]=n;S(o,n,x+1,y);S(o,n,x,y+1);S(o,n,x-1,y);S(o,n,x,y-1)}}a.onclick=function(e){x=e.offsetX/t|0;y=e.offsetY/t|0;u=l[y][x];with(Math)if(z&&abs(q-x)+abs(w-y)<2&&(u>6||abs(z-u)==1||abs(z-u)==5)){S(u,z,x,y);z=0}else{z=z==u||u>6?0:u}q=x;w=y;D();if(!l.join().replace(/[0,]/g,'').match(/^(\d)\1+$/g))return;if(p++>5)alert("YOU WIN");else setTimeout(L,1e3)};L(b.onkeyup=L)
dD0zNjtsPXA9cT13PXo9MDtmdW5jdGlvbiBMKCl7bD1bXSxtPSdHMzMzNDQ0RzMzNDQ1NUowNjEyMzQ1NjBGMTExMTE3NzA3NzIyMDY2NzcwNzczMzA1NTc3MDc3NDQ0NDRGMTExMjIxMDAwMjYwMzA2MzAwMDIzMzMyMko1NTUxMWE1NTUxNjExYTE2MzYxYTExNjFhNTU1MTFhNTU1NDQ0YTQ0NGFhNGE0NDQ0NDQ0NDRIMTc0MDE3NDAwNTAyMDA1MjM3NjUyMDAxMDQwMDM3NjAzNzYnLnJlcGxhY2UoL2EvZyw1NTU1KS5tYXRjaCgvXERcZCsvZylbcF07dz1tLmNoYXJDb2RlQXQoKS02NTtmb3Ioaj0xO21bal07ais9dylsLnB1c2gobS5zdWJzdHIoaix3KS5zcGxpdCgnJykpO0QoKX1mdW5jdGlvbiBCKHMseCx5LHcsaCl7Yy5maWxsU3R5bGU9JyMnKycwMDBGMDBGQTBGRjAwRjA1NUZDMEZGRkYnLnN1YnN0cihzKjMsMyk7Yy5maWxsUmVjdCh4LHksdyxoKX1mdW5jdGlvbiBEKCl7YS53aWR0aCs9MDtpPWwubGVuZ3RoO2s9bFswXS5sZW5ndGg7Qih6LDAsMCxrKnQrOCxpKnQrOCk7Zm9yKDtpLS07KWZvcihqPWs7ai0tOylCKGxbaV1bal0sNCtqKnQsNCtpKnQsdCx0LGMuc3Ryb2tlUmVjdCg0K2oqdCw0K2kqdCx0LHQpKTtpZih6KUIoMCxxKnQrOSx3KnQrOSx0LTksdC05KX1mdW5jdGlvbiBTKG8sbix4LHkpe2lmKCh2PWxbeV0pJiZ2W3hdJiZ2W3hdPT1vKXt2W3hdPW47UyhvLG4seCsxLHkpO1MobyxuLHgseSsxKTtTKG8sbix4LTEseSk7UyhvLG4seCx5LTEpfX1hLm9uY2xpY2s9ZnVuY3Rpb24oZSl7eD1lLm9mZnNldFgvdHwwO3k9ZS5vZmZzZXRZL3R8MDt1PWxbeV1beF07d2l0aChNYXRoKWlmKHomJmFicyhxLXgpK2Ficyh3LXkpPDImJih1PjZ8fGFicyh6LXUpPT0xfHxhYnMoei11KT09NSkpe1ModSx6LHgseSk7ej0wfWVsc2V7ej16PT11fHx1PjY/MDp1fXE9eDt3PXk7RCgpO2lmKCFsLmpvaW4oKS5yZXBsYWNlKC9bMCxdL2csJycpLm1hdGNoKC9eKFxkKVwxKyQvZykpcmV0dXJuO2lmKHArKz41KWFsZXJ0KCJZT1UgV0lOIik7ZWxzZSBzZXRUaW1lb3V0KEwsMWUzKX07TChiLm9ua2V5dXA9TCk=
t=36; // tile size
l=p=q=w=z=0; // initialize level variable, p=progress, q=previous x, w=previous y (for adjacent stuff), z=selected color
// Load/Reload current level into l
function L() {
l = [], // Reset level variable
// This is our level data. Each level is a capital letter followed by color codes, one number per tile
// The charcode of the letter minus 65 is the width of our level
// We also took the largest/most repeating string (5555) and replaced it with 'a'
m = 'G333444G334455J061234560F11111770772206677077330557707744444F1112210002603063000233322J55511a5551611a16361a1161a55511a555444a444aa4a444444444H17401740050200523765200104003760376'
.replace(/a/g, 5555) // put 5555 back in
.match(/\D\d+/g)[p]; // Split into levels by A##### format, save only our current level
w = m.charCodeAt() - 65; // Get our width. 0 is omitted from charCodeAt because it is the default
for (j = 1; m[j]; j += w) l.push(m.substr(j, w).split('')); // substring the level by width, split on every character
D()
}
// Shorthand to draw a filled box
function B(s, x, y, w, h) {
c.fillStyle = '#' + '000F00FA0FF00F055FC0FFFF'.substr(s * 3, 3); // Black, ROYGBV, white
c.fillRect(x, y, w, h)
}
// Render the board
function D() {
a.width += 0; // Hack to clear the canvas
i = l.length; // Save ahead for the background block height
k = l[0].length; // Save ahead for the background block width
B(z, 0, 0, k * t + 8, i * t + 8); // Draw background block to show currently selected color
for (; i--;) // For each row
for (j = k; j--;) // For each column, draw a block
B(l[i][j], 4 + j * t, 4 + i * t, t, t, c.strokeRect(4 + j * t, 4 + i * t, t, t)) // Use the non-existant 6th parameter position to save a byte
if(z) // if we have a selected color
B(0,q*t+9,w*t+9,t-9,t-9) // draw a box to indicate selected tile
}
// Flood the area with a color, recursively
function S(o, n, x, y) {
if ((v = l[y]) && v[x] && v[x] == o) {
v[x] = n;
S(o, n, x + 1, y);
S(o, n, x, y + 1);
S(o, n, x - 1, y);
S(o, n, x, y - 1)
}
}
// Mouse click handling
a.onclick = function(e) {
x = e.offsetX / t | 0;
y = e.offsetY / t | 0;
u = l[y][x]; // if this position exists, save and do stuff, else let the error take us faw away
with(Math) // abs shorthand
if (z // if we have a selected color
&& abs(q - x) + abs(w - y) < 2 // and we're clicking an adjacent block to our last click
&& (u>6 || abs(z-u) == 1 || abs(z-u) == 5)) { // and the colors are adjacent on the color wheel
S(u, z, x, y); // flood the clicked color with the selected color
z = 0 // set selected color to black
} else {
z = z == u || u > 6 ? 0 : u // update the selected color
// new color same as old? toggle off
// if the new color is white or black: black
// else, save the new color
}
q = x; // save the x and y for adjacent checks later
w = y;
D(); // redraw the board
if (!l.join().replace(/[0,]/g, '').match(/^(\d)\1+$/g)) return; // join the entire level array together.
// Remove all the commas and zeros.
// If the level is all the same number after that, we've beaten this board, continue below
if (p++ > 5) alert("YOU WIN"); // Out of levels?
else setTimeout(L, 1e3) // Wait a second, then load the next level
};
L(b.onkeyup = L) // Initial load and assigning any key to restart the current level