Desenvolvimento do jogo Genius para WEB utilizando a ferramenta ASP.

NET

Resumo Este trabalho apresenta o desenvolvimento e simula o funcionamento do brinquedo Gnius para Web utilizando de recursos apresentados em aula, demostrando como apresentada a sequequencia aleatria para o usurio. Palavras chave: Desenvolvimento,Funcionamento.

1. Introduo O objetivo deste documento demonstrar os passos que foram utilizados para desenvolver uma simulao do brinquedo Gnius utilizando a ferramenta de desenvolvimento ASP.NET para apresentar seu funcionamento via Web.

2. Desenvolvimento 2.1 Gerao da Sequencia Ao ser carregada a pgina a classe SequenciaWeb verifica se tem alguma sequencia em andamento se tiver alguma sequencia gerada o boto iniciar fica indisponivel para que o usurio faa a sequencia gerada, se no houver nenhuma sequencia pendente o boto iniciar encontra se disponivel, ao ser prescionado a funo Random da classe Sequncia gera aleatoriamente uma sequencia com os numeros 1,2,3 e 4. public class Sequencia { public int[] sequencia; public int[] gerar() { Random rnd = new Random(); int qtd = rnd.Next(2, 3); sequencia = new int[qtd]; for (int i = 0; i < qtd; i++) { this.sequencia[i] = rnd.Next(1, 5); } return this.sequencia;

} }

public class SequenciaWeb : Sequencia { public void Carregar(String s) { this.sequencia = new int[s.Count()]; for (int i = 0; i < s.Count(); i++) { this.sequencia[i] = Convert.ToInt32(new String(s[i], 1)); } } } }

2.1 Como a Sequncia apresentada para o Usurio Quando o usurio presciona o boto iniciar apresntada uma sequncia atravs de quatro botes representados respectivamente pelas cores azul,verde,vermelho e amarelo e pelos numeros 1,2,3 e 4. <asp:Button ID="btn1" runat="server" Text="1" CssClass="btn1" onclick="btn1_Click" /> <asp:Button ID="btn2" runat="server" Text="2" CssClass="btn2" onclick="btn1_Click" /> <br /><br /> <asp:Button ID="btn3" runat="server" Text="3" CssClass="btn3" onclick="btn1_Click" /> <asp:Button ID="btn4" runat="server" Text="4" CssClass="btn4" onclick="btn1_Click" /> 2.2 Controles ASP.NET utilizados <asp:HiddenField ID="hdInicio" runat="server" Value="false" /> Utilizado para dar inicio sequncia que ir ser apresentada ao usurio. <asp:HiddenField ID="hdValida" runat="server" Value="false" /> Verifica se existe uma sequncia em andamento para que o usurio possa comear a jogar. <asp:HiddenField ID="hdAcerto" runat="server" Value="true" /> Verifica se o usuario acertou a sequncia apresentada. <asp:HiddenField ID="hdVerificaSequencia" runat="server" Value="0" /> Guarda a sequncia gerada para comparar com a sequncia que o usurio ir informar. <asp:HiddenField ID="hdSequencia" runat="server" Value=""/> Guarda as sequncias.

<asp:Label ID="mensagem" runat="server" Text=""></asp:Label> Apresenta ao usurio o resultado se ele acertou ou errou. <asp:Button ID="btnInicio" runat="server" Text="Iniciar" nclick="btnInicio_Click" /> Da inicio a uma nova sequncia. Os botes 1,2,3 e 4 so utilizados para apresentar a sequncia para o usurio e para que receber a sequncia do usuario. <asp:Button ID="btn1" runat="server" Text="1" CssClass="btn1" onclick="btn1_Click" /> <asp:Button ID="btn2" runat="server" Text="2" CssClass="btn2" onclick="btn1_Click" /> <asp:Button ID="btn3" runat="server" Text="3" CssClass="btn3" onclick="btn1_Click" /> <asp:Button ID="btn4" runat="server" Text="4" CssClass="btn4" onclick="btn1_Click" /> 2.3 Classes do .NET Framework utilizados

2.4 Utilizao de CSS Foi utilizado CSS para personalizar os botes e o fundo da pgina dando as cores aos mesmos. body { background-color: Gray; } input { width: 200px; height:200px; border: 1px solid #000; } #btnInicio { widht: 50px; height: 50px; } .botaoSelecionado { background-color:#FFF; } .btn1 { background-color:Blue; }

.btn2 { background-color:Green; } .btn3 { background-color:Red; } .btn4 { background-color:Yellow; } 2.5 Utilizao de Java Script Foi utilizado Java Script para exibir as sequncias para o usurio, para controlar o tempo em que cada boto iria piscar e para verificar a sequncia e validar. window.onload = function () { var txtInicio = document.getElementById("hdInicio"); var txtSequencia = document.getElementById("hdSequencia"); var txtVerifica = document.getElementById("hdVerificaSequencia"); if (txtInicio.value == "true") { for (i = 0; i < txtSequencia.value.length; i++) { mostra(txtSequencia.value[i]); } } }; mostra = function (seq) { var botao = document.getElementById("btn" + seq); window.setTimeout(function () { var btn = botao; var classe = btn.className; btn.className = "botaoSelecionado"; window.setTimeout(function () { btn.className = classe; if ((parseInt(document.getElementById("hdVerificaSequencia").value)+1) == document.getElementById("hdSequencia").value.length) { document.getElementById("hdValida").value = "true"; document.getElementById("hdVerificaSequencia").value = "0"; document.getElementById("form1").submit(); } else document.getElementById("hdVerificaSequencia").value = parseInt(document.getElementById("hdVerificaSequencia").value) + 1;

}, 2000); }, (2500 * i)); };