Resume game idea

[FrankyCutty]

I want a section in my website with a phaser game.

 

You can see my portfolio here: http://www.aml2.hol.es/

 

If you press the gamepad icon, show a div with the game container.

 

I try the website in movile devices, and the game started screen don´t show.

 

How build I a responsive canvas game to all devices? My website is responsive too.

 

In index.html I have this:

 <!-- game -->                                            <div id="game" class="content_2">                                                <!-- .title -->                                                <h1 class="h-bloc">Video Game Resume</h1>                                               //here paint the game                                                <div id="game_div"> </div>                                            </div> <!-- End .game -->

 

And this is my mainGame.js:

 

window.onload = function() {var game = new Phaser.Game(700, 450, Phaser.CANVAS, 'game_div', { preload: preload, create: create });function preload() {    //  The second parameter is the URL of the image (relative)    game.load.image('logo', 'images/game/logoCredits.png');    game.load.image('cloud', 'images/game/clouds.png');}function create() {//  A more suitable underwater background color    game.stage.backgroundColor = '#43B6B1';    //  This creates a simple sprite that is using our loaded image and    //  displays it on-screen    var logotipe = game.add.sprite(140, 40, 'logo');    game.add.tween(logotipe).to({ y: 140 }, 1500, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);    var clouds = game.add.sprite(0, 0, 'cloud');}function update(){}};

 

I build the game responsive, I will ask very questions in this forum because a I´m benniger with phaser framework

 

Sorry, my english is not very good,

 

Thanks.

[Pedro Alpera]

Hi, there is a template for mobile here: https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates

 

This topic could be useful too: http://www.html5gamedevs.com/topic/5519-any-tutorial-on-scaling-on-different-resolution-orientationetc/?hl=responsive#entry33399

[FrankyCutty]

Hi, there is a template for mobile here: https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates

 

This topic could be useful too: http://www.html5gamedevs.com/topic/5519-any-tutorial-on-scaling-on-different-resolution-orientationetc/?hl=responsive#entry33399

I can´t download the proyect responsive in github, and the sprites of proyect.

[Pedro Alpera]

I have attached the template to this post

Full Screen Mobile.zip

[FrankyCutty]

Oh, thanks guy, but I don´t understand the code...I only work with responsive with @media styles in css.

 

Is it all the game?

[Pedro Alpera]

Yes, that's all, try to use some background image to see how the size change.