Projeto 4: Jogo de adivinhação

Curso Completo de Vue.js: Dominando do Básico ao Avançado

Sobre a Aula

Projeto 4: Jogo de adivinhação

Descrição: Este projeto é um simples jogo de adivinhação em que o usuário tenta adivinhar um número aleatório.

Requisitos:

O projeto deve gerar um número aleatório entre 1 e 100.
O projeto deve permitir que o usuário insira um palpite.
O projeto deve informar ao usuário se o palpite está correto, alto ou baixo.

Passos:

Crie um diretório para o projeto:

mkdir jogo-adivinhacao

Instale as dependências:

npm install vue

Crie os arquivos iniciais:

touch index.html
touch main.js
touch style.css

Implemente o código:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Jogo de Adivinhação</title>
</head>
<body>
  <div id="app">
    <h1>Jogo de Adivinhação</h1>

    <p>Tente adivinhar um número entre 1 e 100.</p>

    <input type="number" v-model="palpite">
    <button @click="adivinhar">Adivinhar</button>

    <p v-if="acertou">
      Parabéns! Você acertou!
    </p>
    <p v-else-if="palpite < numero">
      Seu palpite está baixo.
    </p>
    <p v-else>
      Seu palpite está alto.
    </p>
  </div>
</body>
</html>

JavaScript

import Vue from 'vue';

export default {
  name: 'App',
  data() {
    return {
      numero: Math.floor(Math.random() * 100) + 1,
      palpite: '',
      acertou: false,
    };
  },
  mounted() {
  },
  methods: {
    adivinhar() {
      this.acertou = this.numero === this.palpite;
    },
  },
};

CSS

body {
  font-family: sans-serif;
}

Execute o projeto:

npm run serve

Este projeto irá exibir a seguinte tela:

Jogo de Adivinhação

Tente adivinhar um número entre 1 e 100.

-

Desafios:

Adicione uma funcionalidade para permitir que o usuário jogue novamente após acertar o número.
Adicione uma funcionalidade para permitir que o usuário veja o número que o computador escolheu.

Conclusão:

Este projeto é uma boa maneira de praticar os conceitos aprendidos no curso, como:

Atributos v-model para vincular os dados do componente à interface do usuário.
Métodos de componentes para executar ações.
Funções aleatórias.

Avaliação:

Para avaliar este projeto, você pode considerar os seguintes critérios:

O projeto atende aos requisitos especificados?
O código está bem escrito e organizado?
O projeto é funcional e intuitivo?

Sugestões:

Se você quiser tornar este projeto mais desafiador, você pode adicionar as seguintes funcionalidades:

Permita que o usuário selecione o intervalo de números para adivinhar.
Permita que o usuário jogue contra um amigo.
Permita que o usuário salve seu histórico de pontuações.

Siga-me

Entrar na conversa