Tutorial - Parte 2 - Fazendo um Genius em PhoneGAP

Vamos continuar o tutorial, agora escrevendo uma parte do javascript (aquela que "liga" e "desliga" as "luzes"):

Primeiramente, vamos criar uma funçāo que obtem um elemento e troca a cor deste para uma mais clara ou escura, dependendo do estado anterior:

<SCRIPT>
      /*
       * Função que "liga" ou "desliga" a "luz"
       * Parametros: x - posição horizontal da "luz" (0 (coluna 1) ou 1 (coluna 2)), y - posição vertical da "luz" (0 (linha 1) ou 1 (linha 2))
       */
        function switchLight(x, y) {
            //Obtenho o elemento que exibe a cor
            var el = document.getElementById('genius['+ x +']['+ y +']');
            //Obtenho a cor do elemento
            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;
        }
</SCRIPT>

Para ver se a função deu certo, coloco esta no evento onclick (ou ontouchstart, em mobile) no botão:

<!-- Acende ou apaga a "luz" verde-->
<BUTTON id="start" ontouchstart="switchLight(0,0);">Start!</BUTTON>

Se tudo ocorrer bem, quando você clicar no botão "Start!", ele vai acender a luz verde e, quando clicar de novo, apagar! :)

Próximo passo: precisamos guardar a seqüência das luzes a cada nova interação. Para isso, criamos uma variável global (array):

var sequence = [];

E também uma função que gera e guarda a seqüência:

/* Função que gera uma seqüência: escolhe uma linha (zero ou um) e uma coluna (zero ou um) e guarda em um array
 */
function addSequence() {
//Gera um número aleatório de 0 ao 1
var x = Math.round(Math.random());
//Gera um número aleatório de 0 ao 1
var y = Math.round(Math.random());
//Guarda em um array
sequence.push({"x": x, "y": y});
}

Agora vem a parte mais difícil, que é reproduzir a seqüência na tela. Vamos criar as funções que lê um item da seqüência, acende a luz indicada por este item e depois apaga:

//Variável global que indica o item da seqüência a ser utilizada
var index = 0;
//Variável global que contém o item selecionado na seqüência
var selected = null;
//Variável que faz referência ao botão html
var btnStart = null; 
...

/**
 * Evento onload
 */
window.onload = function() {
btnStart = document.getElementById('start');
}

/**
 * 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 o botão "Start!" 
    btnStart.disabled = false;
}
}

/**
 * Função que apaga a luz e vai acender (se existir) o próximo item da sequência 
 */
function switchOffLight() {
//Se existe um item "acendido" (selecionado)
if (selected != null) {
     //então apago
     switchLight(selected.x, selected.y);
     selected = null;
}
//Vai para o próximo item da seqüência
index++;
//e tento acender este
setTimeout('swithOnLight()', 500);
}

Agora, retiramos o evento ontouchstart ou onclick (se foi colocado) do botão "Start!" e colocamos os eventos para criar a animação das luzes:
              
/**
 * Função que inicia a animação da sequência de cores
 */
function startSequence() {
     //Animação começa desde do inicio da sequência
     index = 0;
     //Desabilita o botão
     btnStart.disabled = true;
    //Adiciona um item na sequência
    addSequence();
    //tenta acender a primeira luz da sequência e executa as demais.
    swithOnLight();
}

/**
 * Evento onload

 */
window.onload = function() {
    btnStart = document.getElementById('start');
    if (btnStart != null) {
         //Adiciono o evento onclick ou ontouchstart para executar a sequência
         if (typeof(btnStart.ontouchstart) != 'undefined') {
              btnStart.ontouchstart = function() {
            startSequence();
            }
         } else if (typeof(btnStart.onclick) != 'undefined') {
              btnStart.onclick = function() {
            startSequence();
            }
         }          
    }
}

Por enquanto é só (mas agora falta pouco... :) ).

Até mais!