MÓD.

/ UFCD DISCIPLINA

8847 TÉCNICAS DE MULTIMÉDIA

TURMA ANO LETIVO
FICHA DE TRABALHO N.º 8
12º MM 2019/2020

JOGO 3 EM LINHA (T2)

Objetivo:
Aplicar os conhecimentos adquiridos.

Nota: Cria uma pasta NProc_FT08_jogo e todos os ficheiros desta ficha devem ser guardados nesta
pasta.

1. Cria uma página web, com o nome index

2. Constrói o tabuleiro do jogo:
2.1. Tabela com 3 linhas e 3 colunas
Células: alinhamento horizontal centrado e vertical ao meio (middle), o nome (id) de
cada célula é celXY (X nº da linha e Y é o nº da coluna)
2.2. Insere uma linha em branco
2.3. A seguir à linha criada anteriormente, cria o seguinte botão com o nome limpar,

3. Cria uma folha de estilos com o nome estilosT2

Nota: A página web index está ligada a esta folha de estilos.
4. A tabela da página web é a mesa do jogo.
4.1. O nome da class é mesa e tem cor de fundo #660029.

5. As células, associadas à class celulas, têm as seguintes

caraterísticas:
5.1. Altura e largura de 100 pixéis
5.2. Cor de fundo #B3E5DE
5.3. Letra com tamanho de 80 pixéis
5.4. Cor da letra #130187
5.5. Cursor: apontador (pointer)

6. Cria um ficheiro de javascript com o nome jogarT2

Nota: A página web index está ligada a este ficheiro.

6.1. Cria a variável letra e atribui-lhe o valor X

6.2. Cria a função joga que recebe o parâmetro célula (que será o conteúdo de uma célula)
(Dentro da função)
6.2.1. Cria a variável celulaclicada que vai receber a identificação (id) da célula que foi clicada

6.2.2. Se a célula clicada tiver um X ou um O surge uma janela de alerta “Este quadrado já foi
escolhido!”. Caso contrário irá colocar na célula uma letra:

6.2.2.1. Se o conteúdo da variável letra for X então o conteúdo passará a ser O senão
mantém o X

Página 1
UFCD 8847 TM– 12º MM

6.3. Cria a função verifica para saber se a quem é o vencedor

(Dentro da função)
6.3.1. Cria uma variável para cada célula da tua tabela e que terá como valor o conteúdo da célula
correspondente dessa tabela
Nome da var cXY (o XY corresponde ao XY do nome que deste à célula na tabela)

6.3.2. Compara as células vazias e as ocupadas de forma a aparecer um alerta “Ganhaste!

Parabéns!' quando tiver 3 celulas com letras iguais em linha.

6.4. Cria a função novo para “limpar” o tabuleiro.

(Dentro da função)
6.4.1. Através da estrutura for percorre todas as células das linhas e das colunas (outra estrutura
for dentro do anterior)

6.4.2. Cria uma variável nomecelula com o conteúdo 'cel' + nº da linha + nº da coluna

6.4.3. Atribui o conteúdo de cada célula à nova variável criada anteriormente

7. Na página index deves acrescentar:

7.1. Ao clicar numa célula deves ativar as funções joga(this.id); e verifica();
7.2. Ao clicar com botão limpar deve ser executada a função novo();

Envia o exercício resolvido numa pasta zipada com o nome teuProcesso_Nome_FT08 para o Classroom da
disciplina.

Página 2