Pixel Painter game. Click on the colors at the bottom to 'fill' the top left pixel (and others like it) with that color. You have a limited number of moves to paint the entire board. It's very addicti…
var e=["#F72","#FF6","#7C3","#6AF","#34F","#333"],g=56,h=344,j=document.body.children[0],k=j.width=j.height=424,l=j.getContext("2d"),m,n,o,p,q,r;j.onclick=function(a){function b(c,f){if(p[f]&&p[f][c]==o){p[f][c]=d;b(c-1,f);b(c,f-1);b(c+1,f);b(c,f+1)}}var d=(a.pageX-8)/g|0;if(r){r=0;q=d<2?0:d>3?2:1;s(1)}else if(a.pageY-8>h&&d-o){b(0,0);--n;s(0)}};function t(a,b,d,c){l.fillStyle=c;l.fillRect(a,b,d,d)}function u(a,b,d,c){l.font=a+"px Arial";l.fillStyle=e[5];l.fillText(b,d,c)}
function v(){r=1;t(40,40,256,"#000");t(42,42,252,"#EEE");u(16,"Easy Medium Hard",82,168)}function s(a){t(0,0,k,"#FFF");if(a){m=[12,16,21][q];n=[22,28,33][q];p=[];for(a=m;a--;){p[a]=[];for(var b=m;b--;)p[a][b]=6*Math.random()|0}}o=p[0][0];var d=1,c=336/m;for(a=m;a--;)for(b=m;b--;t(c*b,c*a,c,e[i]))d&=(i=p[a][b])==o;for(i in e)t(g*i,h,g,e[i]);u(16,"Moves remaining: "+n,0,416);if(d||!n){v();u(32,d?" Winner!":"Game Over",88,104)}}v();
dmFyIGU9WyIjRjcyIiwiI0ZGNiIsIiM3QzMiLCIjNkFGIiwiIzM0RiIsIiMzMzMiXSxnPTU2LGg9MzQ0LGo9ZG9jdW1lbnQuYm9keS5jaGlsZHJlblswXSxrPWoud2lkdGg9ai5oZWlnaHQ9NDI0LGw9ai5nZXRDb250ZXh0KCIyZCIpLG0sbixvLHAscSxyO2oub25jbGljaz1mdW5jdGlvbihhKXtmdW5jdGlvbiBiKGMsZil7aWYocFtmXSYmcFtmXVtjXT09byl7cFtmXVtjXT1kO2IoYy0xLGYpO2IoYyxmLTEpO2IoYysxLGYpO2IoYyxmKzEpfX12YXIgZD0oYS5wYWdlWC04KS9nfDA7aWYocil7cj0wO3E9ZDwyPzA6ZD4zPzI6MTtzKDEpfWVsc2UgaWYoYS5wYWdlWS04PmgmJmQtbyl7YigwLDApOy0tbjtzKDApfX07ZnVuY3Rpb24gdChhLGIsZCxjKXtsLmZpbGxTdHlsZT1jO2wuZmlsbFJlY3QoYSxiLGQsZCl9ZnVuY3Rpb24gdShhLGIsZCxjKXtsLmZvbnQ9YSsicHggQXJpYWwiO2wuZmlsbFN0eWxlPWVbNV07bC5maWxsVGV4dChiLGQsYyl9DQpmdW5jdGlvbiB2KCl7cj0xO3QoNDAsNDAsMjU2LCIjMDAwIik7dCg0Miw0MiwyNTIsIiNFRUUiKTt1KDE2LCJFYXN5ICAgICAgTWVkaXVtICAgICAgSGFyZCIsODIsMTY4KX1mdW5jdGlvbiBzKGEpe3QoMCwwLGssIiNGRkYiKTtpZihhKXttPVsxMiwxNiwyMV1bcV07bj1bMjIsMjgsMzNdW3FdO3A9W107Zm9yKGE9bTthLS07KXtwW2FdPVtdO2Zvcih2YXIgYj1tO2ItLTspcFthXVtiXT02Kk1hdGgucmFuZG9tKCl8MH19bz1wWzBdWzBdO3ZhciBkPTEsYz0zMzYvbTtmb3IoYT1tO2EtLTspZm9yKGI9bTtiLS07dChjKmIsYyphLGMsZVtpXSkpZCY9KGk9cFthXVtiXSk9PW87Zm9yKGkgaW4gZSl0KGcqaSxoLGcsZVtpXSk7dSgxNiwiTW92ZXMgcmVtYWluaW5nOiAiK24sMCw0MTYpO2lmKGR8fCFuKXt2KCk7dSgzMixkPyIgICBXaW5uZXIhIjoiR2FtZSBPdmVyIiw4OCwxMDQpfX12KCk7
var buttonColors = ['#F72', '#FF6', '#7C3', '#6AF', '#34F', '#333'],
boardSize = 16 * 21,
buttonGap = 8,
canvasOffset = 8,
buttonSize = boardSize / 6,
buttonsTop = boardSize + buttonGap,
scoreGap = 8,
scoreSize = 16,
scoreTop = buttonsTop + buttonSize + scoreGap + scoreSize / 2,
canvas = document.body.children[0],
canvasSize = canvas.width = canvas.height = scoreTop + scoreSize / 2,
$ = canvas.getContext('2d'),
n,
movesLeft,
currentColor,
board,
difficulty,
mode;
canvas.onclick = function(event) {
var color = (event.pageX - canvasOffset) / buttonSize | 0;
function paint(x, y) {
if (board[y] && board[y][x] == currentColor) {
board[y][x] = color;
paint(x - 1, y);
paint(x, y - 1);
paint(x + 1, y);
paint(x, y + 1);
}
}
if (mode) {
mode = 0;
difficulty = color < 2 ? 0 : color > 3 ? 2 : 1;
updateBoard(1);
} else if (event.pageY - canvasOffset > buttonsTop && color - currentColor) {
paint(0, 0);
--movesLeft;
updateBoard(0);
}
}
function drawRectangle(x, y, length, color) {
$.fillStyle = color;
$.fillRect(x, y, length, length);
}
function drawText(fontSize, text, x, y) {
$.font = fontSize + 'px Arial';
$.fillStyle = buttonColors[5];
$.fillText(text, x, y);
}
function askDifficulty() {
mode = 1;
drawRectangle(boardSize / 2 - 128, boardSize / 2 - 128, 256, '#000');
drawRectangle(boardSize / 2 - 128 + 2, boardSize / 2 - 128 + 2, 256 - 4, '#EEE');
drawText(16, 'Easy Medium Hard', boardSize / 2 - 86, boardSize / 2);
}
function updateBoard(newGame) {
drawRectangle(0, 0, canvasSize, '#FFF');
if (newGame) {
n = [12, 16, 21][difficulty];
movesLeft = [22, 28, 33][difficulty];
board = [];
for (var y = n; y--;) {
board[y] = [];
for (var x = n; x--;)
board[y][x] = 6 * Math.random() | 0;
}
}
currentColor = board[0][0];
var win = 1, cellSize = boardSize / n;
for (var y = n; y--;)
for (var x = n; x--; drawRectangle(cellSize * x, cellSize * y, cellSize, buttonColors[i]))
win &= (i = board[y][x]) == currentColor;
for (i in buttonColors)
drawRectangle(buttonSize * i, buttonsTop, buttonSize, buttonColors[i]);
drawText(16, 'Moves remaining: ' + movesLeft, 0, scoreTop);
if (win || !movesLeft) {
askDifficulty();
drawText(32, win ? ' Winner!' : 'Game Over', boardSize / 2 - 80, boardSize / 2 - 64);
}
}
askDifficulty();