segunda-feira, junho 07, 2010

Pequeno jogo em JavaScript

Estava lendo o material do blog Elétron Livre sobre um dojo de programação com o Program-ME, onde o pessoal da Globalcode criou uma réplica do jogo Genius.
 
Parei para pensar como seria o algoritmo (sem antes ler o deles claro) e comecei a esboçar em JavaScript algo parecido.
 
Quando inicializa a tela são sorteados quatro números inteiros e positivos, esses números aparecem por 1,5 segundo nos quatro campos dispostos em forma de matriz 2x2 na tela e depois são apagados.
Ao jogador resta preencher os quatro campos novamente com os valores correspondente a cada um deles antes exibido. No final ao pressionar o único botão da tela, as respostas do usuário são confrontadas com os números sorteados e exibido o resultado indicando se o jogador acertou ou não a combinação de números.
 
Segue uma seqüência de imagens do jogo:
 

Números sorteados.
 

Hora de jogar :-)
 

Conferindo meu chute.
 

Jogar novamente?
 

Agora sim!
 

Jogar novamente?
 

Bye-bye
 
Claro que isso é uma bobeira, e para simular corretamente o jogo Genius eu deveria ter usado imagens nas cores que o jogo utilizava e não campos numéricos, mas como fiz isso somente para ver como seria... ta ai o resultado. :-) Foi uma hora de almoço gasta em nome da ciência :-)
 
Para aumentar a dificuldade bastas mudar o tempo em que permanecem exibidos os números sorteados.
 
Eis o fonte da página:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
      <!--
        var ramdom = new Array();
        var answers = new Array();
        var ports = new Array();
        
        function allocate() {
          ports[0] = document.getElementById("portA");
          ports[1] = document.getElementById("portB");
          ports[2] = document.getElementById("portC");
          ports[3] = document.getElementById("portD");
          
          for(i = 0; i < 4; i++) {
            ramdom[i] = Math.floor(Math.random()* 11);
            ports[i].value = ramdom[i]; 
          }
          
          setTimeout(clearForm, 1500);
          
          ports[0].focus();
        }
        
        function clearForm() {
          for(i = 0; i < 4; i++) {
            ports[i].value = ""; 
          }
        }
        
        function checkAnswers() {
          var result = true;
          var tryAgain;
          
          for(i = 0; i < 4; i++) {
            answers[i] = ports[i].value;
            
            if(answers[i] != ramdom[i]) {
              result = false;
            }
          }
          
          var message = "Ramdom numbers: " + ramdom + "\n" +
                        "Your answers: " + answers
          
          if(result) {
            alert("You win! :-) \n\n" + message);
          }
          else {
            alert("You lose! :-( \n\n" + message);
          }
          
          tryAgain = prompt("Do you would like play again?", "Type Y or N");
          
          if(tryAgain == "Y") {
            allocate();
          }
          else {
            document.getElementById("gameForm").style.display = "none";
            document.getElementById("message").style.display = "block";
          }
        }
      //-->
    </script>
  </head>
  <body>
    <div id="gameForm">
      <input type="text" id="portA" name="portA" size="2" />
      <input type="text" id="portB" name="portB" size="2" /> <br/>
      <input type="text" id="portC" name="portC" size="2" />
      <input type="text" id="portD" name="portD" size="2" /> <br/><br/>
      <input type="button" id="check" name="check" value="Check my answers!" onclick="checkAnswers()" />
    </div>
    <div id="message" style="display: none;">
      <p>Thanks for play my game! :-)</p>
    </div>
    <script>
      allocate();
    </script>
  </body>
</html>

2 comentários:

Rafael Vilela disse...

Pow legal seu programinha....
TO precisando de um ajudinha sua, to fazendo o Genius tmb so que vou montar um hardware, ja até comprei as preças( 4 leds, 4buttons, 1PIC16F628A, Circuito integrado, etc...), no caso eu queria simulalo primeiro no proteus, só que so meio fraquinho ainda em eletronica então queria um ajudinha sua, se pudesse postar ai um trabalho seu do genius no proteus.

Unknown disse...

Rafael, tudo bem?

Seguinte, para simular qualquer coisa no Proteus antes tu tens que gerar o programa em C ou Assembly. No caso dos PICs tu podes baixar o MPLAB IDE da Microchip. Somente depois disso tu vais conseguir por no Proteus.

Tem um post aqui no blog falando sobre Assembly + PIC, da uma lida nele e ve se tu consegue montar aquele circuitinho básico. Depois u só vai ter que entender como sortear números randômicos para ligar e desligar os LEDs.

Qualquer coisa posta ai outro comentário.

Há muitas boas listas de eletrônica no Yahoo, te aconselho a entrar nelas também.

Abraço