Как можно разместить несколько игр html5 на сервере?

# #reactjs #firebase #heroku #html5-canvas #hosting

Вопрос:

Требование

Я ищу, чтобы разместить веб-сайт, который содержит несколько игр html5. Похоже на игры Poki или любую другую платформу для веб-игр.

Что я понимаю

Я просмотрел их веб-сайт (Poki Games) и обнаружил, что несколько значков игр html5 перечислены на веб — сайте в виде сетки. И при нажатии на любой из значков игры веб-сайт начинает загружать эту конкретную игру из внешнего источника внутри iframe.

На что мне нужен ответ

Я хочу знать, как они обслуживают несколько игр html5 из другого домена. Поскольку каждая из игр загружена в iFrame, я знаю, что у всех у них есть свои собственные index.html

Как добиться того же самого, какие подходы я должен использовать? Так что, если я это сделаю

 <iframe src="//another.domain.com/randomHtml5Game_1">  // will load randomHtml5Game1 game
<iframe src="//another.domain.com/randomHtml5Game_2">  // will load randomHtml5Game2 game
 

Мой набор навыков

Я в первую очередь разработчик интерфейсов, у меня есть опыт работы с хостингом в heroku. Также есть некоторый опыт работы с firebase. Я буду использовать React вместе с phaser для разработки.

Ответ №1:

Насколько я понимаю ваш вопрос, ответ очень прост.

Просто используйте разделение кода и разные точки рендеринга.

У нас была бы наша домашняя страница с различными ссылками на другие страницы (сетка изображений). Когда мы нажимаем на изображение, оно меняет маршрут.

 www.domain.com/game1
www.domain.com/game2
www.domain.com/game3
 

Вам нужно будет кодировать разделение маршрутов различными способами. Вы можете использовать webpack или NextJS (более простая платформа), или если вы просто используете приложение create-react, просто используйте suspend и lazyload.

На определенном маршруте он загрузит ваш html и javascript и запустит игру.

Я собираюсь догадаться, что это не тот ответ, который вы ищете, но это только начало ?

Дайте мне знать вашу мысль ?

Даниил

Комментарии:

1. Какое совпадение!, я просматривал видео на NextJS. Я попробую это сделать и посмотрю, соответствует ли это моей цели.

Ответ №2:

Firebase поддерживает размещение нескольких сайтов/доменов с использованием одного проекта. Вы можете разделить каждую игру в папку и разместить каждую из них отдельно и в другом домене.

Вы можете узнать больше об этом здесь.

Я использую это, например, при развертывании веб-приложений. Один домен-это приложение, подобное app.appname.com затем еще один домен www.appname.com является целевой страницей, и если проект как REST API я размещаю под api.appname.com. В моем случае я просто использую разные префиксы, но весь домен и URL-адрес могут отличаться.

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

Комментарии:

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