Diseña un juego de burlas cerebrales con React y NeumorphismUI

Posted on by Rudeus Greyrat

Un juego de acertijos está diseñado para encontrar cuántas preguntas puede responder una persona lo más rápido posible. Vamos a diseñar una aplicación React con NeumorphismUI que mostrará algunas preguntas interesantes sobre algunos hechos comunes y el usuario debe responderlas lo antes posible.

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

React utiliza un paradigma declarativo que facilita el razonamiento sobre su aplicación y pretende ser eficiente y flexible. Diseña vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente el componente correcto cuando cambien sus datos. La vista declarativa hace que su código sea más predecible y más fácil de depurar.

¿Por qué usar NeumorphismUI?

NeumorphismUI es una interfaz de usuario suave y moderna que se utiliza para diseñar elementos web, marcos y pantallas, y también es una tendencia de diseño relativamente nueva que alcanzó una gran popularidad en estos días. Su estética está marcada por una interfaz de usuario mínima y de aspecto real que es una especie de re-avance de la antigua tendencia de diseño SkeuomorphismUI. Entonces, para que nuestro juego sea más fácil de usar y atractivo, lo usaremos en nuestro proyecto.

Este juego muestra un conjunto de preguntas que deben responderse lo más rápido posible y la puntuación se mostrará en consecuencia. Las respuestas incorrectamente respondidas o mal escritas resultarán en una calificación negativa.

Primero crearemos la aplicación React y le agregaremos algo de lógica con un estilo CSS para darle una sensación suave.

¿Qué estamos construyendo?

A continuación se muestra sólo un vistazo de lo que estamos construyendo aquí.

Ahora vamos a escribir algo de código JSX para construir nuestra aplicación web.

El diseño JSX: El diseño JSX define la estructura del elemento que se mostraría en la página. Esto incluye

  • Contenedor principal del juego: esta sección contiene el título del juego y el contenedor del juego.
  • Contenedor del juego: esta sección contiene el componente del juego que contiene toda la lógica del juego.
  • Componente del juego: este componente contiene la puntuación del juego, la pregunta, los mensajes de error y de éxito, el área de entrada, el botón de reinicio y el botón de entrada.
  • Mensajes de error y éxito del juego: el mensaje de error se mostrará si el usuario ingresó una respuesta incorrecta o si intenta enviar la respuesta con un área de entrada vacía, mientras que el mensaje de éxito se mostrará si el usuario ingresa la respuesta correcta.
  • Área de entrada: esta sección contiene el área de entrada donde se debe escribir la respuesta.
  • Restablecer y botón Entrar: el usuario puede hacer clic en el botón Restablecer si quiere pasar a otra pregunta o puede hacer clic en el botón Entrar para enviar la respuesta.

Implementación:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app Brain-Teasing-Game

Paso 2: después de crear la carpeta de su proyecto, es decir, Brain-Teasing-Game, muévase a ella con el siguiente comando:

cd Brain-Teasing-Game

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Nombre de archivo-App.js:

Javascript

import React from 'react';
import app from './App.css';
import Game from './Game.js';
  
function App() {
  // Creating the container and importing 
  // Game component
  return (
    <div className={app.Game__main_container}>
      <h1 className={app.Game__heading}>
       Welcome to the Brain Twister game
      </h1>
      <div className={app.Game__container}>
        <Game />
      </div>
    </div>
  );
}
  
export default App;

Nombre de archivo-Juego.js:

Javascript

import React, { useEffect, useState } from 'react';
import game from './Game.css';
  
const Game = () => {
  
// Initialising states with default values
  const [word, setWord] = useState('');
  const [value, setValue] = useState('');
  const [err, setErr] = useState('');
  const [success, setSuccess] = useState('');
  const [score, setScore] = useState(0);
  const [question, setQuestion] = useState('');
  
  // Starts generating words as soon as 
  // the component is placed in the DOM Tree
  useEffect(() => {
    wordGenerate();
  }, []);
  
  // Defining questions with their
  // corresponding answers
  const QUESTION = [];
  
  const ANSWERS = [];
  
  // Generating Random questions and storing
  // their answers in the state variable
  const wordGenerate = () => {};
  
  // checking if the typed answer is correct or not
  const check = () => {};
   
  // defining function to skip
  // to another question
  const reset = () => {};
  
  // Writing the JSX Code
  return (
    <div>
      <p className={game.Game__score}>SCORE : {score}</p>
  
      {question ? (
        <p className={game.Game__question}>Question: {question}</p>
  
      ) : null}
  
      {err ? <p className={game.Game__error}>{err}</p>
 : null}
  
      {success ? <p className={game.Game__success}>{success}</p>
 : null}
  
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter Answer Here!"
        className={game.Game__input_answer}
      />
  
      <button onClick={reset} className={game.Game__start}>
        Reset
      </button>
      <button onClick={check} className={game.Game__submit}>
        Enter
      </button>
    </div>
  );
};
  
