Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Jogo da Velha - HTML5
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
– Desenvolvimento de jogos com HTML5 e JavaScript –
Tutorial Básico I
Jogo da Velha
– Desenvolvimento de jogos com HTML5 e JavaScript –
Tutorial Básico I
Jogo da Velha
Escrito por:
Gustavo Silveira
Introdução
Esta apostila foi criada para que pessoas com pouca ou nenhuma experiência em programação
aprendam alguma coisa sobre a santíssima trindade da WEB: HTML, CSS e JAVASCRIPT. E
faremos isso da forma mais eficiente e divertida que conheço; desenvolvendo um jogo! Ok, um jogo
muito simples, mas ainda assim, um jogo.
Vejam bem, não pretendo focar muito nos conceitos técnicos e sim no desenvolvimento da
aplicação, ou seja do nosso joguinho. Ao longo do desenvolvimento desse exercício veremos
naturalmente alguns conceitos, mas caso você queira se aprofundar mais em seus estudos (e eu
espero que queira) a internet está repleta de bons tutoriais, fóruns, apostilas, vídeo-aulas, e livros
gratuitos. É só pesquisar um pouquinho.
Faremos o seguinte, vamos dividir esse passo-a-passo em quatro partes:
1 → Desenhando o tabuleiro
Vamos conhecer a estrutura básica HTML e alguns elementos que vão nos ajudar no
desenvolvimento de nosso jogo.
2 → Programando em JavaScript
Veremos como interagir com os elementos HTML e como estes podem ser
manipulados para tornar nossa aplicação dinâmica e divertida.
3 → Condições de vitória
Em todo jogo alguém sai vitorioso, a não ser em caso de empate. Vamos aprender a
finalizar o jogo e determinar quem venceu a partida
4 → Jogando com a máquina
Implementaremos um inteligência artificial em nosso jogo. Bom... não muito inteligente,
mas o suficiente para entender como a coisa funciona.
Algumas considerações iniciais
Assim como em uma receita de bolo, a primeira coisa que precisamos é saber quais são os
ingredientes, ou seja, do que vamos precisar? Uma coisa bacana em se trabalhar com HTML é que
você, muito provavelmente, já tem tudo do que precisa instalado na máquina. Vamos precisar de um
editor de texto e de um navegador, só isso. Se estiver usando um sistema Windows você pode
desenvolver seu código com o bloco de notas ou com o WordPad e salvar seu arquivo com a
extensão “.html”, isso basta para que o sistema operacional entenda que aquele arquivo deve ser
executado pelo navegador (ou browser se preferir).
Caso queira instalar alguma ferramenta mais sofisticada, temos algumas opções gratuitas que
resolvem muito bem, por exemplo:
• NotePad++
http://notepad-plus-plus.org/download/v6.6.9.html
• SublimeText
http://www.sublimetext.com/3
E se você estiver usando alguma distribuição Linux (assim como eu) pode usar o Gedit sem
problemas, mas, se quiser instalar o SublimeText, basta abrir o terminal e digitar os seguintes
comandos:
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer
Esses programas são úteis para destacar comandos específicos da linguagem com a qual se está
trabalhando e nos ajudam muito a não errar na sintaxe (é péssimo quando um programa não roda
porque escrevemos documemt no lugar de document). Alguns programas até disponibilizam
autocompletar para facilitar a vida dos programadores.
O que é um documento HTML?
Só uma explicação rápida sobre o que é um documento HTML. Já vimos que, para transformar um
arquivo de texto em HTML, basta salvar o documento com a extensão “.html”, mas e o conteúdo do
documento? Bom, abaixo segue um exemplo ex.1 de estrutura básica que deve estar presente em
qualquer página HTML.
ex.1
<!DOCTYPE HTML>
<html>
<head>
<title>Título da Página</title>
<link rel="stylesheet" type="text/css" href="#">
<script type="text/javascript" src="#"></script>
</head>
<body>
Conteúdo da página
</body>
</html>
Onde:
<!DOCTYPE html> → Informa ao navegador que a tecnologia HTML5 está presente nesse
documento.
<html> → Contém todos os elemento HTML, é o início e o fim de qualquer página HTML e
informa ao navegador que este é um documento HTML.
<head> → Cabeçalho do documento, contém informações exclusivas para o navegador como o
título da página <title>, link para folha de estilos <link> e para arquivos em JavaScript
<script>. Outras informações podem ser adicionadas aqui, mas, como eu disse antes, não vou me
aprofundar nesses pontos. Como diria o ET Bilu: “Busquem o conhecimento”.
<body> → Aqui será inserido todo o conteúdo de sua página: textos, imagens e outros elementos
HTML devem ser inseridos no espaço entre <body> e </body>.
É importante reparar que algumas tags (elementos HTML) devem ser fechadas, como o caso do
<body></body>. Isso indica o inicio e o fim do elemento e o que ficar no meio estará inserido no
elemento.
Parte 1 – Desenhando o tabuleiro
Tudo pronto? Então vamos ao trabalho!
Na verdade não vamos criar um tabuleiro propriamente dito, usaremos uma tabela com três linhas e
três colunas onde desenvolveremos nosso jogo. E, se você parar para pensar, um tabuleiro de jogo
da velha é exatamente isso, uma matriz de 3x3.
Para construir nossa tabela usaremos o elemento <table></table> e dentro dessas tags usaremos
<tr></tr> Para criar linhas e <td></td> para inserir células nessas linhas, o que criará nossas
colunas. Então a coisa fica dessa forma: Dentro de uma tabela temos linhas e dentro das linhas
temos células. As células alinhadas uma debaixo da outra serão nossas colunas. Simples não?
Vejamos o código no ex.2.
ex.2
<!DOCTYPE HTML>
<html>
<head>
<title>Jogo da Velha</title>
</head>
<body>
<table border="1" align="center">
<tr>
<td>cel1</td>
<td>cel2</td>
<td>cel3</td>
</tr>
<tr>
<td>cel4</td>
<td>cel5</td>
<td>cel6</td>
</tr>
<tr>
<td>cel7</td>
<td>cel8</td>
<td>cel9</td>
</tr>
</table>
</body>
</html>
Ao rodarmos este arquivo, o navegador deve nos mostrar a seguinte tela:
tela 1
Vamos falar um pouco sobre essas linhas em negrito no código. Primeiro adicionamos um título ao
nosso documento, <title>Jogo da Velha</title>, em seguida criamos nossa tabela. Repare que
temos alguns atributos dentro da tag <table>, elementos HTML podem ser manipulados através
de suas propriedades e dessa forma podemos configurar características como tamanho, cor,
posicionamento na tela, etc...
Nesse caso vamos usar a propriedade border da tabela com o valor “1” para adicionar uma borda
de um pixel. Quanto maior o valor atribuído ao campo border maior sera a borda de nossa tabela,
experimente outros valores para testar.
A propriedade align determina o alinhamento da tabela, o valor “center” posiciona a tabela no
centro da tela. Outros valores possíveis são “right” e “left”, que posicionam a tabela à direita ou à
esquerda da tela, respectivamente.
As tags <tr></tr> adicionam uma linha a nossa tabela e dentro dessas tags usamos <td></td>
para adicionar uma célula. O conteúdo inserido entre as tags <td></td> será exibido dentro da
célula.
Para nosso jogo, vamos preencher as células com figuras em branco que, ao serem clicadas, serão
substituídas por X ou O, dependendo de quem é o jogador da vez. Criar essas figuras é muito fácil e
essa tarefa pode ser realizada com com qualquer editor de imagens.
Vamos pegar o Paint como exemplo para usuários Windows:
Abra um novo arquivo, vá em propriedades e configure 100 pixels tanto na largura quanto na altura,
salve este arquivo com o nome de “branco.png” no mesmo diretório onde está seu arquivo
jogodavelha.html. Vamos aproveitar que o Paint já está aberto com nosso arquivo em branco para
desenhar um X sobre a tela branca e salvareste arquivo como “x.png”, agora vamos abrir no Paint o
arquivo “branco.png”, desenhar um círculo nele e salvá-lo como “o.png”. Pronto! Todas as figuras
que iremos usar já estão prontas, agora vamos inseri-las em nossa página usando o elemento
imagem do HTML com a tag <img>. Faremos o seguinte. Vamos adicionar a tag <img> dentro das
células, ou seja, entre as tags <td> e </td>. Vamos também configurar o atributo src dentro da tag
<img>, para indicar a origem do arquivo de imagem que será exibido. Nosso código ficará como o
do ex.3.
ex.3
<!DOCTYPE HTML>
<html>
<head>
<title>Jogo da Velha</title>
</head>
<body>
<table border="1" align="center">
<tr>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
</tr>
<tr>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
</tr>
<tr>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
</tr>
</table>
</body>
</html>
Então vamos entender o que fizemos. Dentro de cada célula da tabela foi inserido um elemento
imagem, que exibe a figura referenciada pelo atributo src, que, no exemplo, é o arquivo
“branco.png” que acabamos de criar no Paint. Lembrem-se de que o valor do atributo img deve ser
o caminho que leva ao arquivo a ser exibido, sendo assim, se seu arquivo estiver dentro de uma
pasta, o nome dessa pasta deve estar no caminho. Por exemplo, se minhas imagens estão em uma
pasta chamada “imagens”, que é um sub-diretório da pasta onde está meu arquivo jogodavelha.html,
então o elemento img ficaria da seguinte maneira: <img src=“imagens/branco.png”>
Da maneira que está, ao executar nosso arquivo, o navegador deve nos mostrar a seguinte tela:
tela 2
Esse tabuleiro já seria o suficiente para construirmos nosso jogo, mas vamos mudar alguns detalhes,
só para melhorar sua aparência. Primeiro vamos escurecer o fundo da página adicionando o valor
“black” ao atributo bgcolor, dentro da tag <body>, que ficará assim: <body bgcolor=“black”>.
Vamos ainda remover as bordas da tabela, atribuindo o valor “0” ao atributo border e aumentar o
espaçamento entre as células com o valor “5” no atributo cellspacing, nosso código agora fica
assim:
ex.4
<!DOCTYPE HTML>
<html>
<head>
<title>Jogo da Velha</title>
</head>
<body bgcolor="black">
<table border="0" cellspacing= "5" align="center">
<tr>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
</tr>
<tr>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
</tr>
<tr>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
<td><img src="branco.png"></td>
</tr>
</table>
</body>
</html>
E nosso tabuleiro agora fica com esta cara:
tela 3
Agora estamos prontos para adicionar algum dinamismo à pagina, permitindo que o jogador interaja
com nosso jogo. Prepare-se para programar em JavaScript.
Parte 2 – Programando em JavaScript
Agora começa a verdadeira diversão! Primeiro vamos entender que, além dos atributos com os
quais já estamos acostumados, elementos HTML também possuem eventos e esses eventos podem
ser usados para disparar tarefas programadas. Vamos fazer um exercício rápido e instrutivo: Dentro
da tag img, inserida na primeira célula, digite o seguinte comando: onclick="src='x.png'"
Este comando faz com que a imagem, quando clicada (onclick), atribua o valor “x.png” ao src,
mudando a imagem a ser exibida. Repare que a ação a ser executada está entre aspas duplas e o
valor que será atribuído está entre aspas simples. A falta desse detalhe pode fazer uma grande
bagunça no seu programa!
Vamos adicionar alguns comandos em todas as imagens para que, quando o jogador clicar em uma
célula que contém uma figura em branco, seja disparada uma função que informa ao programa qual
célula foi clicada e o programa responda de acordo. Adicionaremos uma identificação para cada
célula usando o comando id=“id da célula” e no evento onClick de cada célula vamos disparar a
função “chkJogo”, que será criada mais tarde em nosso arquivo JavaScript. Por falar no nosso
arquivo JavaScript, vamos aproveitar para referenciá-lo em nosso código, adicionando a seguinte
linha no cabeçalho do documento, entre as tags <head></head>:
<script src="script.js"></script>
Nosso código agora ficará assim: ex.5
<!DOCTYPE HTML>
<html>
<head>
<title>Jogo da Velha</title>
<script src="script.js"></script>
</head>
<body bgcolor="black">
<table border="0" cellspacing= "5" align="center">
<tr>
<td><img src="branco.png" id="cel1" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel2" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel3" onClick="chkJogo(this.id)"></td>
</tr>
<tr>
<td><img src="branco.png" id="cel4" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel5" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel6" onClick="chkJogo(this.id)"></td>
</tr>
<tr>
<td><img src="branco.png" id="cel7" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel8" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel9" onClick="chkJogo(this.id)"></td>
</tr>
</table>
</body>
</html>
Vamos agora trabalhar o arquivo “script.js”, onde criaremos nossas funções JavaScript. Para tal,
basta criar um novo documento em branco e salvá-lo com o nome “script.js”. Agora vamos criar a
função “chkJogo” que será disparada pelo arquivo HTML. Basicamente, esta função receberá como
parâmetro o id da imagem clicada e irá checar duas coisas: Se a imagem está em branco e de quem
é a vez de jogar. Se a imagem não estiver em branco, quer dizer que aquela célula já foi selecionada
antes e não é possível jogar ali novamente, então nosso programa não fará nada, mas, se ela estiver
em branco, então o programa confere de quem é a jogada, substitui o imagem em branco pela
imagem correspondente ao jogador (x ou o) e dá a vez ao outro jogador. Só que, para identificar a
imagem que está sendo exibida, teremos que criar uma função extra que recebe o id da imagem
como parâmetro e retorna o nome da imagem exibida
Vamos ver como fica esse código no ex.6:
ex.6
var jogador = 'x';
function chkJogo(id){
var src = chkSrc(id);
if(src == "branco.png"){
document.getElementById(id).src = jogador +".png";
if(jogador == 'x'){
jogador = 'o';
} else {
jogador = 'x';
}
}
}
function chkSrc(id){
var src = document.getElementById(id).src;
return src.substring(src.length - 10, src.length);
}
Vamos dissecar este código linha por linha para ver o que está acontecendo:
→ Criamos uma variável chamada jogador, que recebe o valor 'x'.
var jogador = 'x';
→ Iniciamos a função chkJogo, que recebe o id da imagem como parâmetro.
function chkJogo(id)
→ Criamos a variável src, que recebe como valor o nome da figura exibida na célula, retornada pela
função chkSrc.
var src = chkSrc(id);
→ Se o valor da variável src for igual a “branco.png”, então executamos o bloco de códigos.
if(src == "branco.png")
→ O programa busca o documento (document), que é a nossa página HTML. Dentro desse
documento, ele busca o elemento identificado pela id passada por parâmetro (getElementById(id))
e então, busca o atributo src desse elemento, atribuindo-lhe um valor composto pelo conteúdo da
variável jogador mais a extensão .png. Por exemplo “x.png”, que é o nome de uma das figuras que
podem ser exibidas nas células. É assim que nós trocamos as imagens ao clicar em uma figura.
document.getElementById(id).src = jogador +".png";
→ Se o conteúdo da variáveljogador for “x”, substituímos esse conteúdo por “o”. Caso contrário,
se o conteúdo da variável jogador não for “x”, atribuímos o valor “x” à variável.
if( jogador == 'x'){
jogador = 'o';
} else {
jogador = 'x';
}
Veremos agora o funcionamento da função chkSrc:
→ Iniciamos a função chkSrc, que recebe o id da imagem como parâmetro.
function chkSrc(id)
→ Criamos uma variável chamada src e atribuímos a ela a localização ou endereço da figura
exibida pelo elemento identificado pela id passada como parâmetro.
var src = document.getElementById(id).src;
→ Repare que o valor passado à variável será algo como “file:///media/dados/Game
%20Development/HTML%20e%20afins.../Jogo%20da%20velha%20HTML5/Apostila/branco.png”.
Como esse é um valor complicado para se trabalhar, vamos retornar apenas os últimos dez
caracteres com o comando substring. Esse comando irá selecionar um fragmento do texto contido
na variável src, este fragmento será definido por dois valores: O índice da letra que será a primeira
do novo texto gerado e o índice da letra que será a última. O comando length nos dirá quantas letras
possui o texto armazenado em uma variável. Como só nos interessam as últimas dez letra da
variável src, usaremos os seguintes valores para gerar nossa substring: O tamanho total do texto
contido em src menos dez caracteres para marcar o início de nosso fragmento e o tamanho total do
texto contido em src para indicar a última letra de nosso fragmento. Esse comando retornará apenas
o texto “branco.png”, caso esta seja a figura exibida pelo elemento.
return src.substring(src.length - 10, src.length);
E com isso concluímos nosso tabuleiro e suas funções básicas, agora podemos partir para as regras
do jogo.
Parte 3 – Condições de vitória
Da forma que se encontra, nosso tabuleiro já está perfeitamente funcional, mas seria interessante
programar o computador para apontar o vencedor de uma partida ou um empate. Então vamos
trabalhar essa ideia. Já vimos como identificar as células de nosso tabuleiro pela propriedade id,
assim como as figuras exibidas dentro dessas células pela propriedade src e, como sabemos, na
regra do jogo da velha quem colocar três figuras iguais alinhadas vence, ou seja, se a figura exibida
em “cel1” for igual à exibida em “cel2” e em “cel3” e todas forem diferentes de “branco.png”
teremos três figuras iguais na linha superior e isso aponta uma vitória. Simples não? Seguindo esse
raciocínio percebemos oito possibilidades de vitória: Três linhas iguais, três colunas iguais, diagonal
principal ou diagonal secundária. Então, usando apenas simples estruturas condicionais, podemos
criar a função chkVitoria como no ex.7.
ex.7
function chkVitoria(){
if((chkSrc('cel1') == chkSrc('cel2')) && (chkSrc('cel1') ==
chkSrc('cel3')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel4') == chkSrc('cel5')) && (chkSrc('cel4') ==
chkSrc('cel6')) && (chkSrc('cel4') != 'branco.png')){
return true;
}
if((chkSrc('cel7') == chkSrc('cel8')) && (chkSrc('cel7') ==
chkSrc('cel9')) && (chkSrc('cel7') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel4')) && (chkSrc('cel1') ==
chkSrc('cel7')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel2') == chkSrc('cel5')) && (chkSrc('cel2') ==
chkSrc('cel8')) && (chkSrc('cel2') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel6')) && (chkSrc('cel3') ==
chkSrc('cel9')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel5')) && (chkSrc('cel1') ==
chkSrc('cel9')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel5')) && (chkSrc('cel3') ==
chkSrc('cel7')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
return false;
}
Dessa forma nossa função retornará um valor true caso encontre qualquer umas das condições
descritas anteriormente ou retornará o valor false caso não encontre nenhumas das condições.
Agora basta inserir a função chkVitoria em nosso arquivo de forma que seja chamada a cada jogada
e, caso retorne o valor true, o jogo seja encerrado e o sistema informe quem foi o vencedor.
Vejamos como fica o código no ex.8.
ex.8
var jogador = 'x';
function chkJogo(id){
var src = chkSrc(id);
if(src == "branco.png"){
document.getElementById(id).src = jogador +".png";
if(chkVitoria()){
alert('Fim do jogo!\n Vitória do '+ jogador);
location.reload();
}
if(jogador == 'x'){
jogador = 'o';
} else {
jogador = 'x';
}
}
}
function chkSrc(id){
var src = document.getElementById(id).src;
return src.substring(src.length - 10, src.length);
}
function chkVitoria(){
if((chkSrc('cel1') == chkSrc('cel2')) && (chkSrc('cel1') ==
chkSrc('cel3')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel4') == chkSrc('cel5')) && (chkSrc('cel4') ==
chkSrc('cel6')) && (chkSrc('cel4') != 'branco.png')){
return true;
}
if((chkSrc('cel7') == chkSrc('cel8')) && (chkSrc('cel7') ==
chkSrc('cel9')) && (chkSrc('cel7') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel4')) && (chkSrc('cel1') ==
chkSrc('cel7')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel2') == chkSrc('cel5')) && (chkSrc('cel2') ==
chkSrc('cel8')) && (chkSrc('cel2') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel6')) && (chkSrc('cel3') ==
chkSrc('cel9')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel5')) && (chkSrc('cel1') ==
chkSrc('cel9')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel5')) && (chkSrc('cel3') ==
chkSrc('cel7')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
return false;
}
Viram como ficou simples identificar uma vitória? Vejamos esse bloco linha por linha:
→ Caso a função chkVitoria retorne um valor true, o bloco será executado.
if(chkVitoria())
→ O programa irá exibir um aviso com uma mensagem e a identificação do jogador vitorioso,
armazenada como conteúdo da variável jogador.
alert('Fim do jogo!\n Vitória do '+ jogador);
→ Quando o jogador clicar no “ok” da caixa de mensagem o programa irá disparar a função que
recarrega a página, mais ou menos como se pressionássemos o F5.
location.reload();
Agora que nosso jogo já identifica o vencedor da partida precisamos ensiná-lo a identificar um
empate e raciocínio aqui não poderia ser mais simples. Temos nove células que podem ser
marcadas, se após a nona jogada o programa não tiver identificado um vencedor é porque o jogo
empatou, já que não é possível efetuar mais nenhuma jogada. Então só precisamos criar uma
variável contadora que seja incrementada a cada jogada e quando o valor dessa variável chegar a
nove o programa declara o jogo empatado. Ficou claro? São três passos simples: Criamos uma
variável “jogada” com valor igual a zero, somamos um ao valor dessa variável a cada jogada e,
após verificarmos se há um vencedor com a função “chkVitoria”, verificamos se o valor de
“jogada” é igual ou maior que nove, se a resposta for verdadeira declaramos o empate.
Repare nas linhas em negrito do ex.9.!
ex.9
var jogador = 'x';
var jogada = 0;
function chkJogo(id){
var src = chkSrc(id);
if(src == "branco.png"){
document.getElementById(id).src = jogador +".png";
jogada ++;
if(chkVitoria()){
alert('Fim do jogo!\n Vitória do '+ jogador);
location.reload();
}
if(jogada >= 9){
alert('JOGO EMPATADO');
location.reload();
}
if(jogador == 'x'){
jogador = 'o';
} else {
jogador = 'x';
}
}
}
function chkSrc(id){
var src = document.getElementById(id).src;
return src.substring(src.length - 10, src.length);
}function chkVitoria(){
if((chkSrc('cel1') == chkSrc('cel2')) && (chkSrc('cel1') ==
chkSrc('cel3')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel4') == chkSrc('cel5')) && (chkSrc('cel4') ==
chkSrc('cel6')) && (chkSrc('cel4') != 'branco.png')){
return true;
}
if((chkSrc('cel7') == chkSrc('cel8')) && (chkSrc('cel7') ==
chkSrc('cel9')) && (chkSrc('cel7') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel4')) && (chkSrc('cel1') ==
chkSrc('cel7')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel2') == chkSrc('cel5')) && (chkSrc('cel2') ==
chkSrc('cel8')) && (chkSrc('cel2') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel6')) && (chkSrc('cel3') ==
chkSrc('cel9')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel5')) && (chkSrc('cel1') ==
chkSrc('cel9')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel5')) && (chkSrc('cel3') ==
chkSrc('cel7')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
return false;
}
Nosso jogo agora está cem por cento funcional, mas como nem sempre temos alguém disposto a
jogar uma partida por perto, vamos ensinar o computador a jogar.
Parte 3 – Jogando com a máquina
No começo da apostila eu usei o termo indevidamente “inteligência artificial”, mas o que faremos
aqui será apenas uma programação baseada em valores aleatórios e para tal usaremos as funções
Math.random e Math.floor nativas da linguagem JavaScript. Vamos entender como funcionam
essas funções.
A função Math.random() gera um valor aleatório entre zero e um, sem incluir o um. E a função
Math.floor() arredonda um valor para baixo, eliminando as casas decimais de um número e
transformando-o em um inteiro. Para nosso jogo vamos precisar que o computador escolha uma
célula identificada por valores que vão de um a nove, então faremos com que o sistema gere um
número aleatório cujo valor mínimo é 0 e o valor máximo é 0,999... pegaremos esse número e
multiplicamos por 9, então nosso valor mínimo passa a ser 0 e o máximo 8,999... somamos 1 a esse
número de forma que nossos valores ficam entre 1 e 9,999... e usamos a função Math.floor() para
arredondar esse número para baixo, assim teremos um número aleatório entre 1 e 9. Simples não é?
Agora basta criarmos uma função jogadaDoComputador() que retorne a célula onde o computador
irá jogar, da seguinte forma: return 'cel' + Math.floor((Math.random() * 9) + 1);
Já sabemos como criar a jogada do computador, agora precisamos ativar esse mecanismo. Vamos
criar um “interruptor” na página HTML para ligar e desligar o jogador virtual. Usaremos um
formulário com uma entrada do tipo checkbox com uma id= “cpu”. Com essas modificações o
código final de nossa página HTML ficara com visto no ex.10.
ex.10
<!DOCTYPE HTML>
<html>
<head>
<title>Jogo da Velha</title>
<script src="script.js"></script>
</head>
<body bgcolor="black">
<form>
<b style="color:#fff;">Jogar contra o computador</b>
<input type="checkbox" id="cpu" checked>
</form>
<table border="0" cellspacing= "5" align="center">
<tr>
<td><img src="branco.png" id="cel1" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel2" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel3" onClick="chkJogo(this.id)"></td>
</tr>
<tr>
<td><img src="branco.png" id="cel4" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel5" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel6" onClick="chkJogo(this.id)"></td>
</tr>
<tr>
<td><img src="branco.png" id="cel7" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel8" onClick="chkJogo(this.id)"></td>
<td><img src="branco.png" id="cel9" onClick="chkJogo(this.id)"></td>
</tr>
</table>
</body>
</html>
Agora, em nosso código JavaScript, podemos conferir a cada jogada se vamos jogar contra outra
pessoa ou contra a máquina, para tal criaremos uma variável “cpu” que receberá o estado do
checkbox que acabamos de criar. Se o checkbox estiver marcado, ou seja, se o valor de seu atributo
checked for igual a “true”, usaremos a função jogadaDoComputador() para gerar uma jogada
aleatória, caso contrário o jogo aguardará jogador “o” humano realizar sua jogada. Vamos ver como
ficou nosso código finalizado e funcional de controle do jogo da velha em JavaScript no ex.11.
ex.11
var jogador = 'x';
var jogada = 0;
function chkJogo(id){
var src = chkSrc(id);
var cpu = document.getElementById('cpu').checked;
if(src == "branco.png"){
document.getElementById(id).src = jogador +".png";
jogada ++;
if(chkVitoria()){
alert('Fim do jogo!\n Vitória do '+ jogador);
location.reload();
}
if(jogada >= 9){
alert('JOGO EMPATADO');
location.reload();
}
if(jogador == 'x'){
jogador = 'o';
} else {
jogador = 'x';
}
}
if(cpu && jogador == 'o'){
chkJogo(jogadaDoComputador());
}
}
function jogadaDoComputador(){
return 'cel' + Math.floor((Math.random() * 9) + 1);
}
function chkSrc(id){
var src = document.getElementById(id).src;
return src.substring(src.length - 10, src.length);
}
function chkVitoria(){
if((chkSrc('cel1') == chkSrc('cel2')) && (chkSrc('cel1') ==
chkSrc('cel3')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel4') == chkSrc('cel5')) && (chkSrc('cel4') ==
chkSrc('cel6')) && (chkSrc('cel4') != 'branco.png')){
return true;
}
if((chkSrc('cel7') == chkSrc('cel8')) && (chkSrc('cel7') ==
chkSrc('cel9')) && (chkSrc('cel7') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel4')) && (chkSrc('cel1') ==
chkSrc('cel7')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel2') == chkSrc('cel5')) && (chkSrc('cel2') ==
chkSrc('cel8')) && (chkSrc('cel2') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel6')) && (chkSrc('cel3') ==
chkSrc('cel9')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
if((chkSrc('cel1') == chkSrc('cel5')) && (chkSrc('cel1') ==
chkSrc('cel9')) && (chkSrc('cel1') != 'branco.png')){
return true;
}
if((chkSrc('cel3') == chkSrc('cel5')) && (chkSrc('cel3') ==
chkSrc('cel7')) && (chkSrc('cel3') != 'branco.png')){
return true;
}
return false;
}
Repare que após a jogada do jogador “x” o sistema verifica duas condições: se o valor da variável
cpu é igual a true e se o valor da variável “jogador” é igual a “o”, caso as duas condições sejam
verdadeiras o sistema executa a função chkJogo() passando como parâmetro o id gerado pela
função jogadaDoComputador().
Podemos incrementar a jogada do computador gerando jogadas não aleatórias através de certas
condições. Por exemplo, se a célula do meio estiver em branco então ele sempre jogará nela. Para
implementarmos esse tipo de ação é muito simples, basta adicionarmos os códigos na função
jogadaDoComputador() no caso acima a função ficaria assim:
function jogadaDoComputador(){
if(chkSrc('cel5') == 'blank.png'){
return 'cel5';
}
return 'cel' + Math.floor((Math.random() * 9) + 1);
}
Experimente outras condições para tornar seu jogo mais interessante, como testar se duas células
estão alinhadas e jogar em uma terceira para vencer o jogo, por exemplo. Use a criatividade, a
lógica e os comandos aprendidos nesse tutorial para explorar outras possibilidades do jogo.
Nota do autor:
Esta apostila foi desenvolvida unicamente com o propósito de exercitar alguns conceitos pontuais
de HTML e JavaScript. Não deixe de ampliar seus conhecimentos aprofundando seus estudos
buscando livros, tutoriais, fóruns, vídeo-aulas, etc. E lembre-se sempre de compartilhar seu
conhecimento. Bons estudos!Gustavo Silveira.
Continue navegando
Materiais relacionados
83 pág.
62 pág.
63 pág.
Perguntas relacionadas
Compartilhar