Javascript: O jogo da Batalha Naval

Publicado a 21/04/2015, 02:24 por Luis Pitta -org-   [ atualizado a 03/04/2019, 11:09 ]

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

       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

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:

  X X   
     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 foiAfundadoe 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 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>
<HTML lang="pt">
   <head>
      <title>Batalha Naval v1</title>
      <meta charset="utf-8">
   </head>

   <body>
      <h1>O jogo da batalha Naval, por (nome do aluno)</h1>
      <script src="batalhanaval.js"> </script>
   </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:

Javascript - Projeto Batalha Naval