Игра Нянь Кот

Игра Nyan cat — это игра, основанная на музыкальном ритме 🎶 То есть вы начинаете с приличной сложности, так как музыка в начале игры приличная, и ожидается, что вы пройдете ее, по крайней мере, после нескольких попыток.
Как только вы пройдете первую фазу игры, вы перейдете в фазу панических событий, где все становится по-настоящему захватывающим 🎸. Panic event может начаться в любой момент, когда счет превысит 50 pts.

Почему так?

После участия в 4 предыдущих Хакатонах (фактически выиграв ни один из них :P), я решил сделать что-то действительно развлекательное и сумасшедшее. Мне пришла в голову идея сделать веб-игру, используя Redis в качестве основной базы данных. Благодаря RedisOm сделать это стало очень просто.
Простой в использовании благодаря документации, это был веселый проект для работы, и я действительно считаю его Wacky Wildcard Project :P.

Категория представления:

Wacky Wildcards

Используемые языки:

JavaScript(Next.Js) & Css

Скриншоты 📷

Посмотрите эти демо-ролики игры 🤯

Обзорное видео 🎥

Вот короткое видео, которое объясняет проект и то, как он использует Redis:

Игра «Нян кот

🎶 Т.е. вы начинаете с приличной сложности, т.к. музыка в начале приличная и ожидается, что вы пройдете ее, по крайней мере, после нескольких попытокПосле того, как вы пройдете первую фазу игры, вы перейдете в фазу панического события, где все становится действительно захватывающим 🎸. Паническое событие может начаться в любое время при превышении счета 50 pts.

Почему так?

После участия в 4 предыдущих Хакатонах (фактически выиграв ни один из них :P), я решил сделать что-то действительно развлекательное и сумасшедшее. Мне пришла в голову идея сделать веб-игру, используя Redis в качестве основной базы данных. Благодаря RedisOm это стало очень просто сделать… Простой в использовании благодаря документации Redis, это был веселый проект, над которым я работал, и я действительно думаю, что это…

Как это работает 🤔

Когда дело доходит до работы этой игры, все сводится к веб-приложению. Здесь я создал приложение Next с помощью npx create-next-app. Адрес кошелька Metamask для аутентификации пользователя, это приложение использует фреймворк Next.js с Moralis SDK и Redis для запросов и хранения данных в облаке Redis.
Игра отображается с помощью HTML5 canvas.

Как хранятся данные: 🤔.

В этом приложении я использую нечто под названием Redis-om для Node.js.
Здесь данные хранятся в форме JSON, где создана следующая схема

class Score extends Entity {}

const schema = new Schema(
  Score,
  {
    name: { type: "string" },
    address: { type: "string" },
    score: { type: "number", sortable: true, textSearch: true },
  },
  { dataStructure: "JSON" }
);

export const createScore = async (data) => {
  await connect();

  const repository = client?.fetchRepository(schema, client);

  const score = repository.createEntity();
  score.name = data.name;
  score.score = data.score;
  score.address = data.address;

  const id = await repository.save(score);

  const ttlInSeconds = 21600;
  await repository.expire(id, ttlInSeconds);

  await client.close();
  return id;
};

Обратите внимание, что я также объявил что-то как const ttlInSeconds = 21600; и затем использовал это в await repository.expire(id, ttlInSeconds);, потому что мы не хотим хранить данные дольше 6 часов. Да, ваши показатели обнулятся через 6 часов.
После этого мы можем создать маршрут API в нашем приложении Next.js.

import { createScore } from "../../lib/redis";

export default async function handler(req, res) {
  const id = await createScore(req.body);
  res.status(200).json({ id });
}

Как только мы создадим маршрут, он будет сохранен в нашей базе данных путем передачи данных из нашего фронтенда, для этого я использовал API fetch от javascript. Вы можете посмотреть этот файл, где я объявил такую логику.

Как осуществляется доступ к данным: 🤔

Если вы зашли в приложение, то там есть раздел таблицы лидеров, где указаны scores и addresses или usernames игроков с наибольшими pts.
Чтобы получить доступ к нашей базе данных и затем извлечь их из нашей базы данных Redis, у нас есть несколько способов, например…

На этапе разработки я использовал Redis Insight, импортируя свою базу данных с помощью public endpoint & password.

Но в нашем приложении я использовал файл .env.local для хранения всех ключей API.
После этого в нашем файле redis.js мы создаем экземпляр redis, который также называется Client():

import { Client } from "redis-om";

const client = new Client();

const connect = async () => {
  if (!client.isOpen()) {
    await client.open(process.env.NEXT_PUBLIC_REDIS_URL);
  }
};

Теперь, когда все настроено, мы используем API fetch для запроса данных.

  const fetchScores = async () => {
    const res = await fetch("/api/search?" + query);
    const results = await res.json();
    return results["scores"];
  };

Для этого нам также нужно создать индекс с помощью await repository.createIndex();, а затем мы можем создать другой маршрут API для вызова этого.

