Javascript: O jogo da Batalha Naval

Implementação do jogo da Batalha Naval utilizando a linguagem de programação Javascript.

Versão simplificada:

Partimos do principio que vamos ter uma grelha de 7 x 7 quadrados.

Nesta versão simplificada vamos implementar somente a 1ª linha, ou seja, em vez de um conjunto de 7 linhas por 7 quadrados, vamos implementar somente uma linha com 7 quadrados.

Vamos utilizar somente um navio de 3 quadrados, ou seja, o nosso navio vai ocupar 3 quadrados consecutivos.

1. Desenho de alto nível

1 O utilizador inicia o jogo

A O jogo coloca um navio (3 quadrados) num local aleatório da grelha

2 O jogo inicia-se

Repetir o seguinte até o navio se afundar:

A Pedir ao utilizador a jogada ("2", "0", etc.)

B Comparar a a jogada do utilizador com a localização do navio para determinar se Acertou, Falhou ou Afundou (se já tiver acertado em todas as 3 partes).

3 O jogo termina

Mostrar ao utilizador a sua pontuação com base no nº de jogadas

2. O fluxograma

AIB - Batalha Naval

3. Desenho de alto nível mais detalhado

1 O utilizador inicia o jogo

A O jogo coloca um navio (3 quadrados) num local aleatório da grelha:

É criado um navio que recebe uma localização representada por 3 posições consecutivas numa linha de 7 posições

As posições são simplesmente valores inteiros. Por exemplo as posições 1, 2, 3 definem a localização do nosso navio:

0 1 2 3 4 5 6

2 O jogo inicia-se

A Pedir ao utilizador a jogada ("2", "0", etc.) ou seja um valor inteiro:

B Verificar se o valor inteiro inserido pelo utilizador acertou em alguma das 3 posições do navio.

Guardar na variável Acertou o numero de posições do navio já acertadas. Valores possíveis: este valor pode ser de 0, 1, 2 ou 3.

3 O jogo termina quando as 3 posições do navio forem atingidas ou seja quando a nossa variável Acertou for igual a 3.

O programa vai mostrar o nº de jogadas que o utilizador teve de efetuar para afundar o navio. Valores possíveis: este valor pode ser de 3, 4, 5, 6 ou 7.

4. O pseudo-código

Área das variáveis ----------------------

DECLARAR três variáveis para guardar a localização de cada parte do navio.

Vamos chamar parte1, parte2 e parte3.

DECLARAR uma variável para guardar a jogada atual do utilizador.

Vamos chamar jogada

DECLARAR uma variável para guardar o numero de posições atingidas.

Vamos chamar atingidas e inicializamo-la a zero.

DECLARAR uma variável para guardar o numero de jogadas.

Vamos chamar totalJogadas e inicializamo-la a zero.

DECLARAR uma variável para verificar se o navio foi afundado ou não.

Vamos chamar de foiAfundado e e inicializamo-la a falso.

Área da lógica (inteligencia) -------------------------

CICLO: enquanto o navio não estiver afundado

OBTER a jogada do utilizador

COMPARAR a jogada do utilizador com os valores permitidos

SE a jogada for invalida

PEDIR uma nova jogada

CASO CONTRÁRIO

ADICIONAR o valor 1 a totalJogadas

SE jogada coincidir com uma das parte1, parte2 ou parte3

ADICIONAR o valor 1 ao valor de atingidas

SE o numero de atingidas for 3

COLOCAR foiAfundado a VERDADEIRO

INFORMAR o utilizador que "Acabaste de afundar o navio!"

FIM SE

FIM CASO CONTRARIO

FIM CICLO

Calcular a estatistica

Apresentar a estatística final do jogador

5. O esqueleto HTML (Ficheiro bn.html)

<!doctype html>

<head>

<title>Batalha Naval v1</title>

</head>

<body>

<h1>O jogo da batalha Naval, por (nome do aluno)</h1>

</body>

<HTML>

6. Código Javascript convertido a partir do pseudo-código e do Fluxograma (Ficheiro batalhanaval.js)

var parte1 = 3;

var parte2 = 4;

var parte3 = 5;

var jogada;

var atingidas = 0;

var totalJogadas = 0;

var foiAfundado = false;

while (foiAfundado == false) {

jogada = prompt("Podes jogar - Escolhe um numero entre 1 e 7:");

if (jogada < 1 || jogada > 7) {

alert("Jogada inválida. Tenta de novo!");

} else {

totalJogadas = totalJogadas + 1;

if (jogada == parte1 || jogada == parte2 || jogada == parte3) {

alert("Acertaste em mais uma parte!");

atingidas = atingidas +1;

if (atingidas == 3) {

foiAfundado = true;

alert("Navio totalmente afundado!");

}

} else {

alert("Falhaste...");

}

var estatistica = "Foi preciso um total de " + totalJogadas + " jogadas para afundar o navio, " +

"o que quer dizer que a tua pontaria foi de " + (3/totalJogadas);

alert(estatistica);

Uma melhoria ao programa inicial

Alteração da posição fixa inicial para aleatória:

// Gerar um valor inteiro aleatório entre 1 e 5. (Porquê 5?)

var posicaoAleatoria = 1 + Math.floor(Math.random() * 5);

var parte1 = posicaoAleatoria;

var parte2 = parte1+1;

var parte3 = parte2 +1;

Trabalho prático:

Implementa o programa e a melhoria inicial sem consultar a solução apresentada.

Acesso ao código Javascript completo (inclui ficheiro HTML)

Apresenta, primeiro, a tua implementação.

A seguir, consulta esta implementação: