Frutas Divertidas | Desenvolvimento de Jogos com HTML, CSS e JavaScript

Introdução

Neste projeto, você aprenderá como criar um jogo simples "Frutas Divertidas" usando HTML, CSS e JavaScript. O jogo envolve combinar pares de imagens de frutas clicando nos quadrados no tabuleiro do jogo.

👀 Pré-visualização

Fruit matching game preview

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar os arquivos e diretórios do projeto
Como implementar a funcionalidade do botão Iniciar para mostrar e ocultar as imagens das frutas
Como implementar a funcionalidade de clicar nos quadrados para exibir as imagens das frutas
Como implementar a funcionalidade para comparar as duas imagens clicadas e atualizar a pontuação de acordo
Como atualizar a exibição da pontuação em tempo real

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Estruturar e organizar um projeto de desenvolvimento web
Usar JavaScript para manipular o DOM (Document Object Model) e lidar com interações do usuário
Usar jQuery para simplificar o código JavaScript e animações
Atualizar a interface do usuário em tempo real com base na lógica do jogo

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

Clique no botão Go Live no canto inferior direito da WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página. O jogo não funciona corretamente quando você clica no botão Iniciar, conforme mostrado:

unfinished game interface

Implementar a Funcionalidade de Comparação

Nesta etapa, você implementará a funcionalidade para comparar as duas imagens clicadas. Siga as etapas abaixo para concluir esta etapa:

Na parte inferior do arquivo js/index.js, adicione a seguinte função compare():

// Compare two images with each other to see if they are the same
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Hide
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

Esta função compara a origem (source) das duas imagens clicadas. Se forem iguais, a pontuação é aumentada em 2 e os quadrados são ocultados. Se não forem iguais, a pontuação é diminuída em 2 e as imagens são ocultadas. $("#score").text(score) atualiza a exibição da pontuação na seção <p>The current number of points is <span id="score">0</span></p> do arquivo html em tempo real.

Implementar a Funcionalidade do Botão Iniciar

Nesta etapa, você implementará a funcionalidade do botão Iniciar. Siga as etapas abaixo para concluir esta etapa:

Abra o arquivo js/index.js.
Na função startGame(), adicione o seguinte código para mostrar e, em seguida, ocultar as imagens nos quadrados quando o botão Iniciar for clicado:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

Na função startGame(), continue com o código anterior seguido pelo seguinte código para ocultar o botão "Iniciar":

// Hide Start button
$("#start").css("visibility", "hidden");

Implementar a Funcionalidade de Clique

Nesta etapa, você implementará a funcionalidade de clicar nos quadrados. Siga as etapas abaixo para concluir esta etapa:

Abra o arquivo js/index.js.
Na função startGame(), adicione o seguinte código para lidar com o evento de clique nos quadrados:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Hide Start button
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Get the id of the clicked image
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

Este código irá adicionar o ID da imagem clicada ao array images. Se a imagem estiver oculta, ela será exibida. Se a imagem já estiver exibida, ela será removida do array images. Quando houver duas imagens no array images, a função compare() será chamada após um atraso de 500ms.

Após concluir estas etapas, o jogo "Fruit for Fun" deve estar totalmente funcional e o resultado final é o seguinte:

Demonstração do jogo finalizado