Как построить карточную игру

Вступление

Реагировать Является ли библиотека JavaScript, используемая для построения пользовательских интерфейсов. Это библиотека Frontend, которая быстро и легко учиться.

В этом руководстве мы будем строить карточную игру с использованием реагирования.

Игра Card-Up

Обзор игры

Игра состоит из 8 пар карт (открытки I.E 16). Карты устроены случайным образом и сталкиваются с. Пользователь переворачивает карту, нажав на нее. Если две перевернутые карты – это совпадение, они исчезнут с нашего игрового доска, в противном случае они будут перевернуты. Игра заканчивается, когда все карты успешно сопоставляются со своими парами.

Предварительное условие

Узел js (v6 и выше)
NPM (V5.2 и выше)

Пусть кодирование начнется.

Для начала мы должны сначала установить пакеты, которые мы требуем для создания приложения.

Во-первых, мы устанавливаем Create-React-App Пакет NPM. Этот пакет позволяет нам быстро настроить проект REVENTJS только с одной командой.

В вашем терминале или командной строке введите:

npm i create-react-app

Теперь, когда у нас установлено пакет Create-React-App, мы можем настроить наш проект.

npx create-react-app card-match-up

Открыть Матч-вверх карты Папка Project с любым текстовым редактором. Я буду использовать редактор VSCode.

Настройка проекта сопоставления карты

Начните приложение с:

npm start

Приложение должно быть автоматически открывается в вашем браузере на порту 3000 Отказ Интерфейс должен быть похож на это:

Страница создания по умолчанию

Нам нужно установить еще один пакет NPM для игры.

npm install react-card-flip --save

ReactCardflip Позволяет нам использовать флип-анимацию карты. Мне удобно использовать, а не писать пользовательские анимации CSS для компонентов карты.

Настройка структуры папки приложения

В SRC Папка, создайте две папки:

Компоненты Папка: эта папка добавит две папки. Они: А Отказ карта Папка: содержит карточку и Gameover JSX файлы B Отказ Заголовок Папка: содержит заголовок JSX файл.
Стили Папка: где мы поместим наш пользовательский файл CSS.

Нам также нужно удалить эти файлы в SRC папка.

App.csss.
index.csss.
logo.svg.

С созданием папок и удаления некоторых файлов наша структура папки должна выглядеть так:

Структура папки игры

Приложение в настоящее время нарушено, потому что мы все еще ссылаемся на некоторые файлы, которые мы удалили. Разрешить это, открыть App.js и index.js Файлы и удалить линии, где мы импортируем logo.svg, app.css и index.csss Отказ

Настройка файлов приложений

В SRC> Компоненты> Карта Папка, создать Card.jsx и Gameover.jsx файлы.

Напишите следующий фрагмент кода в ваших созданных файлах. Мы перейдем за ними в ближайшее время.

Card.jsx.

import React from 'react';
import ReactCardFlip from "react-card-flip";

const Card = ({ id, isFlipped, handleClick, cardNumber }) => (
  
    

    
  
);

export default Card;

Gameover.jsx.

import React from 'react';

const GameOver = ({ restartGame }) => (
  
    Game Over!
    If you enjoyed playing this game, follow me @iamkenec for more...
    
  
);

export default GameOver;

В SRC> Компоненты> Заголовок Папка, создать Header.jsx файл. Введите следующий фрагмент кода внутри Header.jsx файл.

Header.jsx.

import React from 'react';

const Header = ({ restartGame }) => (
  
    
    
    
      
    
  
);

export default Header;

Заменить содержимое App.js В SRC Папка с фрагментом кода ниже.

App.js.

import React, { PureComponent } from 'react';
import Header from './components/header/Header';
import Card from './components/card/Card';
import GameOver from './components/card/GameOver';

import './styles/main.css';

class App extends PureComponent {

  state = { 
    isFlipped: Array(16).fill(false),
    shuffledCard: App.duplicateCard().sort(() => Math.random() - 0.5),
    clickCount: 1,
    prevSelectedCard: -1,
    prevCardId: -1
  };

