wordplay

How to align game in webpage

Recommended Posts

I am new to phaser and had just used a pre-made 800x600 game from the examples. I am creating a HTML page and I want to display text above and below the game however it is completely refusing to do so. 

 

Any advice would be appreciated 

Share this post


Link to post
Share on other sites

link the css file in your HTML head
<head>
<link href="style.css" type="text/css">

</head>
<body>
<div class="wrp">
  <section class="text-one">some text</section>
  <canvas></canvas>
  <section class="text-two">some text</section>
</div>
</body>

** your css file
 


.wrp {
  display: block;
  width: 800px;
  margin: 0 auto;
}

canvas {
  display: block;
  width: 800px;
  height: 600px;
}

.text-one,
.text-two {
  display: block;
  height: 40px;
  background: #000;
  color: #fff;
  padding: 10px;
}

cheers

Share this post


Link to post
Share on other sites

Thanks for your replies. 

I have the following HTML code with the CSS file linked above

<!DOCTYPE html>
<html>

<head>
<link href="style2.css" type="text/css">
<script type="text/javascript" src="testgame/phaser.min.js"></script>
</head>
<body>
<div class="wrp">
  <section class="text-one">Example Text</section>
  <canvas>
    <script type="text/javascript" src="testgame/game.js"></script>
  </canvas>
  <section class="text-two">Example Text 2</section>
</div>
</body>

</html>

However, it's still not necessarily coming out how I want it to. See the attached image. 

 

Thanks again for your help

Screenshot_1.png

Share this post


Link to post
Share on other sites

add "rel=stylesheet" to your <link> element. Get sure that the path to your CSS-File is correct.
The CSS seems not to be loaded as of the background of the text-boxes should be black.

also: I think you need to give your canvas an ID and put it in the phaser game config, not sure about that, since I never used it that way. Maybe someone else can clarify.

and add this to your CSS to get rid of browser defaults

* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  border: 0;
}

 

Share this post


Link to post
Share on other sites
On 10/20/2018 at 8:43 AM, wordplay said:

 


<!DOCTYPE html>
<html>

<head>
<link href="style2.css" type="text/css">
<script type="text/javascript" src="testgame/phaser.min.js"></script>
</head>
<body>
<div class="wrp">
  <section class="text-one">Example Text</section>
  <canvas>
    <script type="text/javascript" src="testgame/game.js"></script>
  </canvas>
  <section class="text-two">Example Text 2</section>
</div>
</body>

</html>

I think I see the issue. Counter-intuitively, putting the `script` tag inside your `canvas` tag doesn't attach your Phaser game to the canvas, this is just a html5 thing.

You can have your `script` tag that references your game anywhere (probably best to keep it in your `head` tag with the other scripts.

Inside the config object for your game though you have to link to the html canvas element like so:

var game = new Phaser.Game({
  type: Phaser.AUTO,
  width: 1000,
  height: 1000,
  physics: {
    default: 'arcade',
    arcade: {gravity: {y: 500}}
  },
  scene: [ scene ],
  canvas: document.querySelector('canvas'); // <-- here!
});

The `document.querySelector()` method grabs the first html element that matches the css argument passed in, so here it grabs the first `canvas` tag.

Probably best practices would be to add an id to your canvas tag and use `document.querySelector('#yourCanvasIdHere')`.

Let me know if this works - otherwise send your js and I can help you work through it!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.