Jump to content

How to align game in webpage


wordplay
 Share

Recommended Posts

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

Link to comment
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

Link to comment
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;
}

 

Link to comment
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!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...