  static duplicateCard = () => {
    return [0,1,2,3,4,5,6,7].reduce((preValue, current, index, array) => {
      return preValue.concat([current, current])
    },[]);
  };

  handleClick = event => {
    event.preventDefault();
    const cardId = event.target.id;
    const newFlipps = this.state.isFlipped.slice();
    this.setState({
        prevSelectedCard: this.state.shuffledCard[cardId],
        prevCardId: cardId
    });

    if (newFlipps[cardId] === false) {
      newFlipps[cardId] = !newFlipps[cardId];
      this.setState(prevState => ({ 
        isFlipped: newFlipps,
        clickCount: this.state.clickCount + 1
      }));

      if (this.state.clickCount === 2) {
        this.setState({ clickCount: 1 });
        const prevCardId = this.state.prevCardId;
        const newCard = this.state.shuffledCard[cardId];
        const previousCard = this.state.prevSelectedCard;

        this.isCardMatch(previousCard, newCard, prevCardId, cardId);
      }
    }
  };

  isCardMatch = (card1, card2, card1Id, card2Id) => {
    if (card1 === card2) {
      const hideCard = this.state.shuffledCard.slice();
      hideCard[card1Id] = -1;
      hideCard[card2Id] = -1;
      setTimeout(() => {
        this.setState(prevState => ({
          shuffledCard: hideCard
        }))
      }, 1000);
    } else {
      const flipBack = this.state.isFlipped.slice();
      flipBack[card1Id] = false;
      flipBack[card2Id] = false;
      setTimeout(() => {
        this.setState(prevState => ({ isFlipped: flipBack }));
      }, 1000);
    }
  };

  restartGame = () => {
    this.setState({
      isFlipped: Array(16).fill(false),
      shuffledCard: App.duplicateCard().sort(() => Math.random() - 0.5),
      clickCount: 1,
      prevSelectedCard: -1,
      prevCardId: -1
    });
  };

  isGameOver = () => {
    return this.state.isFlipped.every((element, index, array) => element !== false);
  };

  render() {
    return (
     
       
       { this.isGameOver() ?  :
       
          {
            this.state.shuffledCard.map((cardNumber, index) => 
              
            )
          }
        
       }
     
    );
  }
}

export default App;

Наконец, в SRC> Стили Папка, создать main.csss файл. Вставьте эти стили внутри этого.

main.css

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: auto auto auto auto;
  padding: 10px 150px 10px 150px;
}

.grid-header-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #c9d1f5;
  padding: 10px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.justify-left {
  text-align: left
}

.justify-end {
  text-align: right;
}

.justify-center {
  text-align: center;
}

.timer {
  color: #5168e9;
  font-size: 20px;
  font-weight: bold;
}

.restart-button {
  width: 15em;
  height: 3em;
  color: white;
  background-color: #5168e9;
  border: 0;
}

.game-status-text {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(24, 21, 16);
  font-weight: bold;
}

.card {
  width: 100%;
  height: 10em;
  background-color: rgb(75, 42, 165);
  color: white;
  font-size: 15px;
}

.hide-card {
  visibility: hidden;
}

.card-front {
  background-color: #999999;
  box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}

.card-back {
  font-weight: bold;
}

.react-card-front {
  position: unset !important;
}

Прежде чем мы перейдем на строки кода, которые выше, давайте убедитесь, что наше приложение работает должным образом. Запустите приложение с NPM начать И попробуйте поиграть в игру до конца.

Давайте теперь будем иметь глубокий взгляд на код.

Код пройтись

App.js.

Этот файл содержит логику приложения. Он также составляет три других компонента реагирования, которые являются Header.jsx , Gameover.jsx и Card.jsx Отказ

App.js содержит внутренний объект состояния и пять различных методов.

Линия 18-22 Содержит метод для дублирования массива номеров карты. Это потому, что каждый номер карты должен иметь дубликат. Дупликация Способ вернет массив длины 16, который является [0,0,1,1,2,2,3,3,3,4,4,5,5,6,6,7,7]. Этот массив рандомизирован, когда он передан в государственный объект ShuffedCard.

метод дублированного

