Joguinho da Velha

+6
Trynd
xThat
SecurityPixel
xjoao
Foxy
Bet4
10 participantes

Início :: Paraíso Nerd :: Universo dos programadores :: Tutoriais & CódigosJoguinho da Velha

Bet4 Bet4  • 09.05.14 15:20

Joguinho da Velha Empty Joguinho da Velha 09.05.14 15:20

Reputação da mensagem: 100% (1 votos)
Olá, estava vendo por ai alguns jogos, e pensei num joguinho, para descontrair com os amigos e etc.

http://jsbin.com/widatene/1

Característica:
- Joguinho da Velha
- Baseado em Javascript
- CSS
- HTML

Créditos:
- Um site ai onde encontrei alguns codes
- Bet4
- Zurb ( Pelo fundo )

Foxy Foxy  • 09.05.14 16:09

Joguinho da Velha Empty Re: Joguinho da Velha 09.05.14 16:09

Olá,
você parece ser bom em js,
parabéns, continue assim.
Agora crie um js q faz o pc vibrar,
obrigado

Bet4 Bet4  • 09.05.14 16:10

Joguinho da Velha Empty Re: Joguinho da Velha 09.05.14 16:10

Olá,
não sou bom em js, apenas ajuntei alguns códigos!

xjoao xjoao  • 09.05.14 17:17

Joguinho da Velha Empty Re: Joguinho da Velha 09.05.14 17:17

jogo  muito bom estarei jogando

SecurityPixel SecurityPixel  • 11.05.14 18:39

Joguinho da Velha Empty Re: Joguinho da Velha 11.05.14 18:39

Segue o código do site junto com o js:

Código:

<html>
<head>
  <title> My Game, I'm back! </title>
 
  <sttyle>
body{
   background: url(http://foundation.zurb.com/assets/img/marquee-stars.svg) #074e68;
height: 650px;
text-align: left;
}
    table {width:700px; height:700px; margin:auto; border:1px solid black}
   table tr { background-color:#666666; font:bold 46px Verdana; color:white}
   table tr td {text-align:center; width:33.33%}
   table tr td:hover {cursor:pointer}
   input[type=button] {width:150px; height:50px; font-size:20px; font-weight:bold; margin-bottom:20px}
   fieldset {font-size:20; font-weight:bold; border:2px solid black; width: 300px; border-radius:10px; background-color:#333333; margin-bottom:25px}

.lol{
   background-color: #137795;
}
.color1{
   font-size:20px;
   color:#fff;
}
.color2{
   font-size:20px;
   color:#fff;
}
 
  </sttyle>
 
  <script>
 
      
      window.onload =   function() { document.getElementById('game').sttyle.visibility = 'hidden' };
      
      function Jogador(nome, forma) {
         this.nome = nome;
         this.forma = forma;
      }
      
      var jogador1, jogador2;
      //Jogador da rodada
      var jogadorAtual;
      var formas = ['X', 'O'];
      var index = null;
 
      /*
         0 1 2
         3 4 5
         6 7 8
      */
      var tabuleiro = new Array(9);
 
 
      initGame = function() {
         var nomeJogador1 = document.getElementById('jogador1').value;
         var nomeJogador2 = document.getElementById('jogador2').value;
         jogador1 = new Jogador(nomeJogador1, 0); //X
         jogador2 = new Jogador(nomeJogador2, 1); //O
 
         jogadorAtual = jogador1;
         setLabelJogadorAtual();
 
         
         document.getElementById('game').sttyle.visibility = 'visible';
         
      }
 

      reset = function() { window.location.reload(); }
      
      /*Seta o nome do jogador da rodada na página HTML*/
      setLabelJogadorAtual = function() {
         document.getElementById('jogadorAtual').innerHTML = 'Jogador atual:  ' + jogadorAtual.nome;
      }
 
       
      tabuleiroIsFilled = function() {
         var preenchidos = 0;
            for(var i = 0; i < tabuleiro.length; i++)
               if(tabuleiro[i]   != undefined) 
                  preenchidos++;
            return preenchidos == tabuleiro.length;
      }
 
      
      allElementsInSomeLine = function() {
         for( var i = 0; i < 7; i += 3) {
            if ( tabuleiro[i] == 'X' && tabuleiro[i + 1] == 'X' && tabuleiro[i + 2] == 'X' ) { 
               alert (jogador1.nome + ' Ganhou!!!');
               reset();
            }
            if ( tabuleiro[i] == 'O' && tabuleiro[i + 1] == 'O' && tabuleiro[i + 2] == 'O' ) {
               alert (jogador2.nome + ' Ganhou!!!');
               reset();
            }
         }
      }
 
      
      allElementsInSomeColumn = function() {
         for( var i = 0; i < 3; i++) {
            if ( tabuleiro[i] == 'X' && tabuleiro[i + 3] == 'X' && tabuleiro[i + 6] == 'X' ) { 
               alert (jogador1.nome + ' Ganhou!!!');
               reset();
            }
            if ( tabuleiro[i] == 'O' && tabuleiro[i + 3] == 'O' && tabuleiro[i + 6] == 'O' ) {
               alert (jogador2.nome + ' Ganhou!!!');
               reset();
            }
         }
 
      }
 
      
      allElementsInSomeDiagonal = function() {
         if ( (tabuleiro[0] == 'X' && tabuleiro[4] == 'X' && tabuleiro[8] == 'X') ||
            (tabuleiro[2] == 'X' && tabuleiro[4] == 'X' && tabuleiro[6] == 'X')) {
               alert (jogador1.nome + ' Ganhou!!!');
            reset();
         } else if ( (tabuleiro[0] == 'O' && tabuleiro[4] == 'O' && tabuleiro[8] == 'O') ||
                  (tabuleiro[2] == 'O' && tabuleiro[4] == 'O' && tabuleiro[6] == 'O') ) {
               alert (jogador2.nome + ' Ganhou!!!');
            reset();
         } 
      }
 
      
      
      setOnCeil = function(cel, pos) { 
            if(tabuleiro[pos] == undefined) {
               cel.innerHTML = formas[jogadorAtual.forma];
               tabuleiro[pos] = formas[jogadorAtual.forma];
 
               //define o jogador da rodada
               (jogadorAtual.forma == 0) ? jogadorAtual = jogador2 : jogadorAtual = jogador1;
               setLabelJogadorAtual();
 
            } else alert('Ops. Área já marcada =/');
 
            allElementsInSomeLine();
            allElementsInSomeColumn();
            allElementsInSomeDiagonal();
   
            if ( tabuleiroIsFilled() ) {
               alert ('Ninguém Ganhou! :( Failed!!!');
               reset();
            }
            
         
      }
 
</script>
</head>
 
<body>
   <fieldset>
      <div class="color1"> Jogador 1:
      <input type="text" id="jogador1"/>
      <div class="color2">Jogador 2:
      <input type="text" id="jogador2"/>
 
      <input type="button" class="lol" value="Iniciar" sttyle="margin-top:4px; height:35px; width:250px; font-size:14px" onclick="javascript: initGame();"/>
   </fieldset>
 
   <h3 id="jogadorAtual"> </h3>
 
<div id="game">
   <table cellpadding="0" cellspacing="0">
      <tr border="1"> 
         <td onclick="javascript: setOnCeil(this, 0);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
         <td onclick="javascript: setOnCeil(this, 1);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
         <td onclick="javascript: setOnCeil(this, 2);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
      </tr>
      <tr> 
         <td onclick="javascript: setOnCeil(this, 3);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
         <td onclick="javascript: setOnCeil(this, 4);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
         <td onclick="javascript: setOnCeil(this, 5);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
      </tr>
      <tr> 
         <td onclick="javascript: setOnCeil(this, 6);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
         <td onclick="javascript: setOnCeil(this, 7);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
         <td onclick="javascript: setOnCeil(this, 8);" onmouseover="javascript: this.sttyle.backgroundColor = 'lightgrey'" onmouseout="javascript: this.sttyle.backgroundColor = 'lightgrey'"> &nbsp; </td>
      </tr>
   </table>
</div>
  
</body>
</html>

xThat xThat  • 12.05.14 15:53

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 15:53

Parabéns pelo js continue assim :D

Trynd Trynd  • 12.05.14 16:39

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 16:39

Bet4 meu amigo, ficou legal para jogar quando tiver tédio..

Continue assim seu delicia!

avatar Kaique Alves  • 12.05.14 16:41

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 16:41

Tá Aparecendo para ir para http://jogodavelha.url.ph/ ? Ta Certo?

Rafael Rafael  • 12.05.14 17:36

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 17:36

Pqp só da velha eu x eu.

Bet4 Bet4  • 12.05.14 18:33

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 18:33

Olá,
Eyer isso é um devido plágio de um invejoso que não fez nada!

Foxy Foxy  • 12.05.14 18:34

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 18:34

Olá,
eu sou tão bom que n consigo ganhar de mim mesmo

Bet4 Bet4  • 12.05.14 18:46

Joguinho da Velha Empty Re: Joguinho da Velha 12.05.14 18:46

Olá,
Foxy eu ganho de mim mesmo, mesmo não querendo!

Aαиd Aαиd  • 16.05.15 11:50

Joguinho da Velha Empty Re: Joguinho da Velha 16.05.15 11:50

Bet4 , há como adicionar BOT?
tipo Eu x Computador.

Vong Vong  • 16.05.15 11:54

Joguinho da Velha Empty Re: Joguinho da Velha 16.05.15 11:54

Moderação - Infração
Usuário :Aand
Motivo: Necropost
Ocorrências: +1
Leia as Regras

Tópico Fechado

Conteúdo patrocinado  • 

Joguinho da Velha Empty Re: Joguinho da Velha

Início :: Paraíso Nerd :: Universo dos programadores :: Tutoriais & Códigos:: Joguinho da Velha
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.