ernestom/juego-caras.html

## juego-caras.html
<!DOCTYPE html>
<html><head><title>Caritas</title></head>
<body>
	<style>

	body{ padding-left:50px;}
	#stage {
	    border:1px solid #ccc;
	    cursor:pointer;
	    background:#eee;
		padding:0px;
		position:relative;
	}
	.hidden {
		display:none;
	}
	.ok {
		text-decoration:line-through;
	}
	</style>

<h1>Juego de Caritas</h1>
<div id="stage" class="hidden"></div>

<select id="level">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>

<button id="start">Comenzar</button>

<h2>Identifica a las siguientes celebridades:</h2>
<ul id="answers" class="hidden">
</ul>

<script>
var people = [
    {name: "Gary Oldman", slug: "gary-oldman", p: 13},
    {name: "Hugo Weaving", slug: "hugo-weaving", p: 12},
    {name: "Matt Damon", slug: "matt-damon", p: 12},
    {name: "Daniel Radcliffe", slug: "daniel-radcliffe", p: 11},
    {name: "Emma Watson", slug: "emma-watson", p: 11},
    {name: "Rupert Grint", slug: "rupert-grint", p: 10},
    {name: "Marion Cotillard", slug: "marion-cotillard", p: 9},
    {name: "Michael Caine", slug: "michael-caine", p: 9},
    {name: "Ken Jeong", slug: "ken-jeong", p: 8},
    {name: "Cameron Diaz", slug: "cameron-diaz", p: 8},
    {name: "Natalie Portman", slug: "natalie-portman", p: 8},
    {name: "Joan Cusack", slug: "joan-cusack", p: 8},
    {name: "Antonio Banderas", slug: "antonio-banderas", p: 8},
    {name: "Jude Law", slug: "jude-law", p: 8},
    {name: "Ewan McGregor", slug: "ewan-mcgregor", p: 7},
    {name: "Maggie Smith", slug: "maggie-smith", p: 7},
    {name: "Hank Azaria", slug: "hank-azaria", p: 7},
    {name: "Robert De Niro", slug: "robert-de-niro", p: 7},
    {name: "Liam Neeson", slug: "liam-neeson", p: 7},
    {name: "Brad Pitt", slug: "brad-pitt", p: 7},
    {name: "Michael Gambon", slug: "michael-gambon", p: 7},
    {name: "Helena Bonham Carter", slug: "helena-bonham-carter", p: 7} ,
    {name: "Tom Hardy", slug: "tom-hardy", p: 7},
    {name: "Seth Rogen", slug: "seth-rogen", p: 7},
    {name: "Johnny Depp", slug: "johnny-depp", p: 6},
    {name: "Bill Nighy", slug: "bill-nighy", p: 6},
    {name: "Zach Galifianakis", slug: "zach-galifianakis", p: 6},
    {name: "Ralph Fiennes", slug: "ralph-fiennes", p: 6},
    {name: "Simon Pegg", slug: "simon-pegg", p: 6},
    {name: "Jon Hamm", slug: "jon-hamm", p: 6},
    {name: "Milla Jovovich", slug: "milla-jovovich", p: 6},
    {name: "Vanessa Hudgens", slug: "vanessa-hudgens", p: 6},
    {name: "Nicolas Cage", slug: "nicolas-cage", p: 6},
    {name: "Jason Segel", slug: "jason-segel", p: 6},
    {name: "Tom Hanks", slug: "tom-hanks", p: 6},
    {name: "James McAvoy", slug: "james-mcavoy", p: 6},
    {name: "Joaquín Cosío", slug: "joaquin-cosio", p: 6},
    {name: "Justin Timberlake", slug: "justin-timberlake", p: 6},
    {name: "Dwayne Johnson", slug: "dwayne-johnson", p: 6},
    {name: "Sam Worthington", slug: "sam-worthington", p: 6},
    {name: "Salma Hayek", slug: "salma-hayek", p: 6},
    {name: "Anne Hathaway", slug: "anne-hathaway", p: 6},
    {name: "Daniel Craig", slug: "daniel-craig", p: 6},
    {name: "Jason Statham", slug: "jason-statham", p: 6},
    {name: "Alan Rickman", slug: "alan-rickman", p: 6},
    {name: "Christoph Waltz", slug: "christoph-waltz", p: 6},
    {name: "Danny McBride", slug: "danny-mcbride", p: 5},
    {name: "James Franco", slug: "james-franco", p: 5},
    {name: "Ciarán Hinds", slug: "ciaran-hinds", p: 5},
    {name: "Sigourney Weaver", slug: "sigourney-weaver", p: 5},
    {name: "Kate Winslet", slug: "kate-winslet", p: 5},
    {name: "Josh Duhamel", slug: "josh-duhamel", p: 5},
    {name: "Olivia Wilde", slug: "olivia-wilde", p: 5},
    {name: "Aaron Eckhart", slug: "aaron-eckhart", p: 5},
    {name: "Naomi Watts", slug: "naomi-watts", p: 5},
    {name: "Jack Black", slug: "jack-black", p: 5},
    {name: "Joseph Gordon-Levitt", slug: "joseph-gordon-levitt", p: 5} ,
    {name: "Stellan Skarsgard", slug: "stellan-skarsgard", p: 5},
    {name: "Jamie Bell", slug: "jamie-bell", p: 5},
    {name: "Shia LaBeouf", slug: "shia-labeouf", p: 5},
    {name: "Jim Broadbent", slug: "jim-broadbent", p: 5},
    {name: "Stephen Lang", slug: "stephen-lang", p: 5},
    {name: "Josh Hutcherson", slug: "josh-hutcherson", p: 5},
    {name: "Justin Long", slug: "justin-long", p: 5},
    {name: "Angelina Jolie", slug: "angelina-jolie", p: 5},
    {name: "Chris Evans", slug: "chris-evans", p: 5},
    {name: "David Yates", slug: "david-yates", p: 5},
    {name: "Jesse Eisenberg", slug: "jesse-eisenberg", p: 5},
    {name: "Colin Farrell", slug: "colin-farrell", p: 5},
    {name: "Dustin Hoffman", slug: "dustin-hoffman", p: 5},
    {name: "Jim Sturgess", slug: "jim-sturgess", p: 5},
    {name: "Morgan Freeman", slug: "morgan-freeman", p: 5},
    {name: "Amber Heard", slug: "amber-heard", p: 5},
    {name: "Jessica Alba", slug: "jessica-alba", p: 5},
    {name: "Laurence Fishburne", slug: "laurence-fishburne", p: 5},
    {name: "Leonardo DiCaprio", slug: "leonardo-dicaprio", p: 5},
    {name: "Ryan Gosling", slug: "ryan-gosling", p: 5},
    {name: "Tyrese Gibson", slug: "tyrese-gibson", p: 5},
    {name: "Richard Jenkins", slug: "richard-jenkins", p: 5},
    {name: "Robin Wright", slug: "robin-wright", p: 5},
    {name: "Scott Speedman", slug: "scott-speedman", p: 5},
    {name: "Anthony Hopkins", slug: "anthony-hopkins", p: 5},
    {name: "Michelle Rodriguez", slug: "michelle-rodriguez", p: 5},
    {name: "Owen Wilson", slug: "owen-wilson", p: 5},
    {name: "Jonah Hill", slug: "jonah-hill", p: 5},
    {name: "Lucy Liu", slug: "lucy-liu", p: 5},
    {name: "Emily Blunt", slug: "emily-blunt", p: 5},
    {name: "Stanley Tucci", slug: "stanley-tucci", p: 5},
    {name: "Tom Hiddleston", slug: "tom-hiddleston", p: 5},
    {name: "Kristen Wiig", slug: "kristen-wiig", p: 5},
    {name: "Mark Strong", slug: "mark-strong", p: 5},
    {name: "Russell Brand", slug: "russell-brand", p: 4},
    {name: "Giovanni Ribisi", slug: "giovanni-ribisi", p: 4},
    {name: "Geoffrey Rush", slug: "geoffrey-rush", p: 4},
    {name: "Freida Pinto", slug: "freida-pinto", p: 4},
    {name: "Robert Pattinson", slug: "robert-pattinson", p: 4},
    {name: "Chris Miller", slug: "chris-miller", p: 4},
    {name: "John Hurt", slug: "john-hurt", p: 4},
    {name: "Robbie Coltrane", slug: "robbie-coltrane", p: 4},
    {name: "Sofia Vergara", slug: "sofia-vergara", p: 4}
];


////////
Array.prototype.shuffle = function() {
	for (var i = 0, len = this.length; i < len; i++) {
        var rand = Math.floor(Math.random() * len);
		var temp = this[i];
		this[i] = this[rand];
		this[rand] = temp;
	}
	return this;
}
/////////

var options = {
    stageId:           'stage',
    canvasClass:       'canvas',
    cell:              {maxItems: 25, maxItemsPerRow: 5, width: 48, height: 48},
    imageUrl:          'http://c.cdn.entucine.com/enelcine/media/credits/credit-small-{URL}.jpg',
    defaultImageUrl:   'http://a.cdn.entucine.com/enelcine/frontend/img/default_small_credit.png',
    data:              people,
    star:              {density: 100, fillStyle: ['yellow', 'red', 'pink'], radio: 10, skinny: false, interval: 500},
    answers:           {required: 3}
};


// variables de interface
var stage = document.getElementById(options.stageId),
	selLevel = document.getElementById('level'),
	btnStart = document.getElementById('start'),
	ulAnswers = document.getElementById('answers');

var expectedAnswers = [];


function getData() {
	options.data.shuffle();
	var d = [];
	var max = options.cell.maxItems;
	// rebanamos data
	if (max && max <= options.data.length) {
		d = options.data.slice(0, max);
	}
	return d;
}

