gpt4 book ai didi

javascript - 如何使用phaser让html5游戏在移动设备浏览器上运行?

转载 作者:行者123 更新时间:2023-11-28 13:25:31 24 4
gpt4 key购买 nike

我刚刚找到了一个名为 phaser 的 html5 游戏框架并且它说这个框架仅支持PC浏览器和移动设备浏览器,前提是它们支持Html5。所以我写了一个示例作为教程,它在我的带有 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/

最佳答案

根据我的经验,由于某种原因,在使用自动检测时并不总是能正确识别受支持的渲染器。尝试使用

Phaser.CANVAS

在游戏构造函数中。

关于javascript - 如何使用phaser让html5游戏在移动设备浏览器上运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29563911/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com