import { createIndex } from "../../lib/redis";

export default async function handler(req, res) {
  await createIndex();
  res.status(200).send("Index is created");
}

Затем мы используем пользовательскую функцию searchScore() для получения данных о топ-3 игроках с наибольшим количеством очков, для этого мы использовали RediSearch.

export const searchScore = async () => {
  await connect();

  const repository = client.fetchRepository(schema, client);

  const offset = 0;
  const count = 3;

  const scores = await repository
    .search()
    .sortDesc("score")
    .return.page(offset, count);

  return scores;
};

В результате мы получим нужные нам данные. И мы можем получить эти данные, используя API-маршрут search.js.

import { searchScore } from "../../lib/redis";

export default async function handler(req, res) {
  const data = req.query;
  const query = Object.keys(data)[0];

  const scores = await searchScore(query);
  res.status(200).json({ scores });
}

Вы можете посмотреть этот файл, где я объявил такую логику.

Еще один момент — мы также отображаем топ-3 игроков на главной странице игры. Давайте покопаемся в этом…
Итак, мы делаем что-то похожее на то, что мы делали выше, т.е.

const fetchScores = async () => {
    const res = await fetch("/api/search?" + query);
    const results = await res.json();
    return results["scores"];
};

Получаем счет как объект. Затем в нашем отдельном компоненте Marq.jsx мы используем его как:

<span>
    {score[0]?.name ? score[0]?.name : `${score[0]?.address?.slice(0,9)}...${score[0]?.address?.slice(39)}`}
</span>

См. раздел Использование RediSearch.

Надеюсь, все было понятно, а если нет, посмотрите видео. Если вы все еще застряли на чем-то, не стесняйтесь связаться со мной через мой любой социальный канал, я буду рад помочь вам 🙂

Как запустить его локально? 💻

Требования 📝

1. Node.js — ожидаемая версия «>=14.17.0». Если вам нужна помощь в установке на Linux, как мне, посмотрите.
2. Yarn — 1.22.19 (я использовал).
3. Metamask установленный на Browser — Скачать здесь

Вам понадобится учетная запись Metamask для прохождения аутентификации 📝.

Выполните следующие шаги для запуска на вашем устройстве после Cloning the repository и cd project-giga-cat для входа в корневую папку проекта.

1. Прежде всего, используйте yarn install для установки всех зависимостей.
2. В корневом каталоге репозитория создайте файл .env.local и объявите 3 переменные env. Но перед этим перейдите на Moralis.io & Redis и создайте бесплатный аккаунт на обоих сайтах.
3. В Moralis dashboard нажмите на Create new Dapp и выберите среду Testnet и в разделе testnets выберите ETH Goerli testnet. Выберите регион и дайте ему красивое имя, после чего приступайте к работе.
4. Теперь создайте подписку в вашем Redis Cloud и затем создайте базу данных для себя. Не забудьте сохранить их данные.
5. В вашем .env.local создайте 3 переменные в виде: NEXT_PUBLIC_MORALIS_SERVER_URL NEXT_PUBLIC_MORALIS_APP_ID NEXT_PUBLIC_REDIS_URL и задайте им значения.
6. Для Moralis перейдите в настройки вашего Dapp и скопируйте Dapp URL для SERVER_URL & Application ID для APP_ID.
7. Для Redis перейдите в вашу базу данных и из раздела Security скопируйте user password, а также возьмите public endpoint из раздела General. Теперь вставьте их в файл .env.local в формате NEXT_PUBLIC_REDIS_URL=redis://default:password@endpoint:port. Примечание: порт должен быть добавлен в последнюю строку вашего public endpoint.
8. Теперь запустите yarn run dev, чтобы запустить приложение.
9. Перейдите на http://localhost:3000/ и вы увидите страницу Connect Wallet.
10. Нажмите на Connect wallet и для входа в систему, должен появиться Metamask. И вы войдете в приборную панель.

Если у вас возникли трудности, посмотрите мое видео! 🔥

Если вы заметили что-то необычное, попробуйте обновить страницу. Если это не исправит поведение, пожалуйста, создайте проблему на Github 🙂

💥 Новое обновление: Пользователи теперь могут иметь свои временные имена 💥

Благодаря функции Redis -> TimeToLive или ttl, пользователи могут назначить себе временное имя пользователя на несколько часов, пока их баллы существуют. Проверьте & прочитайте документацию для получения дополнительной информации.

Развертывание 🚀

Развертывание осуществляется с помощью Vercel.

Застряли? 🤔

Не стесняйтесь связаться со мной через любой контакт, LinkedIn, Gmail или оставить вопрос на Github.

MIT

Каждый саундтрек полностью принадлежит соответствующему исполнителю & я не владею ими вообще.

Надеюсь, вам понравился проект ❤️ и давайте подождем результатов 🤞🤞🤞

Сделано с помощью ❤️ & Redis