Как кодировать T-Rex Chrome в качестве игры в телеграмме, используя Node.js

Фернандо Гарсия Алварес

В прошлом месяце мне было действительно заинтересовано в изучении того, как работает игровая платформа Telegram. И, как мне было также очень скучно играть в игру Chrome’s T-Rex в одиночестве, я решил заставить его работать в качестве игры Telegram.

Разувив его, я заметил, что там не было много телеграммных игровых учебных пособий. Учебник объяснил бы весь процесс построения его, от начала до конца. Поэтому я решил написать об этом.

Если вы хотите увидеть результат, игра доступна как Trexjumpbot в телеграмме и принимается здесь Отказ

Требования

Вам нужно иметь Node.js установлены

Шаг 1: Создание нашего бота

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

/Ньюбот

Тогда нас просят ввести имя и имя пользователя для нашего бота, и нам дают токен API. Нам нужно сохранить его, так как нам понадобится позже.

Мы также можем завершить нашу информацию BOT, изменив его описание (что будет показано, когда пользователь вступает в чат с нашим ботом под «чем этот бот?»

/setdescription.

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

/setuserpic.

Мы также можем установить текст, который появится на странице профиля бота, а также при совместном использовании его с другими пользователями

/setabouttext.

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

/setininline.

Шаг 2: Создание нашей игры

Теперь, когда у нас есть наш встроенный бот полностью настроен, пришло время спросить BOTFAME создать игру:

/новая игра

Мы просто следуем инструкциям и, наконец, мы должны указать короткое имя для нашей игры. Это будет действовать как уникальный идентификатор для него, который нам понадобится позже вместе с нашим токеном API BOT

Шаг 3: Получение источника игры T-REX

Поскольку Chromium является открытым исходным кодом, некоторые пользователи извлекли игру T-REX от нее, и мы можем легко найти свой исходный код в Интернете.

Для того, чтобы сделать игру, я использовал код, доступный в Этот Github Reppo Так что идите вперед и клонировать это:

git clone https://github.com/wayou/t-rex-runner.git

Шаг 4: Настройка зависимостей

Во-первых, перейдите в клонированную папку и переместите все свои файлы в новую папку, называемую «публику»

mkdir public && mv * public/.

И init проект

npm init

Вы можете заполнить запрошенную информацию, как вы хотите (вы можете оставить значения по умолчанию), оставьте точку входа в качестве index.js

Нам понадобится Express и Node-Telegram-Bot-API, чтобы легко взаимодействовать с API Telegram

npm install express --savenpm install node-telegram-bot-api --save

Мы собираемся добавить начальный скрипт, поскольку необходимо для развертывания игры в Heroku. Откройте Package.json и добавьте сценарий запуска под секцией скриптов:

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "node index.js"

Шаг 5: Кодирование нашего сервера

Теперь, когда у нас есть все зависимости, настаиваемые, пришло время кодировать сервер для нашего бота. Продолжайте и создайте файл index.js:

const express = require("express");

const path = require("path");

const TelegramBot = require("node-telegram-bot-api");

const TOKEN = "YOUR_API_TOKEN_GOES_HERE";

const server = express();

const bot = new TelegramBot(TOKEN, { polling: true } );

const port = process.env.PORT || 5000;

const gameName = "SHORT_NAME_YOUR_GAME";

const queries = {};

Код выше довольно просто. Мы просто требуем наших зависимостей и установим токен, который мы получили от BotFather, а также короткое имя, которое мы определили как идентификатор игры. Кроме того, мы настроили порт, инициализируйте экспресс и объявляете запросы пустым объектом. Это будет выступать в качестве карты для хранения объекта пользователя Telegram под его идентификатором, чтобы получить его позже.

Затем нам нужно сделать содержимое публичного каталога, доступного в качестве статических файлов

server.use(express.static(path.join(__dirname, 'public')));

Теперь мы собираемся начать определять нашу логику ботов. Во-первых, давайте кодировать команду/help

bot.onText(/help/, (msg) => bot.sendMessage(msg.from.id, "This bot implements a T-Rex jumping game. Say /game if you want to play."));

Мы должны указать команду как Regex на первом параметре контекста, а затем укажите ответ BOT с SendMessage. Обратите внимание, что мы можем получить доступ к идентификатору пользователя, чтобы ответить, используя msg.from.id

Когда наш бот получает команду/начало или/игровую команду, мы собираемся отправить игру пользователю, используя bot.sendgame

bot.onText(/start|game/, (msg) => bot.sendGame(msg.from.id, gameName));

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

bot.on("callback_query", function (query) {

  if (query.game_short_name !== gameName) {

    bot.answerCallbackQuery(query.id, "Sorry, '" + query.game_short_name + "' is not available.");

  } else {

    queries[query.id] = query;

    let gameurl = "https://YOUR_URL_HERE/index.html?  id="+query.id;

    bot.answerCallbackQuery({

      callback_query_id: query.id,

      url: gameurl

});

});

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

Если все правильно, мы храним запрос в запросы объекта, определенные ранее под его идентификатором, чтобы восстановить его позже, чтобы установить высокую оценку при необходимости. Затем нам нужно ответить на обратный вызов, предоставляя URL-адрес игры. Позже мы собираемся загрузить его в Heroku, так что вам придется войти в URL здесь. Обратите внимание, что я передаю идентификатор в качестве параметра запроса в URL-адресе, чтобы иметь возможность установить высокую оценку.

Прямо сейчас у нас есть полнофункциональная игра, но мы все еще отсутствующие высокие оценки и встроенное поведение. Давайте начнем с реализации встроенных и предложений нашей игры:

bot.on("inline_query", function(iq) {

  bot.answerInlineQuery(iq.id, [ { type: "game", id: "0", game_short_name: gameName } ] );

});

Последнее, мы собираемся реализовать логику высокой оценки:

server.get("/highscore/:score", function(req, res, next) {

  if (!Object.hasOwnProperty.call(queries, req.query.id)) return   next();

  let query = queries[req.query.id];

  let options;

  if (query.message) {

    options = {

      chat_id: query.message.chat.id,

      message_id: query.message.message_id

};

  } else {

    options = {

      inline_message_id: query.inline_message_id

};

  bot.setGameScore(query.from.id, parseInt(req.params.score),  options,

  function (err, result) {});

});

В указанном выше коде мы слушаем подобное URL. Мы просто извлечь пользователь из запросов объекта с учетом его идентификатор (если он существует) и использование bot.setGameScore отправить высокий балл телеграммы. Объект параметров отличается, если пользователь вызывает встроенный бот или нет, поэтому мы проверяем обе ситуации, как определено в Telegram Bot API.

Последнее, что мы должны сделать на нашем сервере, это просто слушать ранее определенный порт:

server.listen(port);

Шаг 6: Изменение игры T-REX

Мы должны изменить игру T-Rex, которую мы клонировали из репо GitHub, чтобы отправить высокую оценку на наш сервер.

Откройте файл index.js в разделе «Общедоступная папка», и в верхней части добавления следующих строк, чтобы получить идентификатор проигрывателя с URL:

var url = new URL(location.href);

var playerid = url.searchParams.get("id");

Последнее, мы собираемся найти функцию SETHIGHSCORE и добавить следующий код до конца его, чтобы отправить высокую оценку на наш сервер:

// Submit highscore to Telegram

var xmlhttp = new XMLHttpRequest();

var url = "https://YOUR_URL_HERE/highscore/" + distance  +

"?id=" + playerid;

xmlhttp.open("GET", url, true);

xmlhttp.send();

Шаг 7: Развертывание Героку

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

Начните с создания нового приложения:

Измените наши URL-заполнители с фактическим URL-адресом (замените своими собственными):

Замените URL с помощью функции SETHISHSCORE

var url = "https://trexgame.herokuapp.com/highscore/" + distance +

"?id=" + playerid;

А также на обратном вызове на сервере:

let gameurl = "https://trexgame.herokuapp.com/index.html?id="+query.id;

Наконец, давайте загрузим нашу игру в Heroku. Давайте следуем по шагам, подробно описанным на странице Heroku: после установки Heroku Cli , из папки проекта Войти и нажмите файлы:

heroku logingit initheroku git:remote -a YOUR_HEROKU_APP_NAMEgit add .git commit -m "initial commit"git push heroku master

И вот и все! Теперь у вас наконец-то есть полностью работающая телеграмма. Давай и попробуй!

Полный исходный код этого примера доступен на Гадость

использованная литература

Оригинал: “https://www.freecodecamp.org/news/how-to-code-chromes-t-rex-as-a-telegram-game-using-node-js-cbcf42f76f4b/”