oddskill Posted July 14, 2014 Share Posted July 14, 2014 Hello. Im totally new to Phaser HTML5 and CSS.I have basic html knowledge and a decent background in java programming,I only have limited knowledge about javascript. I wrote following simple html5 page showing a bouncing sprite using Phaser. http://oddskill.bplaced.net/bouncingcow/index.html Why is the "a href" in the index.html (the link to the zipped sourcecode) shown above the Phaser canvas?I did place the call to the javascript (which creates the canvas if i understood that right) below that "a href". Any help would be appreciated. Best regards. Chris PS: sourcecode below index.thml<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Bouncing Cow</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/phaser.min.js"></script> </head> <body> <h1>BOUNCING COW<h1> <script type="text/javascript" src="js/bouncingcow.js"></script> <a href="bouncingcow.zip">sourcecode</a> </body></html>bouncingcow.jsvar game = new Phaser.Game(500, 500, Phaser.CANVAS, '', { preload: preload, create: create, update: update });var img;function preload() { game.load.image('cow', './assets/cow2_bg_white.png');}function create() { game.stage.backgroundColor = '#00ff00'; game.physics.startSystem(Phaser.Physics.ARCADE); img = game.add.sprite(20, 20, 'cow'); game.physics.enable(img, Phaser.Physics.ARCADE); img.body.velocity.x=100; img.body.velocity.y=100; img.body.collideWorldBounds = true; img.body.bounce.set(1); img.anchor.setTo(0.5, 0.5);}function update() { }style.cssbody { background: #000000; width:100%}h1{ color: #ffffff; text-align: center;}/*center canvas*/canvas { margin: auto; } Link to comment Share on other sites More sharing options...
Kobaltic Posted July 14, 2014 Share Posted July 14, 2014 The answer is that it is loading your html first then your javascript. Your <script src> tag acts like an include or require keyword. You are trying to call it more as a function. So here is how to fix it. Move your <script src> tags into the <head> of your html as you did with the first one. So your index should look like this:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Bouncing Cow</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript" src="js/bouncingcow.js"></script> </head> <body> <h1>BOUNCING COW<h1> <a id="zip" href="bouncingcow.zip">sourcecode</a> </body></html>Note I also added an id to your anchor tag. Next css allows you to use generic tags, classes and ids. You used a generic h1. This will make all h1 tags follow those same rules. I personally don't like this and I use classes and ids. A class is for a group of common items that you want to be the same. An id refereneces only one element. You cannot reuse Id names. In css you define and id with a # symbol and a class with a . (period) symbol. So your css should look something like this (note your positions will most likely be different.body { background: #000000; width:100%}h1{ color: #ffffff; text-align: center;}/*center canvas*/canvas { margin: auto; }#zip { top: 50%; left: 200px; position: absolute;}#container { top: 5%; left: 100px; position: absolute;}I also added a container id that will be your canvas. As you can see you can mix % and px to find your correct spot on the screen. For now just use position: absolute. There are others but I am not going to cover them now. Next you need to set an id to your canvas.var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'container', { preload: preload, create: create, update: update });Now go and play with the left and top values of your canvas and zip file to get them where you want them to be. edit: fixed typos oddskill 1 Link to comment Share on other sites More sharing options...
oddskill Posted July 15, 2014 Author Share Posted July 15, 2014 Hello Kobaltic. Thank you very much for your fast, detailed and informative answer. Best regards. Chris Link to comment Share on other sites More sharing options...
Recommended Posts