Created
August 17, 2011 19:00
-
-
Save rpkraemer/1152320 to your computer and use it in GitHub Desktop.
Um simples jogo da velha para dois jogadores (JS, CSS e HTML)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <HTML> | |
| <HEAD> | |
| <TITLE> Jogo da Velha </TITLE> | |
| <META NAME="Generator" CONTENT="EditPlus"> | |
| <META NAME="Author" CONTENT=""> | |
| <META NAME="Keywords" CONTENT=""> | |
| <META NAME="Description" CONTENT=""> | |
| <style> | |
| table {width:550px; height:350px; border:1px solid black} | |
| table tr { background-color:red; 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 blue; width: 300px; margin-bottom:25px} | |
| </style> | |
| <script> | |
| //DEIXA A DIV GAME ESCONDIDA | |
| window.onload = function() { document.getElementById('game').style.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(); | |
| //APOS DEFINIÇÃO DE JOGADORES, EXIBE A DIV E INICIA JOGO | |
| document.getElementById('game').style.visibility = 'visible'; | |
| } | |
| /*Reinicia a partida*/ | |
| 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; | |
| } | |
| /*Verifica se o tabuleiro está completamente preenchido, se estiver, significa que ninguém venceu a rodada*/ | |
| tabuleiroIsFilled = function() { | |
| var preenchidos = 0; | |
| for(var i = 0; i < tabuleiro.length; i++) | |
| if(tabuleiro[i] != undefined) | |
| preenchidos++; | |
| return preenchidos == tabuleiro.length; | |
| } | |
| /*Verifica a existência de ocorrências de um mesmo elemento(X ou O) nas linhas do tabuleiro, procurando um vencedor*/ | |
| 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 + ' wins!!!'); | |
| reset(); | |
| } | |
| if ( tabuleiro[i] == 'O' && tabuleiro[i + 1] == 'O' && tabuleiro[i + 2] == 'O' ) { | |
| alert (jogador2.nome + ' wins!!!'); | |
| reset(); | |
| } | |
| } | |
| } | |
| /*Verifica a existência de ocorrências de um mesmo elemento(X ou O) nas colunas do tabuleiro, procurando um vencedor*/ | |
| allElementsInSomeColumn = function() { | |
| for( var i = 0; i < 3; i++) { | |
| if ( tabuleiro[i] == 'X' && tabuleiro[i + 3] == 'X' && tabuleiro[i + 6] == 'X' ) { | |
| alert (jogador1.nome + ' wins!!!'); | |
| reset(); | |
| } | |
| if ( tabuleiro[i] == 'O' && tabuleiro[i + 3] == 'O' && tabuleiro[i + 6] == 'O' ) { | |
| alert (jogador2.nome + ' wins!!!'); | |
| reset(); | |
| } | |
| } | |
| } | |
| /*Verifica a existência de ocorrências de um mesmo elemento(X ou O) nas diagonais do tabuleiro, procurando um vencedor*/ | |
| allElementsInSomeDiagonal = function() { | |
| if ( (tabuleiro[0] == 'X' && tabuleiro[4] == 'X' && tabuleiro[8] == 'X') || | |
| (tabuleiro[2] == 'X' && tabuleiro[4] == 'X' && tabuleiro[6] == 'X')) { | |
| alert (jogador1.nome + ' wins!!!'); | |
| reset(); | |
| } else if ( (tabuleiro[0] == 'O' && tabuleiro[4] == 'O' && tabuleiro[8] == 'O') || | |
| (tabuleiro[2] == 'O' && tabuleiro[4] == 'O' && tabuleiro[6] == 'O') ) { | |
| alert (jogador2.nome + ' wins!!!'); | |
| reset(); | |
| } | |
| } | |
| /*Preenche a célula da tabela HTML escolhida pelo usuário ao clicar, além de cuidar do jogador atual da rodada e chamar as funções | |
| de verificação de algum ganhador */ | |
| 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. Already marked value for this =/'); | |
| allElementsInSomeLine(); | |
| allElementsInSomeColumn(); | |
| allElementsInSomeDiagonal(); | |
| if ( tabuleiroIsFilled() ) { | |
| alert ('Nobody wins! :(. Try Again'); | |
| reset(); | |
| } | |
| } | |
| </script> | |
| </HEAD> | |
| <BODY> | |
| <fieldset> | |
| <legend> Jogadores </legend> | |
| <label for="Jogador 1"> Jogador 1: </label> | |
| <input type="text" id="jogador1"/> | |
| <label for="Jogador 1"> Jogador 2: </label> | |
| <input type="text" id="jogador2"/> | |
| <input type="button" value="Iniciar" style="margin-top:4px; height:25px; width:150px; 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.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| <td onclick="javascript: setOnCeil(this, 1);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| <td onclick="javascript: setOnCeil(this, 2);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| </tr> | |
| <tr> | |
| <td onclick="javascript: setOnCeil(this, 3);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| <td onclick="javascript: setOnCeil(this, 4);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| <td onclick="javascript: setOnCeil(this, 5);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| </tr> | |
| <tr> | |
| <td onclick="javascript: setOnCeil(this, 6);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| <td onclick="javascript: setOnCeil(this, 7);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| <td onclick="javascript: setOnCeil(this, 8);" onmouseover="javascript: this.style.backgroundColor = 'blue'" onmouseout="javascript: this.style.backgroundColor = 'red'"> </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </BODY> | |
| </HTML> |
Cool
valeu seu arrumado
oi só uma duvida, por que você usa a variável jogador Atual como se fosse um obj já que não da para pegar o .nome da função jogador
bom caso tenha dado erro no de alguém é so fazer a função jogador retorna um objeto exemplo :
const jogador = (nome, forma)=>{
return{
nome: nome,
forma: forma
}
}
let jogadorAtual = jogador //agora jogador atual tem acesso as propriedades de jogador
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Incredible