ATIVIDADE TEÓRICA E PRÁTICA – PROGRAMAÇÃO DE

APLICATIVOS – JAVASCRIPT – JOGO DA VELHA

ALTERNATIVO
CURSO: Técnico em Desenvolvimento de Sistemas

UNIDADE CURRICULAR: Programação de Aplicativos

CARGA HORÁRIA DA UNIDADE CURRICULAR: 195h

NOME DO INSTRUTOR: Wellington Pereira Santos

UNIDADE: SENAI MG BH – Centro de Treinamento da Tecnologia da Informação - CTTI

Atividade em Dupla – Programação de aplicativos – Javascript – jogo da velha

alternativo

Valor: 6pts.

Entrega: 16/08.

- Desenvolver um jogo clássico, mas abordando um outro tema de sua escolha, ex.
mudar o padrão de desenho X e 0(bolinha) entre outras mudanças que fica de sua
preferência e criatividade.

- A lógica do jogo deve ser desenvolvida em Javascript, seguindo as práticas

estudadas e desenvolvidas nas aulas práticas.

- A construção, estruturação e estilização deve ser desenvolvida com CSS3 e HTML5,

fica livre a escolha as estilizações, formatações, organizações e responsividades, tais
como o modo de montagem da estrutura, sendo Tabelas, Listas, Div’s, elementos
semânticos, formulários, imagens, etc.

- O jogo base está totalmente funcional, mas você terá que aperfeiçoa-lo utilizando
dos recursos ensinados em sala, como dito no início do trabalho.

- Crie suas próprias variáveis, defina sua própria lógica, os trechos e exemplos
mostrados aqui são apenas para guiá-lo e auxiliá-lo no seu desenvolvimento.

- Organizar os arquivos em pastas (.js, .css, .html, imagens, áudios, vídeos).

- Criar um repositório para atividade no GitHub (Fazer o Commit de todas as pastas e

arquivos da atividade).

- Criar no Pages do GitHub o link da sua página estática (Postar O link do site e o
arquivo.zip da página web no classroom).

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
Critérios de avaliação:

- Entrega da atividade dentro do prazo (Perda de pontos para entregas com atrasos).

- Todas as atividades devem ser entregues no horário das aulas, caso entregue fora do
seu horário de aula haverá perda de pontos.

- Criatividade e Exemplo Prático

- Apresentação do Jogo

- Aplicabilidade, Interações com os Jogadores

- Entendimento da Linguagem de Marcação – HTML/HTML5, Folhas de Estilos em

Cascata – CSS3 e a Linguagem script – Javascript.

Segue abaixo trechos e exemplos para auxiliar na montagem do jogo base.

Estrutura HTML.

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
- Uma maneira fácil para monta tela do jogo é utilizando tabelas, mas se preferir pode
utilizar outros elementos do HTML5 para estruturar esta tela, isso não afetará a lógica
do jogo.

- Inserir um arquivo de imagem em branco (Transparente), um quadrado de 150px por

150px (Tamanho personalizável), para preencher a área livre de cada célula ou
elemento HTML.

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
- Montado a estrutura básica, agora é iniciar a lógica no javascript. (Crie um arquivo
externo.js).

- No HTML coloque o evento onclick chamando a função acima.

- A função que será chamada pelo onclick dentro da TAG de imagem deve mostrar
uma mensagem com o “OK” e pelo parâmetro id os nomes dos id’s das células, são
dois testes primordiais para a lógica funcionar futuramente sem problemas.

- Próximo passo é testar se a função está chamando o caminho da imagem, com o

nome dela.

- Feito teste, note que na chamada do alert() ele vem com a informação de todo o
caminho da imagem, devemos fazer uma função separada para capturar somente o
nome da imagem e sua extensão, para uma condição futura.

- Esta Função vai filtrar somente o nome da imagem e sua extensão, pesquisar sobre o
evento substring().

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
A lógica vai ficar assim:

- A variável player foi criada para receber qual jogador começa marcando X ou O, a
função criada anteriormente receberá uma nova variável opt que recebe os
parâmetros da outra função que armazena o nome e extensão da
imagem(transp.png) e fazendo uma condicional se ela recebeu essa mesma imagem,
se sim(quando clicada em alguma célula da tabela do jogo ela irá inserir a imagem
correspondente da pasta, recebe X ou O, logo abaixo tem outra condicional fazendo
a variação, se foi inserido primeiro X e coloca agora uma O senão ela faz o contrário.

- Depois de verificado que o script feito anteriormente está inserindo as imagens

corretamente, agora precisamos fazer a condição onde, quando você fazer a
combinação de três iguais na mesma linha ou diagonal, será feito um alerta dizendo
quem venceu (X ou O).

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
- Acima um trecho da função onde está testando a possibilidade das primeiras casas,
se for true ela retorna para função checkjogo(id), essa condição fica logo a baixo da
condição que insere o X ou 0.

- O parâmetro return false é para finalizar o script, portanto você deve colocar o return
juntamente com a função lá no HTML dentro da tag de imagem.

- A função condicional é para verificar se todas as possibilidades foram testadas e se

nenhuma teve retorno true no final da função de winchek() retorna false.

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
- Para finalizar todas as jogadas é nenhum jogador conseguir uma combinação
lógica, essa condição tem como objetivo mandar um alerta que ninguém venceu, ou
seja, deu velha!

- Primeiramente criar uma nova variável numJog para contar as jogadas.

- Logo monte a condicional baseado nessa variável que é declarada novamente com
um incremento numJog++.

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br
- Para finalizar precisamos fazer a parte que você pode jogar contra a máquina, uma
função que funciona como uma inteligência artificial simples.

- Monte um pequeno formulário.

- Criar uma variável para receber o valor SIM ou NÃO.

- O principal parâmetro desta função é o return ‘c’, ela concatena o início do nome
do id da tag de imagem e coloca um número aleatório utilizando o evento Math, o
random retorna um número entre 0....0.3, 0.7...1 multiplicando por 9 retorna tipo 0,5 x 9
= 4,5 + 1 = 5,5 e para deixar o número inteiro fecha com o Math.floor() retornando
apenas 5, portanto o retorno fica c5 e conforme for as jogadas ele sorteia outro valor,
c4..c3..c7..c8..

- A condição mais acima faz o teste, se as variáveis retornarão true e se recebe o

último jogador O, assim a função checkjogo() recebe a outra função jogoDoPc() que
é a inteligência artificial explicada acima.

Serviço Nacional de Aprendizagem Industrial – Departamento Regional de Minas Gerais

Avenida do Contorno, 4456 – 11º andar – Funcionários
CEP 30.110-916 – Belo Horizonte – MG – Brasil
www.senaimg.com.br