如何使用 Phaser 在移动设备浏览器上制作 html5 游戏运行？

Question

我刚找到一个名为phaser的html5游戏框架，它说这个框架只有支持Html5才支持PC浏览器和移动设备浏览器。所以我写了一个示例作为教程，它在我的电脑上使用 Chrome 运行良好，但是当我在我的 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 应用程序，然后同步您的 phone。然后，您可以在 phone 上测试您的游戏，就像它在包装器中一样（没有 URL，也没有任何迹象表明它是 Web 应用程序）。

如何使用 Phaser 在移动设备浏览器上制作 html5 游戏运行？

how to make html5 game run on mobile device browser with phaser?

html

javascript

mobile-safari

phaser-framework

如何使用 Phaser 在移动设备浏览器上制作 html5 游戏 运行？

how to make html5 game run on mobile device browser with phaser?

html

javascript

mobile-safari

phaser-framework

如何使用 Phaser 在移动设备浏览器上制作 html5 游戏运行？