Put my game on my website

Phaser 3
1

i’m french sorry for my english i will do my best
hello, i think it’s a question wich have been already posted many times, but can i change the screen of my phaser game with CSS?

here i put my game on my website and i want to place him in the center and decorate with border etc…

but i dont succeed to change anything by aplying him in a <div> and with CSS,

here is the code, i hope you can help me, thank you all ^^

<html>
    <head>
         <header>
        <link rel="stylesheet" href="../../style/monstyle.css"/> 

<div class="entete"><!--permet de fixer le header-->
				<nav>
					<ul id="menu"><!--permet de donner les memes atribus graphiques que pour le menu déroulant-->
						<li class="retour"><a href="../index.html">RETOUR</a><!--lien du bouton retour-->
						</li>
						<li class="titre"><a href="#">THE RUNAWAYS</a><!--titre de la page-->
						</li>
					</ul>
				</nav>
			</div>
<div class="jeux">
        <script type="text/javascript" src="phaser.min.js"></script>
        <script type="text/javascript" src="scene1.js"></script>
        <script type="text/javascript" src="scene2.js"></script>
        <script type="text/javascript" src="scene3.js"></script>
        <script type="text/javascript" src="scene4.js"></script>
        <script type="text/javascript" src="scene5.js"></script>
        <script type="text/javascript" src="mort.js"></script>
        <script type="text/javascript" src="game.js"></script>
</div>
</header>
    </head>
    <body>
   
</body>
2

Your <div> and <header> tags should be inside the <body>, just keep the <script> and <link> in the <head>

<html>
<head>
    <link rel="stylesheet" href="../../style/monstyle.css"/> 
    <script type="text/javascript" src="phaser.min.js"></script>
    <script type="text/javascript" src="scene1.js"></script>
    <script type="text/javascript" src="scene2.js"></script>
    <script type="text/javascript" src="scene3.js"></script>
    <script type="text/javascript" src="scene4.js"></script>
    <script type="text/javascript" src="scene5.js"></script>
    <script type="text/javascript" src="mort.js"></script>
    <script type="text/javascript" src="game.js"></script>
</head>
<body>   
    <header>
        <div class="entete"><!--permet de fixer le header-->
            <nav>
                <ul id="menu"><!--permet de donner les memes atribus graphiques que pour le menu déroulant-->
                    <li class="retour"><a href="../index.html">RETOUR</a><!--lien du bouton retour-->
                    </li>
                    <li class="titre"><a href="#">THE RUNAWAYS</a><!--titre de la page-->
                    </li>
                </ul>
            </nav>
        </div>
        <div class="jeux">
        </div>
    </header>
</body>
3

ok thanks you, i done it, but now how can i create a border around my game screen? for example. with a canvas?

4

Well, now you can apply CSS to anything in the <body>

canvas {
    border: 3px solid red;
}
5

well, i think you dont undertand my question, my fault my writting is confusing, how can i apply CSS to my game screen?

like a text or an image, i can apply CSS to them and do many thing like resize, create a border, etc… how to do the same with my game screen.
because my game screen is positioned at the very bottom of the page under the other pictures and the menu, i want to center it,

sorry for being insitent héhé, but i really need help

thank you a lot

6

If you add an id to your <div> you can specify it in the game config, and that’s where Phaser will create the game instead of the end of you page.

    <div class="jeux" id="mygame">
    </div>

And in your game config, add:

    parent: "mygame",
2 Likes
7

it work perfectly thanks you a lot

8

Where exactly is the game config? Is it js, is it css? Please specify where to write this line please

9

Hi @jaimeggb,

Your question is very very basic, so, welcome to Phaser! May I suggest you start by doing some tutorials like the Getting Started one?
Once you reach part5, you’ll see what the config is, and that it’s in the javascript.

Happy coding!

10

Ahaha thanks you a lot for your answer After all this Time. I was standing in front on of m’y screen waiting for it since. Now i Can Resume my lire where i left it.

Blessing
Axel

11

I was answering jaimeggb!
I answered your question 3 years ago, you didn’t wait for anything :joy:

12

I have one question i have uploaded game on website. I need to know how to show game on homepage without iframe. Please help me this is the website impossible cat mario