static duplicateCard = () => {
  return [0,1,2,3,4,5,6,7].reduce((preValue, current, index, array) => {
    return preValue.concat([current, current])
  },[]);
};

Линия 24 – 49 Содержит метод для переворачивания карты, когда он нажал, чтобы открыть номер карты. Метод меняет оформлен Состояние карты для True и предотвращает перевернутую карту, которая уже перевернута от реагирования на событие Click. От линия 40 Мы проверяем, есть ли количество перевернутых карт, чтобы мы могли проверить, являются ли двумя картами матч.

метод поклонника

handleClick = event => {
  event.preventDefault();
  const cardId = event.target.id;
  const newFlipps = this.state.isFlipped.slice();
  this.setState({
      prevSelectedCard: this.state.shuffledCard[cardId],
      prevCardId: cardId
  });

  if (newFlipps[cardId] === false) {
    newFlipps[cardId] = !newFlipps[cardId];
    this.setState(prevState => ({ 
      isFlipped: newFlipps,
      clickCount: this.state.clickCount + 1
    }));

    if (this.state.clickCount === 2) {
      this.setState({ clickCount: 1 });
      const prevCardId = this.state.prevCardId;
      const newCard = this.state.shuffledCard[cardId];
      const previousCard = this.state.prevSelectedCard;

      this.isCardMatch(previousCard, newCard, prevCardId, cardId);
    }
  }
};

Линия 51-69 Это метод, который проверяет, являются ли двумя переключательными картами. Этот метод вызывается в строке 46, как видно выше. Сетримс Метод, используемый при настройке состояния, так что флип-карта не будет крутой.

Iscardmatch Метод

isCardMatch = (card1, card2, card1Id, card2Id) => {
  if (card1 === card2) {
    const hideCard = this.state.shuffledCard.slice();
    hideCard[card1Id] = -1;
    hideCard[card2Id] = -1;
    setTimeout(() => {
      this.setState(prevState => ({
        shuffledCard: hideCard
      }))
    }, 1000);
  } else {
    const flipBack = this.state.isFlipped.slice();
    flipBack[card1Id] = false;
    flipBack[card2Id] = false;
    setTimeout(() => {
      this.setState(prevState => ({ isFlipped: flipBack }));
    }, 1000);
  }
};

Линия 71-79 это RestartGame метод. Этот метод в основном сбрасывает состояние игры.

метод RestartGame

restartGame = () => {
  this.setState({
    isFlipped: Array(16).fill(false),
    shuffledCard: App.duplicateCard().sort(() => Math.random() - 0.5),
    clickCount: 1,
    prevSelectedCard: -1,
    prevCardId: -1
  });
};

Линия 81-83 проверяет, закончится ли игра. Если игра закончится, Геймвер Компонент отображается.

метод Isgameover

isGameOver = () => {
  return this.state.isFlipped.every((element, index, array) => element !== false);
};

Линия 85-106 Последний блок кода в App.js это рендер метод. В Линия 88, Заголовок Компонент пропускается RestartGame реквизит. Isgameover Метод используется для визуализации Геймвер Компонент, когда игра окончена иначе, Карта компонент оказывается.

представлять метод

render() {
    return (
     
       
       { this.isGameOver() ?  :
       
          {
            this.state.shuffledCard.map((cardNumber, index) => 
              
            )
          }
        
       }
     
    );
  }
}

Card.jsx , Gameover.jsx и Header.jsx все презентационные компоненты. Они не содержат никакой логики приложения, скорее, они содержат опоры, переданные им от App.js родительский компонент.

Там мы идем! Наша забавная маленькая игра сделана.

Спасибо за чтение. CLAP Если вам было весело настроить карточную игру, используя реагирование.

Следуй за мной в Twitter @ Iamkenec.

Вступление

Обзор игры

Предварительное условие

Настройка структуры папки приложения

Настройка файлов приложений

Card.jsx.

Gameover.jsx.

Game Over!

If you enjoyed playing this game, follow me @iamkenec for more...

Header.jsx.

App.js.

main.css

Код пройтись

App.js.

Читайте ещё по теме: