и

# app/models/word.rb
class Word < ApplicationRecord
  def self.random_from(diff)
    where(difficulty: diff).sample
  end
end

# app/controllers/words_controller.rb
def index
    if params[:difficulty]
      word = Word.random_from(params[:difficulty])
      word_json = {id: word.id, name: word.name.upcase, difficulty: word.difficulty, scramble: word.name.split('').shuffle.join().upcase}
    else
      words = Word.all
    end
    render json: {
      status: 'SUCCESS',
      message: 'Loaded data',
      data: word_json || words,
      }, status: :ok
  end

И точно так же мы извлекаем одно случайное слово из нашей базы данных! Легкий гороховый лимонный сок.

// client/src/actions/gameActions.js
export function fetchRandomWord(diff){
  let difficulty = diff
  return (dispatch) => {
    dispatch({type: 'LOADING'});
    return fetch(`api/words?difficulty=${difficulty}`)
      .then(rsp => rsp.json())
      .then(json => json.data)
      .then(word => dispatch({type: 'FETCH_WORD', payload: word}))
      .then(word => dispatch(fetchAnagrams(word.payload.name)));
  }
}

Теперь, когда мы получаем случайные слова из базы данных, нам нужно найти способ проверить, является ли ответ, который вводит игрок, действительным или нет. Таким образом, очевидно, первая проверка заключается в сравнении ответа с целевым словом, если это совпадение, БИНГО, время двигаться дальше. Но что, если ответом является не целевое слово, а анаграмма цели? Первоначально мое решение этого затруднения было таким:

Шаг 1. Сравните ответ с целью. Если они совпадают, переходите к следующему раунду. В противном случае перейдите к шагу 2. Шаг 2. Убедитесь, что буквы в ответе совпадают с буквами в Target. Если да, переходите к шагу 3, иначе игра окончена. Шаг 3) Вызовите API-интерфейс словаря, чтобы убедиться, что ответ действительно является реальным словом. Если да, то ура! Если нет, игра окончена.

Этот поток управления работал нормально, но у него была одна вопиющая проблема. Цикл запросов к внешнему API занимал слишком много времени и как бы портил ход игры. Решение? Я нашел Anagram API, который может предоставить все анаграммы заданного слова! Итак, теперь, вместо того, чтобы ждать ответа и ТОГДА отправлять этот вызов API, как только я извлекаю слово из базы данных, я немедленно извлекаю все анаграммы этого слова и сохраняю их в состоянии приложения. Итак, приведенная выше логика теперь:

Шаг 1. такой же, как указано выше. Шаг 2. Проверьте, входит ли ответ в массив анаграмм. Шаг 3. Проспер.

Итак, есть пара GET-запросов, а как насчет POST-запроса? Это было немного сложнее для меня, но с помощью быстрого поиска в Google я быстро разобрался и запустил его. Когда пользователь получает высокий балл, он заслуживает признания! Было бы не очень приятно, если бы ваш высокий балл исчезал, как только вы покидали списки лидеров, не так ли?

Первый шаг — настроить файл high_scores_controller.

Пока все хорошо, ничего такого вы еще не видели. Здесь важно помнить, что когда вы переходите по этому маршруту с помощью POST-запроса, тело вашего запроса должно точно совпадать со score_params. Так что в этом случае тело моего запроса должно выглядеть примерно так: {high_scores: {:name =› ‘что-то], :score =› «какое-то число»}}.

def create
    HighScore.create(score_params)
  end
  private
  def score_params
    params.require(:high_score).permit(:name, :score)
  end

Имея это в виду, написать соответствующее действие очень просто.

Просто прикрепите прослушиватель событий к своей форме, и вы готовы публиковать высокие баллы!

// client/src/actions/gameActions.js
export function postHighScore(entry){
  return (dispatch) => {
    return fetch(`/api/high_scores`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        score: entry.high_score.score,
        name: entry.high_score.name
      })
    })
  }
}

Спасибо за чтение!

// Game.js
submitHighScore = (event) => {
    event.preventDefault();
    const name = document.getElementById('initials').value
    const score = document.getElementById('score').innerHTML
    this.props.onPostHighScore({high_score: {name: name, score: score}});
    this.props.history.push('/high_scores');
  }

Опубликовано cboujoukos 12 июля 2018 г.

Создание игры с помощью React