Search the Community
Showing results for tags 'html5 phaser canvas css'.
Found 1 result
-
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.js var 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.css body { background: #000000; width:100%}h1{ color: #ffffff; text-align: center;}/*center canvas*/canvas { margin: auto; }