export default Game;

Ahora, la estructura básica de nuestra aplicación está creada y ahora es el momento de agregarle algo de lógica definiendo las funciones inicializadas en el Componente del juego.

Lógica principal del juego : La lógica principal del juego se define en las funciones ya inicializadas. Hay varias funciones que trabajan juntas para ejecutar el juego.

  • Paso 1: Escribir las preguntas junto con sus correspondientes respuestas

    Las preguntas y las respuestas del juego de acertijos se almacenarán en las arrays inicializadas.

    JavaScript

    const QUESTION = [
        'Greatest Computer Science portal for geeks',
        'Full form of DSA',
        'Most Used Web Framework',
        'Founder of GeeksForGeeks',
        'Who Created Facebook',
        'CEO of Tesla and SpaceX',
        'When 5G going to launch in India',
      ];
      
      const ANSWERS = [
        'GeeksForGeeks',
        'Data Structures and algorithms',
        'React',
        'Sandeep Jain',
        'Mark Zuckerberg',
        'Elon Musk',
        '2021',
      ];

  • Paso 2: Generación de preguntas aleatorias

    Se llamará a la función wordGenerate() cuando el componente del juego se coloque en el árbol DOM o cuando el usuario haga clic en el botón Intro o Reiniciar.

    Generaremos un número aleatorio en el rango de 0 a la longitud de la array RESPUESTAS, lo almacenaremos como una variable y luego lo usaremos para seleccionar preguntas aleatorias junto con sus respuestas y almacenarlas en las variables de estado.

    JavaScript

    const wordGenerate =() => {
      const randomNumber = Math.floor(Math.random() * ANSWERS.length);
      setWord(ANSWERS[randomNumber]);
      setQuestion(QUESTION[randomNumber]);
    };

  • Paso 3: Comprobar si la respuesta escrita es correcta o no

    Aquí tenemos dos casos:

    • El usuario no ha ingresado ningún valor en el área de entrada:
      • Si el valor escrito es nulo, mostrará un mensaje de error
    • El usuario ha ingresado algún valor:
      • Convierta el valor ingresado a minúsculas, compárelo con la respuesta almacenada y luego muestre los mensajes de error o éxito según corresponda

    JavaScript

    const check =() => {
        if (value) {
          if (value.toLowerCase() === word.toLowerCase()) {
            setValue('');
            setErr(null);
            setSuccess('Correct Answer');
            setScore((prevScore) => prevScore + 1);
            wordGenerate();
          } else {
            setSuccess(null);
            setErr('Wrong Answer');
            setScore((prevScore) => prevScore - 1);
            setValue('');
            wordGenerate();
          }
        } else {
          setSuccess(null);
          setErr('Please enter the value!');
        }
      };

  • Paso 4: agregar lógica al controlador del botón de reinicio

    Cuando se hace clic en el botón de reinicio, elimina todos los mensajes de error y genera una nueva pregunta.

    JavaScript

    const reset =() => {
      setValue(null);
      setSuccess(null);
      setErr(null);
      wordGenerate();
    };

Filename-Game.js: después de agregar toda la lógica en nuestro Brain Teasing Game, el aspecto final de Game.js será el siguiente:

Javascript

import React, { useEffect, useState } from 'react';
import game from './Game.css';
  
