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!
