How to run two or more different Phaser3 games on the same web page?

Question

Is it possible to run two or more Phaser3 games on the same web page?

I created two games. Each of them works perfectly on its own web page. I tried to run them on the same web page (I need that for my website) but failed ((

Each game has its own js-file. Only one game works the js-file of which is the last loaded. Here's the order of loading of the scripts:

<script src="phaser3.min.js"></script>
<script src="game1.js"></script>
<script src="game2.js"></script>

In this case, game2 works but game1 doesn't. What's interesting, there are no errors in a browser console.

I tried to solve this problem in different ways but unsuccessfully. Did anyone try to run two or more Phaser3 games on the same web page? How to do that? Is it possible anyway?

Do you need both games to run at once? As in will the player be controlling both games? — Robert Smith
Yes, both games have to run at once. These are very simple games. A player doesn't need to be controlling both of them. — Valeriy Medvedev
Might I ask why you want two games to be loaded at once, but only want the player to control one of them? — Robert Smith
Each game has a 'play' button to start and these buttons are animated. I want a visitor to see at once that these are games and not just pictures. — Valeriy Medvedev

Valeriy Medvedev Valeriy Medvedev · Accepted Answer · 2020-01-08T15:14:29

The easiest way to run two or more Phaser3 games on the same web page is to put each game in an iframe. Then they would be treated as independent by the browser. I checked that and both games worked fine.

How to run two or more different Phaser3 games on the same web page?

1 Answers