如何使HTML5游戏在使用Phaser的移动设备浏览器上运行？

Question

我刚刚找到了一个名为phaser的html5游戏框架，它说该框架仅在PC浏览器和移动设备浏览器支持Html5时才支持。 因此，我编写了一个示例作为教程，并且在带Chrome的PC上可以很好地工作，但是当我在iPhone上使用chrome浏览器启动它时。 它只是给一个空白页面而已。

这是代码：

<!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>

您可以在此处尝试代码： http : //game.ximing.org/

Answer 1

以我的经验，使用自动检测时，由于某些原因不能总是正确识别受支持的渲染器。 尝试使用

Phaser.CANVAS

在游戏构造函数中。

Answer 2

我在iPhone上使用CocoonJS启动器应用程序来测试我的游戏。 我不熟悉Android，但对于iOS用户，只需将iPhone连接到计算机，打开应用程序文件夹，然后将游戏副本拖放到CocoonJS应用程序中，然后同步手机即可。 然后，您可以在手机上测试游戏，就像在包装中一样（没有URL，或任何迹象表明它是Web应用程序）。

如何使HTML5游戏在使用Phaser的移动设备浏览器上运行？

问题描述

2 个解决方案

解决方案1
4 已采纳 2015-04-10 14:42:54

解决方案2
1 2015-09-26 06:35:12

如何使HTML5游戏在使用Phaser的移动设备浏览器上运行？

问题描述

2 个解决方案

解决方案1 4 已采纳 2015-04-10 14:42:54

解决方案2 1 2015-09-26 06:35:12

解决方案1
4 已采纳 2015-04-10 14:42:54

解决方案2
1 2015-09-26 06:35:12