const Game = () => {
  
  // Initialising states with default values
  const [word, setWord] = useState('');
  const [value, setValue] = useState('');
  const [err, setErr] = useState('');
  const [success, setSuccess] = useState('');
  const [score, setScore] = useState(0);
  const [question, setQuestion] = useState('');
  
  // Starts generating words as soon as
  // the component is placed in the DOM Tree
  useEffect(() => {
    wordGenerate();
  }, []);
  
  // Defining questions with their
  // corresponding answers
  const QUESTION = [
    'Greatest Computer Science portal for geeks',
    'Full form of DSA',
    'Most Used Web Framework',
    'Founder of GeeksForGeeks',
    'Who Created Facebook',
    'CEO of Tesla and SpaceX',
    'When 5G going to launch in India',
  ];
  
  const ANSWERS = [
    'GeeksForGeeks',
    'Data Structures and algorithms',
    'React',
    'Sandeep Jain',
    'Mark Zuckerberg',
    'Elon Musk',
    '2021',
  ];
  
  // Generating Random questions and storing
  // their answers in the state variable
  const wordGenerate = () => {
    const randomNumber = Math.floor(Math.random() * ANSWERS.length);
    setWord(ANSWERS[randomNumber]);
    setQuestion(QUESTION[randomNumber]);
  };
  
  // checking if the typed answer is correct or not
  const check = () => {
    if (value) {
      if (value.toLowerCase() === word.toLowerCase()) {
        setValue('');
        setErr(null);
        setSuccess('Correct Answer');
        setScore((prevScore) => prevScore + 1);
        wordGenerate();
      } else {
        setSuccess(null);
        setErr('Wrong Answer');
        setScore((prevScore) => prevScore - 1);
        setValue('');
        wordGenerate();
      }
    } else {
      setSuccess(null);
      setErr('Please enter the value!');
    }
  };
  
  // defining function to skip
  // to another question
  const reset = () => {
    setValue(null);
    setSuccess(null);
    setErr(null);
    wordGenerate();
  };
  
  // Writing the JSX Code
  return (
    <div>
      <p className={game.Game__score}>SCORE : {score}</p>
  
      {question ? (
        <p className={game.Game__question}>Question: {question}</p>
  
      ) : null}
  
      {err ? <p className={game.Game__error}>{err}</p>
 : null}
  
      {success ? <p className={game.Game__success}>{success}</p>
 : null}
  
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter Answer Here!"
        className={game.Game__input_answer}
      />
  
      <button onClick={reset} className={game.Game__start}>
        Reset
      </button>
      <button onClick={check} className={game.Game__submit}>
        Enter
      </button>
    </div>
  );
};
  
export default Game;

Ahora, con toda la lógica agregada al juego, vamos a agregarle un estilo CSS para darle una sensación de interfaz de usuario más suave.

El estilo CSS: CSS se utiliza para diseñar las diferentes partes y hacerlas más atractivas visualmente.

  • A cada elemento se le asigna un relleno y un margen adecuados.
  • El tamaño del texto de cada elemento es tal que el usuario puede leerlo fácilmente cuando juega.
  • También se proporciona un color de fondo de #e4ebf5e0 en el archivo index.css
  • Código:

Nombre de archivo: App.css

CSS

.Game__main_container {
  width: 40%;
  height: 50%;
  margin: 100px auto;
  border-radius: 3rem;
  box-shadow: 0.8rem 0.8rem 1.4rem #c8d0e7eb, -0.2rem -0.2rem 1.8rem #fff;
  padding: 4rem;
}
.Game__heading{
  box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7eb, -0.2rem -0.2rem 0.5rem #fff,
    inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  color: #9baacf;
}</pre><p style="text-align:justify"><strong>Filename: Game.css</strong></p>
  
<pre>.Game__score {
  text-align: right;
  color: #6d5dfc;
  font-weight: 700;
  display: inline-block;
  width:100%;
}
.Game__error,
.Game__success {
  color: red;
  border-radius: 10px;
  padding: 20px;
  margin: 10px 0;
  background-color: rgba(255, 0, 0, 0.207);
}
.Game__success {
  color: #fff;
  background-color: rgba(0, 128, 0, 0.399);
}
.Game__question {
  color: #1a1a1a;
  font-size: 20px;
}
.Game__input_answer {
  width: 20.4rem;
  height: 3rem;
  display: block;
  border: none;
  border-radius: 1rem;
  font-size: 1.4rem;
  padding-left: 1.4rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7,
    inset -0.2rem -0.2rem 0.5rem #fff;
  background: none;
  color: #9baacf;
  margin: 50px auto;
  outline: none;
}
.Game__input_answer input::placeholder {
  color: #bec8e482;
}
input:focus {
  box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7eb, -0.2rem -0.2rem 0.5rem #fff;
}
.Game__start,
.Game__submit {
  width: 45%;
  height: 4rem;
  font-size: 20px;
  margin: 10px;
  border-radius: 1rem;
  box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
  justify-self: center;
  display: inline;
  outline: none;
  border: none;
  cursor: pointer;
}
.Game__start {
  background: #6d5dfc;
  box-shadow: inset 0.2rem 0.2rem 1rem #8abdff,
    inset -0.2rem -0.2rem 1rem #5b0eeb, 0.3rem 0.3rem 0.6rem #c8d0e7,
    -0.2rem -0.2rem 0.5rem #fff;
  color: #e4ebf5;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: el juego ahora está listo para jugar en cualquier navegador.

Código fuente: https://github.com/RahulBansal123/Brain-Teasing-Game

Publicación traducida automáticamente

Artículo escrito por rbbansal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *