I have just found a html5 game framework named phaser and it says that this framework support both PC browser and mobile device browser only if they support Html5. So I wrote a sample as the tutorial and It worked fine in my PC with Chrome, But When I launch it with chrome browser on my iphone. It just give a blank page with nothing.
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var score = 0;
var scoreText;
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude','assets/dude.png', 32,48);
game.add.sprite(0,0,'star');
}
var platforms;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky');
platforms = game.add.group();
platforms.enableBody = true;
var ground= platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge = platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge = platforms.create(-150,250,'ground');
ledge.body.immovable = true;
player = game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
player.animations.add('left',[0,1,2,3],10,true);
player.animations.add('right',[5,6,7,8],10,true);
cursors = game.input.keyboard.createCursorKeys();
stars = game.add.group();
stars.enableBody = true;
for(var i=0;i<12;i++){
var star = stars.create(i*70,0,'star');
star.body.gravity.y = 100;
star.body.bounce.y=0.7 + Math.random()*0.2;
}
scoreText = game.add.text(16,16, 'score:0',{fontSize:'32px',fill:'#000'});
}
function collectStar(player, star){
star.kill();
score = score + 10;
scoreText.text = 'Score: ' + score;
}
function update() {
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(stars,platforms);
game.physics.arcade.overlap(player,stars,collectStar, null,this);
player.body.velocity.x=0;
if(cursors.left.isDown){
player.body.velocity.x=-150;
player.animations.play('left');
}
else if(cursors.right.isDown){
player.body.velocity.x=150;
player.animations.play('right');
}else {
player.animations.stop();
player.frame=4;
}
if(cursors.up.isDown && player.body.touching.down){
player.body.velocity.y = -350;
}
}
</script>
</body>
</html>
And you can try the code here: /
I have just found a html5 game framework named phaser and it says that this framework support both PC browser and mobile device browser only if they support Html5. So I wrote a sample as the tutorial and It worked fine in my PC with Chrome, But When I launch it with chrome browser on my iphone. It just give a blank page with nothing.
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var score = 0;
var scoreText;
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude','assets/dude.png', 32,48);
game.add.sprite(0,0,'star');
}
var platforms;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky');
platforms = game.add.group();
platforms.enableBody = true;
var ground= platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge = platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge = platforms.create(-150,250,'ground');
ledge.body.immovable = true;
player = game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
player.animations.add('left',[0,1,2,3],10,true);
player.animations.add('right',[5,6,7,8],10,true);
cursors = game.input.keyboard.createCursorKeys();
stars = game.add.group();
stars.enableBody = true;
for(var i=0;i<12;i++){
var star = stars.create(i*70,0,'star');
star.body.gravity.y = 100;
star.body.bounce.y=0.7 + Math.random()*0.2;
}
scoreText = game.add.text(16,16, 'score:0',{fontSize:'32px',fill:'#000'});
}
function collectStar(player, star){
star.kill();
score = score + 10;
scoreText.text = 'Score: ' + score;
}
function update() {
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(stars,platforms);
game.physics.arcade.overlap(player,stars,collectStar, null,this);
player.body.velocity.x=0;
if(cursors.left.isDown){
player.body.velocity.x=-150;
player.animations.play('left');
}
else if(cursors.right.isDown){
player.body.velocity.x=150;
player.animations.play('right');
}else {
player.animations.stop();
player.frame=4;
}
if(cursors.up.isDown && player.body.touching.down){
player.body.velocity.y = -350;
}
}
</script>
</body>
</html>
And you can try the code here: http://game.ximing/
Share Improve this question edited Apr 10, 2015 at 14:29 armnotstrong asked Apr 10, 2015 at 14:22 armnotstrongarmnotstrong 9,10518 gold badges70 silver badges136 bronze badges2 Answers
Reset to default 5In my experience, the supported renderers are for some reason not always properly recognized when using auto detection. Try using
Phaser.CANVAS
in the game constructor.
I use the CocoonJS launcher app on my iPhone to test out my games. I'm not familiar with Android, but for iOS users, just connect your iPhone to your puter, open up the applications folder, and then drag and drop a copy of your game into the CocoonJS app, then sync your phone. You can then test your game on you phone as if it were in a wrapper (no URL, or any signs of it being a web application).