function createCanvas(name, w, h, absolute) {
	var c = document.createElement('canvas');
	c.width = w;
	c.height = h;
	c.className = options.canvasClass + ' ' + name;
	if (absolute) {
		c.style.position = 'absolute';
		c.style.left = window.getComputedStyle(stage, null).getPropertyValue('padding-left');
	}
	stage.appendChild(c);
	return c;
}

function init() {
	stage.innerHTML = '';
	expectedAnswers = [];
	ulAnswers.innerHTML = '';

	var data = getData();

	// calcular dimensiones de canvas
	var width = options.cell.maxItemsPerRow * options.cell.width;
	var height = data.length / options.cell.maxItemsPerRow * options.cell.height;

	stage.style.width = width + 'px';
	stage.style.height = height + 'px';

	// caritas
	var bgCanvas = createCanvas('bg', width, height, false);
	// estrellitas
	var fgCanvas = createCanvas('fg', width, height, true);

	fillCanvasWithFaces(bgCanvas, data);

	setInterval(function() {
		fillCanvasWithStars(fgCanvas);
	}, options.star.interval);

	fgCanvas.addEventListener('mousedown', checkCanvasClick);

	// determinar las respuestas esperadas

	for (var i = 0; i < options.answers.required; i++) {

		// carita aleatoria
		var rindex = Math.floor(Math.random() * data.length);
		var answer = data[rindex];
		answer.index = rindex;
		console.log(answer);
		expectedAnswers.push(answer);

		// mostrar las opciones al usuario
		var li = document.createElement('li');
		li.innerHTML = answer.name;
		li.id = answer.slug;
		ulAnswers.appendChild(li);
	}
}

function getFaceIndexFromEvent(event) {
	var x = event.offsetX || event.layerX,
	 	y = event.offsetY || event.layerY;

	var cell = Math.floor(x / options.cell.width),
	 	row = Math.floor(y / options.cell.height);

	return cell + (row * options.cell.maxItemsPerRow);
}

function checkCanvasClick(event) {
	var answerClickIndex = getFaceIndexFromEvent(event);
	console.log(answerClickIndex)
	for (var i = 0; i < expectedAnswers.length; i++) {
		var answer = expectedAnswers[i];
		if (answer.index == answerClickIndex) {
			document.getElementById(answer.slug).className = 'ok';
			console.log('OK');
			return;
		}
	}
	console.log('Error')
}

function drawFace(canvas, imageUrl, x, y) {
	var ctx = canvas.getContext('2d');
	var image = new Image();
	image.onload = function() {
		ctx.drawImage(image, x, y);
	};
	image.onerror = function() {
		var defaultImage = new Image();
		defaultImage.onload = function() {
			ctx.drawImage(defaultImage, x, y);
		}
		defaultImage.src = options.defaultImageUrl;
	}
	image.src = imageUrl;
}

function fillCanvasWithFaces(canvas, data) {
	for (var row = 0, cell = 0, i = 0, total = data.length;
		 i < total;
		 i++) {

		var person = people[i];
		var personImgUrl = options.imageUrl.replace('{URL}', person.slug)

		var offsetX = options.cell.width * cell;
		var offsetY = options.cell.height * row;

		drawFace(canvas, personImgUrl, offsetX, offsetY);
		//console.log(person.name, offsetX, offsetY, cell, row)

		// saltar de fila y resetear celda
		if ((cell + 1) >= options.cell.maxItemsPerRow) {
			cell = 0;
			row++;
		// saltar de celda
		} else {
			cell++;
		}

	}
}
function fillCanvasWithStars(canvas) {
	var ctx = canvas.getContext('2d');
	var w = canvas.width,
		h = canvas.height;
	// borrar canvas
	ctx.clearRect(0, 0, w, h);

	// pintar las estrellas en puntos aleatorios
	for (var i = 0; i < options.star.density; i++) {
		ctx.save();
		// color aleatorio
		options.star.fillStyle.shuffle();
		var rcolor = options.star.fillStyle[0];

		ctx.fillStyle = rcolor;
		// definir posición aleatoria
		var rx = w - Math.floor(Math.random() * w);
		var ry = w - Math.floor(Math.random() * w);
		ctx.translate(rx, ry);

		var rradio = Math.floor(Math.random() * options.star.radio + 2);

		drawStar(canvas, rradio);

		ctx.restore()
	}

}

function drawStar(canvas, radio) {
	var ctx = canvas.getContext('2d');

	ctx.save();
    ctx.beginPath()
    ctx.moveTo(radio, 0);
    for (i = 0; i < 9; i++){
        ctx.rotate(Math.PI / 5);
        if (i % 2 == 0) {
            ctx.lineTo((radio / (0.525731 + (options.star.skinny ? 1 : 0))) * 0.200811, 0);
        } else {
            ctx.lineTo(radio, 0);
        }
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}


btnStart.addEventListener('click', function() {

	stage.className = '';
	ulAnswers.className = '';
	btnStart.innerHTML = 'Volver a empezar';

	// determinar dificultad según nivel
	var level = selLevel.value;
	if (level == 1) {
		options.star.density = 20;
		options.star.skinny = true;
		options.cell.maxItems = 9;
		options.cell.maxItemsPerRow = 3;
		options.answers.required = 1;
	}
	if (level == 2) {
		options.star.density = 40;
		options.star.skinny = false;
		options.cell.maxItems = 16;
		options.cell.maxItemsPerRow = 4;
		options.answers.required = 2;
	}
	if (level == 3) {
		options.star.density = 80;
		options.star.skinny = false;
		options.cell.maxItems = 25;
		options.cell.maxItemsPerRow = 5;
		options.answers.required = 5;
	}

	init();
});


</script>
</body>
<html>
	<!DOCTYPE html>
	<html><head><title>Caritas</title></head>
	<body>
	<style>

	body{ padding-left:50px;}
	#stage {
	border:1px solid #ccc;
	cursor:pointer;
	background:#eee;
	padding:0px;
	position:relative;
	}
	.hidden {
	display:none;
	}
	.ok {
	text-decoration:line-through;
	}
	</style>

	<h1>Juego de Caritas</h1>
	<div id="stage" class="hidden"></div>

	<select id="level">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	</select>

	<button id="start">Comenzar</button>

	<h2>Identifica a las siguientes celebridades:</h2>
	<ul id="answers" class="hidden">
	</ul>

	<script>
	var people = [
	{name: "Gary Oldman", slug: "gary-oldman", p: 13},
	{name: "Hugo Weaving", slug: "hugo-weaving", p: 12},
	{name: "Matt Damon", slug: "matt-damon", p: 12},
	{name: "Daniel Radcliffe", slug: "daniel-radcliffe", p: 11},
	{name: "Emma Watson", slug: "emma-watson", p: 11},
	{name: "Rupert Grint", slug: "rupert-grint", p: 10},
	{name: "Marion Cotillard", slug: "marion-cotillard", p: 9},
	{name: "Michael Caine", slug: "michael-caine", p: 9},
	{name: "Ken Jeong", slug: "ken-jeong", p: 8},
	{name: "Cameron Diaz", slug: "cameron-diaz", p: 8},
	{name: "Natalie Portman", slug: "natalie-portman", p: 8},
	{name: "Joan Cusack", slug: "joan-cusack", p: 8},
	{name: "Antonio Banderas", slug: "antonio-banderas", p: 8},
	{name: "Jude Law", slug: "jude-law", p: 8},
	{name: "Ewan McGregor", slug: "ewan-mcgregor", p: 7},
	{name: "Maggie Smith", slug: "maggie-smith", p: 7},
	{name: "Hank Azaria", slug: "hank-azaria", p: 7},
	{name: "Robert De Niro", slug: "robert-de-niro", p: 7},
	{name: "Liam Neeson", slug: "liam-neeson", p: 7},
	{name: "Brad Pitt", slug: "brad-pitt", p: 7},
	{name: "Michael Gambon", slug: "michael-gambon", p: 7},
	{name: "Helena Bonham Carter", slug: "helena-bonham-carter", p: 7} ,
	{name: "Tom Hardy", slug: "tom-hardy", p: 7},
	{name: "Seth Rogen", slug: "seth-rogen", p: 7},
	{name: "Johnny Depp", slug: "johnny-depp", p: 6},
	{name: "Bill Nighy", slug: "bill-nighy", p: 6},
	{name: "Zach Galifianakis", slug: "zach-galifianakis", p: 6},
	{name: "Ralph Fiennes", slug: "ralph-fiennes", p: 6},
	{name: "Simon Pegg", slug: "simon-pegg", p: 6},
	{name: "Jon Hamm", slug: "jon-hamm", p: 6},
	{name: "Milla Jovovich", slug: "milla-jovovich", p: 6},
	{name: "Vanessa Hudgens", slug: "vanessa-hudgens", p: 6},
	{name: "Nicolas Cage", slug: "nicolas-cage", p: 6},
	{name: "Jason Segel", slug: "jason-segel", p: 6},
	{name: "Tom Hanks", slug: "tom-hanks", p: 6},
	{name: "James McAvoy", slug: "james-mcavoy", p: 6},
	{name: "Joaquín Cosío", slug: "joaquin-cosio", p: 6},
	{name: "Justin Timberlake", slug: "justin-timberlake", p: 6},
	{name: "Dwayne Johnson", slug: "dwayne-johnson", p: 6},
	{name: "Sam Worthington", slug: "sam-worthington", p: 6},
	{name: "Salma Hayek", slug: "salma-hayek", p: 6},
	{name: "Anne Hathaway", slug: "anne-hathaway", p: 6},
	{name: "Daniel Craig", slug: "daniel-craig", p: 6},
	{name: "Jason Statham", slug: "jason-statham", p: 6},
	{name: "Alan Rickman", slug: "alan-rickman", p: 6},
	{name: "Christoph Waltz", slug: "christoph-waltz", p: 6},
	{name: "Danny McBride", slug: "danny-mcbride", p: 5},
	{name: "James Franco", slug: "james-franco", p: 5},
	{name: "Ciarán Hinds", slug: "ciaran-hinds", p: 5},
	{name: "Sigourney Weaver", slug: "sigourney-weaver", p: 5},
	{name: "Kate Winslet", slug: "kate-winslet", p: 5},
	{name: "Josh Duhamel", slug: "josh-duhamel", p: 5},
	{name: "Olivia Wilde", slug: "olivia-wilde", p: 5},
	{name: "Aaron Eckhart", slug: "aaron-eckhart", p: 5},
	{name: "Naomi Watts", slug: "naomi-watts", p: 5},
	{name: "Jack Black", slug: "jack-black", p: 5},
	{name: "Joseph Gordon-Levitt", slug: "joseph-gordon-levitt", p: 5} ,
	{name: "Stellan Skarsgard", slug: "stellan-skarsgard", p: 5},
	{name: "Jamie Bell", slug: "jamie-bell", p: 5},
	{name: "Shia LaBeouf", slug: "shia-labeouf", p: 5},
	{name: "Jim Broadbent", slug: "jim-broadbent", p: 5},
	{name: "Stephen Lang", slug: "stephen-lang", p: 5},
	{name: "Josh Hutcherson", slug: "josh-hutcherson", p: 5},
	{name: "Justin Long", slug: "justin-long", p: 5},
	{name: "Angelina Jolie", slug: "angelina-jolie", p: 5},
	{name: "Chris Evans", slug: "chris-evans", p: 5},
	{name: "David Yates", slug: "david-yates", p: 5},
	{name: "Jesse Eisenberg", slug: "jesse-eisenberg", p: 5},
	{name: "Colin Farrell", slug: "colin-farrell", p: 5},
	{name: "Dustin Hoffman", slug: "dustin-hoffman", p: 5},
	{name: "Jim Sturgess", slug: "jim-sturgess", p: 5},
	{name: "Morgan Freeman", slug: "morgan-freeman", p: 5},
	{name: "Amber Heard", slug: "amber-heard", p: 5},
	{name: "Jessica Alba", slug: "jessica-alba", p: 5},
	{name: "Laurence Fishburne", slug: "laurence-fishburne", p: 5},
	{name: "Leonardo DiCaprio", slug: "leonardo-dicaprio", p: 5},
	{name: "Ryan Gosling", slug: "ryan-gosling", p: 5},
	{name: "Tyrese Gibson", slug: "tyrese-gibson", p: 5},
	{name: "Richard Jenkins", slug: "richard-jenkins", p: 5},
	{name: "Robin Wright", slug: "robin-wright", p: 5},
	{name: "Scott Speedman", slug: "scott-speedman", p: 5},
	{name: "Anthony Hopkins", slug: "anthony-hopkins", p: 5},
	{name: "Michelle Rodriguez", slug: "michelle-rodriguez", p: 5},
	{name: "Owen Wilson", slug: "owen-wilson", p: 5},
	{name: "Jonah Hill", slug: "jonah-hill", p: 5},
	{name: "Lucy Liu", slug: "lucy-liu", p: 5},
	{name: "Emily Blunt", slug: "emily-blunt", p: 5},
	{name: "Stanley Tucci", slug: "stanley-tucci", p: 5},
	{name: "Tom Hiddleston", slug: "tom-hiddleston", p: 5},
	{name: "Kristen Wiig", slug: "kristen-wiig", p: 5},
	{name: "Mark Strong", slug: "mark-strong", p: 5},
	{name: "Russell Brand", slug: "russell-brand", p: 4},
	{name: "Giovanni Ribisi", slug: "giovanni-ribisi", p: 4},
	{name: "Geoffrey Rush", slug: "geoffrey-rush", p: 4},
	{name: "Freida Pinto", slug: "freida-pinto", p: 4},
	{name: "Robert Pattinson", slug: "robert-pattinson", p: 4},
	{name: "Chris Miller", slug: "chris-miller", p: 4},
	{name: "John Hurt", slug: "john-hurt", p: 4},
	{name: "Robbie Coltrane", slug: "robbie-coltrane", p: 4},
	{name: "Sofia Vergara", slug: "sofia-vergara", p: 4}
	];


	////////
	Array.prototype.shuffle = function() {
	for (var i = 0, len = this.length; i < len; i++) {
	var rand = Math.floor(Math.random() * len);
	var temp = this[i];
	this[i] = this[rand];
	this[rand] = temp;
	}
	return this;
	}
	/////////

	var options = {
	stageId: 'stage',
	canvasClass: 'canvas',
	cell: {maxItems: 25, maxItemsPerRow: 5, width: 48, height: 48},
	imageUrl: 'http://c.cdn.entucine.com/enelcine/media/credits/credit-small-{URL}.jpg',
	defaultImageUrl: 'http://a.cdn.entucine.com/enelcine/frontend/img/default_small_credit.png',
	data: people,
	star: {density: 100, fillStyle: ['yellow', 'red', 'pink'], radio: 10, skinny: false, interval: 500},
	answers: {required: 3}
	};


	// variables de interface
	var stage = document.getElementById(options.stageId),
	selLevel = document.getElementById('level'),
	btnStart = document.getElementById('start'),
	ulAnswers = document.getElementById('answers');

	var expectedAnswers = [];


	function getData() {
	options.data.shuffle();
	var d = [];
	var max = options.cell.maxItems;
	// rebanamos data
	if (max && max <= options.data.length) {
	d = options.data.slice(0, max);
	}
	return d;
	}

	function createCanvas(name, w, h, absolute) {
	var c = document.createElement('canvas');
	c.width = w;
	c.height = h;
	c.className = options.canvasClass + ' ' + name;
	if (absolute) {
	c.style.position = 'absolute';
	c.style.left = window.getComputedStyle(stage, null).getPropertyValue('padding-left');
	}
	stage.appendChild(c);
	return c;
	}

	function init() {
	stage.innerHTML = '';
	expectedAnswers = [];
	ulAnswers.innerHTML = '';

	var data = getData();

	// calcular dimensiones de canvas
	var width = options.cell.maxItemsPerRow * options.cell.width;
	var height = data.length / options.cell.maxItemsPerRow * options.cell.height;

	stage.style.width = width + 'px';
	stage.style.height = height + 'px';

	// caritas
	var bgCanvas = createCanvas('bg', width, height, false);
	// estrellitas
	var fgCanvas = createCanvas('fg', width, height, true);

	fillCanvasWithFaces(bgCanvas, data);

	setInterval(function() {
	fillCanvasWithStars(fgCanvas);
	}, options.star.interval);

	fgCanvas.addEventListener('mousedown', checkCanvasClick);

	// determinar las respuestas esperadas

	for (var i = 0; i < options.answers.required; i++) {

	// carita aleatoria
	var rindex = Math.floor(Math.random() * data.length);
	var answer = data[rindex];
	answer.index = rindex;
	console.log(answer);
	expectedAnswers.push(answer);

	// mostrar las opciones al usuario
	var li = document.createElement('li');
	li.innerHTML = answer.name;
	li.id = answer.slug;
	ulAnswers.appendChild(li);
	}
	}

	function getFaceIndexFromEvent(event) {
	var x = event.offsetX \|\| event.layerX,
	y = event.offsetY \|\| event.layerY;

	var cell = Math.floor(x / options.cell.width),
	row = Math.floor(y / options.cell.height);

	return cell + (row * options.cell.maxItemsPerRow);
	}

	function checkCanvasClick(event) {
	var answerClickIndex = getFaceIndexFromEvent(event);
	console.log(answerClickIndex)
	for (var i = 0; i < expectedAnswers.length; i++) {
	var answer = expectedAnswers[i];
	if (answer.index == answerClickIndex) {
	document.getElementById(answer.slug).className = 'ok';
	console.log('OK');
	return;
	}
	}
	console.log('Error')
	}

	function drawFace(canvas, imageUrl, x, y) {
	var ctx = canvas.getContext('2d');
	var image = new Image();
	image.onload = function() {
	ctx.drawImage(image, x, y);
	};
	image.onerror = function() {
	var defaultImage = new Image();
	defaultImage.onload = function() {
	ctx.drawImage(defaultImage, x, y);
	}
	defaultImage.src = options.defaultImageUrl;
	}
	image.src = imageUrl;
	}

	function fillCanvasWithFaces(canvas, data) {
	for (var row = 0, cell = 0, i = 0, total = data.length;
	i < total;
	i++) {

	var person = people[i];
	var personImgUrl = options.imageUrl.replace('{URL}', person.slug)

	var offsetX = options.cell.width * cell;
	var offsetY = options.cell.height * row;

	drawFace(canvas, personImgUrl, offsetX, offsetY);
	//console.log(person.name, offsetX, offsetY, cell, row)

	// saltar de fila y resetear celda
	if ((cell + 1) >= options.cell.maxItemsPerRow) {
	cell = 0;
	row++;
	// saltar de celda
	} else {
	cell++;
	}

	}
	}
	function fillCanvasWithStars(canvas) {
	var ctx = canvas.getContext('2d');
	var w = canvas.width,
	h = canvas.height;
	// borrar canvas
	ctx.clearRect(0, 0, w, h);

	// pintar las estrellas en puntos aleatorios
	for (var i = 0; i < options.star.density; i++) {
	ctx.save();
	// color aleatorio
	options.star.fillStyle.shuffle();
	var rcolor = options.star.fillStyle[0];

	ctx.fillStyle = rcolor;
	// definir posición aleatoria
	var rx = w - Math.floor(Math.random() * w);
	var ry = w - Math.floor(Math.random() * w);
	ctx.translate(rx, ry);

	var rradio = Math.floor(Math.random() * options.star.radio + 2);

	drawStar(canvas, rradio);

	ctx.restore()
	}

	}

	function drawStar(canvas, radio) {
	var ctx = canvas.getContext('2d');

	ctx.save();
	ctx.beginPath()
	ctx.moveTo(radio, 0);
	for (i = 0; i < 9; i++){
	ctx.rotate(Math.PI / 5);
	if (i % 2 == 0) {
	ctx.lineTo((radio / (0.525731 + (options.star.skinny ? 1 : 0))) * 0.200811, 0);
	} else {
	ctx.lineTo(radio, 0);
	}
	}
	ctx.closePath();
	ctx.fill();
	ctx.restore();
	}


	btnStart.addEventListener('click', function() {

	stage.className = '';
	ulAnswers.className = '';
	btnStart.innerHTML = 'Volver a empezar';

	// determinar dificultad según nivel
	var level = selLevel.value;
	if (level == 1) {
	options.star.density = 20;
	options.star.skinny = true;
	options.cell.maxItems = 9;
	options.cell.maxItemsPerRow = 3;
	options.answers.required = 1;
	}
	if (level == 2) {
	options.star.density = 40;
	options.star.skinny = false;
	options.cell.maxItems = 16;
	options.cell.maxItemsPerRow = 4;
	options.answers.required = 2;
	}
	if (level == 3) {
	options.star.density = 80;
	options.star.skinny = false;
	options.cell.maxItems = 25;
	options.cell.maxItemsPerRow = 5;
	options.answers.required = 5;
	}

	init();
	});



	</script>
	</body>
	<html>