Tutorial - Parte 3 - Fazendo um Genius em PhoneGAP

Terceira parte, e vamos que vamos! :)

Depois que a seqüência é exibida, precisamos obter os itens (cores) que o usuário digitar. Para isso, vamos mexer na função swithOnLight():

/**
* Função de acende a luz do item da seqüência selecionada
  */
function swithOnLight() {
//Se o indice esta na seqüência...
if ((index >=0) && (index < sequence.length)) {
  //Obtem o item da seqüência
  selected = sequence[index];
    //Acende a "luz" do item indicado
    switchLight(selected.x, selected.y);
    //Espera meio segundo para apagar o item selecionado
    setTimeout('switchOffLight();', 500);
} else {
   //Se o indice não estiver seqüência ou chegou no fim da seqüência,
   //habilito os botões para que o usuário possa digitar a seqüência de cores
index = 0;
alert('Sua vez!');
for (var i = 0; i < 4; i++) {
var el = document.getElementById('genius[' + parseInt(i % 2) + '][' + parseInt(i / 2) + ']');
if (typeof(el.ontouchstart)!='undefined') {
el.ontouchstart = play;
} else if (typeof(el.onclick)!='undefined') {
el.onclick = play;
}
}    
}
}

Agora, precisamos verificar se a seqüência que o usuário digitar é válida através da função play:

/**
* Função do evento de click de um dos botões de cores
*/
function play(event) {
   var el = event.srcElement;
        var color = "" + el.style.backgroundColor;
        //Troco a cor deste (se ele estiver mais escuro (por exemplo RGB(0,153,0)) , coloco uma cor mais clara (RGB(0,255,0) ou vice-versa)
        color = color.indexOf('153') >= 0 ? color.replace(/153/gi,'255') : color.replace(/255/gi,'153');
        //Coloco a nova cor para o elemento a ser exibido
        el.style.backgroundColor = color;
        setTimeout(function() {
            //Verifico se o que o usuário clicou esta correto na seqüência guardada
if (el.id == 'genius[' + sequence[index].x + '][' + sequence[index].y + ']') {
//Se sim passo para o próximo item da seqüência
index++;
//Se for o último item é por que a seqüência esta correta e completa.
if (sequence.length == index) {
alert('Seqüência correta!');
//Desabilito os botões de cores (Removo os eventos)
for (var i = 0; i < 4; i++) {
var btnCores = document.getElementById('genius[' + parseInt(i % 2) + '][' + parseInt(i / 2) + ']');
if (typeof(btnCores.ontouchstart)!='undefined') {
btnCores.ontouchstart = null;
} else if (typeof(el.onclick)!='undefined') {
btnCores.onclick = null;
}
}
//Habilito o botão de Start!
btnStart.disabled = false;
}
} else {
   //Senão, ele errou e deve fazer a seqüência tudo de novo
index = 0;
alert('Errou! Tente de novo!');
}
       //Troco a cor deste (se ele estiver mais escuro (por exemplo RGB(0,153,0)) , coloco uma cor mais clara (RGB(0,255,0) ou vice-versa)
       color = color.indexOf('153') >= 0 ? color.replace(/153/gi,'255') : color.replace(/255/gi,'153');
        //Coloco a nova cor para o elemento a ser exibido
        el.style.backgroundColor = color;
}, 500);
}

Ufa..., agora só falta instalar o PhoneGap para Android ou para iOS (e isso vai ser feito no próximo tutorial) :)

Até mais!