Игра Rect RPG!

Автор оригинала: Daniel Fortes.

Поскольку я был ребенком, я большой поклонник видеоигр RPGS – специально JRPGS, как финальная фэнтезийная серия! Так что для моей первой статьи здесь на кода-то, что я подумал, что смогу попробовать что-нибудь забавное построить небольшие версии боевой системы RPG, используя мои любимые рамки, реагируют.

Начнем с написания компонента React Container, который выглядит как меню из окончательной фантазии, как видно выше. Это действительно просто компонент, состоящий из обертки DIV, который стиль, как меню FF:

const MenuContainer = ({ children, style }) =>
  

    {children}
  

Вы можете оформить заказ стиль в CSS, содержащиеся в кодепене ниже. Давайте также создадим Игра Компонент, который будет представлять всю игру:

const Game = () => 
  
    Menu
  
  
 ReactDOM.render(, document.getElementById('game'))

В результате чего:

Следующим шагом является создание меню, в котором использование может выбрать опцию. Для этого мы создаем Менуселикт Компонент (полный код в следующем кодепене):

class MenuSelect extends React.Component {
  
  (...)
  
  render() {
    return (
        
        {
          this.props.items.map( (item, index) => 
            
 this.itemRefs[index] = e}
              key={index}>
             { this.props.renderItem(item, index) }
            
          )
        }
        {
          this.props.active ?
          

            
          
  : null
        }
                
     )
  }
}

Основная идея здесь состоит в том, чтобы иметь контейнер из списка, который отображает произвольные компоненты; Рендеринг каждого компонента выполняется функцией Рендеритм поставляется в виде опоры, который питается данным Предметы массив, так что Рендеритм (предмет, индекс) оказывает данный товар. Пользователь выбирает параметры, используя клавиши со стрелками в клавиатуре, и нажмите Enter или пробел, чтобы на самом деле выбрать элемент, а затем функцию PROP Наконе называется. Теперь Игра Компонент становится:

const => {имя}

const Game = () =>
  

     {console.log("You have chosen", i)}}
      renderItem={renderItem}
      items={["Some character", "Other caracther", "Hyper Link", "Cid"]} />
  

Ну, теперь, когда базовый блок пользовательского интерфейса работает, мы можем начать думать о игровой логике и структуре! Мы построим очень простую модель: один игрок, сражающийся против одного врага. И игрок, и враг определяются их статистикой. В нашей простой модели статистика субъекта является что-то вроде:

const entityStat= {
  hp: 100,
    time: 2000,
    attack: 50,
    defense: 32
}

Здесь, конечно, HP это жизненная ценность сущности, время это интервал между поворотами, а атаковать и оборона … атака и защита.

Что касается экранов, появится начальный экран, при этом пользователи выбирают, чтобы запустить игру, игровой экран, где игрок выберет действие на каждом повороте, пока не закончился свой HP, ни врага, И игра заканчивается, возвращаясь на начальный экран.

Довольно минималистичное состояние для описания этой игры было бы:

const game = {
  isRunning: false,
    playerStats: { hp: 100, time: 2000, attack: 50, defense: 32 },
    enemyStats: { hp: 50, time: 1200, attack: 20, defence: 15 },
    isPlayerTurn: false
}

Это точное состояние в том смысле, что он определяет, что будет отображаться на экране в любой момент времени; Существуют и другие переходные объекты, например, таймеры для часов каждый поворот, которые необходимы для функционирования игры.

Итак, давайте попробуем структурировать эту игровую модель состояния вокруг компонентов реагирования. Начнем с небольшой структуры, которая просто отображает начальный экран:

const Start = ({ start }) =>
   {item} }
    >
  

class Game extends React.Component {
  constructor(props) {
    super(props)
    this.state = this.props.initialState ? {...this.props.initialState}{...initialState}
  }
  
  
  onStart() {
    this.setState(setIsRunning(true))
  }
  
  render() {    
    return (
      
        
        {
          this.state.isRunning ? 
            game :
          
            
        }
      
    )    
  }  
}

Итак, теперь у нас есть начальный экран, и когда пользователь использует «начать игру», он видит экран только с словом «игра». Это должно быть главный игровой экран. Давайте напишем это.

Для главного экрана нам придется меню панелей бок о бок, один для выбора действия, другой показывая статистику игрока. Итак, мы изменим функцию рендера на:

render() {    
    if (!this.state.isRunning) {
      return (
        
                
                  
        
      )
    }    
    return (
      
        
        
          
          
            A
          
          
            B
                    
        
      
    )    
  }  
}

с участием:

.main-game {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
}

.main-game-panel {
  display: flex;
  flex: 1;
  align-items: stretch;
}

Конечный результат: