本文介绍了Phaser预加载不在HTML5游戏中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在游戏开始之前有一个很好的预加载器百分比，但是根据示例文档和api文档，我没有出现这种情况。它是基于phaser框架JS库的简单HTML5游戏。这是我的代码。可能有什么问题？我没有在phaser库中挖掘我没有时间一直修复破坏的库。我只是在等待开箱即用的东西：
I would like to have nice preloader with percentage before game on, but nothing such appearing in spite of I am procceeding according to the Examples docs and api docs. It is simple HTML5 game based on phaser framework JS library. This is my code. What might be wrong? I am not digging in phaser library I have no time to repair broken libs all the time. I am just awaiting the things working out of the box somehow:
<html> <head> <meta charset="UTF-8"> <title>0002game</title> <script src="phaser.min.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var platforms; var player; var cursors; var tehla1; var tehla2; var tehla3; var tehla4; var tehla5; var poc=0; var text=null; var style=null; var delta = 25; var postext = 150; var rychlost=1; var text2; var trafil1=false;var trafil2=false;var trafil3=false;var trafil4=false;var trafil5=false; function preload() { game.load.image('sky', 'assets/sky2.png'); game.load.image('wheelbarrow', 'assets/jet.png'); game.load.image('brick', 'assets/meteor.png'); game.load.image('ground', 'assets/ground.png'); game.load.audio('boden', ['assets/sound.wav']); } function loadStart() { text2.setText("Loading..."); } function loadComplete() { text2.setText("Loading Completed."); } function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) { text2.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles); } function create() { text2 = game.add.text(32, 32, 'Loading...', { fill: '#ffffff' }); music = game.add.audio('boden'); //music.play(); sounds = [music]; game.sound.setDecodedCallback(sounds, start, this); game.world.setBounds(0, 0, 800, 600); cursors = game.input.keyboard.createCursorKeys(); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); //var tehla = game.add.sprite(3, 3, 'brick'); tehla1 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla2 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla3 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla4 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla5 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); //game.add.sprite(0, 0, 'wheelbarrow'); // The platforms group contains the ground and the 2 ledges we can jump on platforms = game.add.group(); // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges //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 - 120, 'wheelbarrow'); //player.body.bounce.y = 0.2; //player.body.gravity.y = 300; //player.body.collideWorldBounds = true; style = { font: "25px Arial", fill: "#00ffff", align: "center" }; text = game.add.text(125, 25, "Lod zasiahli: ", style); text.anchor.set(0.5); game.load.onLoadStart.add(loadStart, this); game.load.onFileComplete.add(fileComplete, this); game.load.onLoadComplete.add(loadComplete, this); } function start() { music.loopFull(1.0); } function cikoniec(){ if(poc==5){ alert('Uz ta zasiahlo 5 nepriatelov. Spustam hru znova!'); location.reload(); } } function update() { //if(tehla1.y<game.height) game.add.tween(tehla1).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla1.y<game.height) tehla1.y+=rychlost; if(tehla1.y>=game.height) {tehla1.y=game.rnd.integerInRange(20, 200);tehla1.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla1.y-player.y)<delta && Math.abs(tehla1.x-player.x)<delta && trafil1==false ){ poc=poc+1; postext+=50; tehla1.destroy(); text = game.add.text(postext, 35, "1", style); trafil1 = true; } //if(tehla2.y<game.height) game.add.tween(tehla2).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla2.y<game.height) tehla2.y+=rychlost; if(tehla2.y>=game.height) {tehla2.y=game.rnd.integerInRange(20, 200);tehla2.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla2.y-player.y)<delta && Math.abs(tehla2.x-player.x)<delta && trafil2==false ){ poc=poc+1; postext+=50; tehla2.destroy(); text = game.add.text(postext, 35, "2", style); trafil2 = true; } //if(tehla3.y<game.height) game.add.tween(tehla3).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla3.y<game.height) tehla3.y+=rychlost; if(tehla3.y>=game.height) {tehla3.y=game.rnd.integerInRange(20, 200);tehla3.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla3.y-player.y)<delta && Math.abs(tehla3.x-player.x)<delta && trafil3==false ){ poc=poc+1; postext+=50; tehla3.destroy(); text = game.add.text(postext, 35, "3", style); trafil3 = true; } //if(tehla4.y<game.height) game.add.tween(tehla4).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla4.y<game.height) tehla4.y+=rychlost; if(tehla4.y>=game.height) {tehla4.y=game.rnd.integerInRange(20, 200);tehla4.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla4.y-player.y)<delta && Math.abs(tehla4.x-player.x)<delta && trafil4==false ){ poc=poc+1; postext+=50; tehla4.destroy(); text = game.add.text(postext, 35, "4", style); trafil4 = true; } //if(tehla5.y<game.height) game.add.tween(tehla5).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla5.y<game.height) tehla5.y+=rychlost; if(tehla5.y>=game.height) {tehla5.y=game.rnd.integerInRange(20, 200);tehla5.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla5.y-player.y)<delta && Math.abs(tehla5.x-player.x)<delta && trafil5==false ){ poc=poc+1; postext+=50; tehla4.destroy(); text = game.add.text(postext, 35, "5", style); trafil5 = true; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { if(player.x>0) player.x -= 15; cikoniec(); } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { if(player.x<660) player.x += 15; cikoniec(); } game.physics.arcade.collide(player, platforms); } function render() { game.debug.text('Hold left/right to move the player.'); } </script> </head> <body> <noscript>Sorry, your browser does not support JavaScript!</noscript> </body> </html>推荐答案
解决了，我是这样做的：
Solved, I did it this way:
<html> <head> <meta charset="UTF-8"> <title>0001game</title> <style> /* This only works with JavaScript, if it's not present, don't show loader */ .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } </style> <script src="jquery-1.5.2.min.js"></script> <script src="modernizr.min.js"></script> <script src="phaser.min.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var platforms; var player; var cursors; var tehla1; var tehla2; var tehla3; var tehla4; var tehla5; var poc=0; var text=null; var style=null; var delta = 25; var postext = 150; var rychlost=1; var text2; var trafil1=false;var trafil2=false;var trafil3=false;var trafil4=false;var trafil5=false; function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('wheelbarrow', 'assets/wheelbarrow.png'); game.load.image('brick', 'assets/brick.png'); game.load.image('ground', 'assets/ground.png'); game.load.audio('boden', ['assets/sound.wav']); } function create() { text2 = game.add.text(32, 32, 'Loading...', { fill: '#ffffff' }); music = game.add.audio('boden'); //music.play(); sounds = [music]; game.sound.setDecodedCallback(sounds, start, this); game.world.setBounds(0, 0, 800, 600); cursors = game.input.keyboard.createCursorKeys(); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); //var tehla = game.add.sprite(3, 3, 'brick'); tehla1 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla2 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla3 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla4 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); tehla5 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick'); //game.add.sprite(0, 0, 'wheelbarrow'); // The platforms group contains the ground and the 2 ledges we can jump on platforms = game.add.group(); // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges //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 - 120, 'wheelbarrow'); //player.body.bounce.y = 0.2; //player.body.gravity.y = 300; //player.body.collideWorldBounds = true; style = { font: "25px Arial", fill: "#ff0044", align: "center" }; text = game.add.text(125, 25, "Trafil roznych tehiel: ", style); text.anchor.set(0.5); game.load.onLoadStart.add(loadStart, this); game.load.onFileComplete.add(fileComplete, this); game.load.onLoadComplete.add(loadComplete, this); } function start() { music.loopFull(1.0); } function cikoniec(){ if(poc==5){ alert('Uz si trafil/a vsetky tehly. Spustam hru znova!'); location.reload(); } } function update() { //if(tehla1.y<game.height) game.add.tween(tehla1).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla1.y<game.height) tehla1.y+=rychlost; if(tehla1.y>=game.height) {tehla1.y=game.rnd.integerInRange(20, 200);tehla1.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla1.y-player.y)<delta && Math.abs(tehla1.x-player.x)<delta && trafil1==false ){ poc=poc+1; postext+=50; tehla1.destroy(); text = game.add.text(postext, 35, "1", style); trafil1 = true; } //if(tehla2.y<game.height) game.add.tween(tehla2).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla2.y<game.height) tehla2.y+=rychlost; if(tehla2.y>=game.height) {tehla2.y=game.rnd.integerInRange(20, 200);tehla2.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla2.y-player.y)<delta && Math.abs(tehla2.x-player.x)<delta && trafil2==false ){ poc=poc+1; postext+=50; tehla2.destroy(); text = game.add.text(postext, 35, "2", style); trafil2 = true; } //if(tehla3.y<game.height) game.add.tween(tehla3).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla3.y<game.height) tehla3.y+=rychlost; if(tehla3.y>=game.height) {tehla3.y=game.rnd.integerInRange(20, 200);tehla3.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla3.y-player.y)<delta && Math.abs(tehla3.x-player.x)<delta && trafil3==false ){ poc=poc+1; postext+=50; tehla3.destroy(); text = game.add.text(postext, 35, "3", style); trafil3 = true; } //if(tehla4.y<game.height) game.add.tween(tehla4).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla4.y<game.height) tehla4.y+=rychlost; if(tehla4.y>=game.height) {tehla4.y=game.rnd.integerInRange(20, 200);tehla4.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla4.y-player.y)<delta && Math.abs(tehla4.x-player.x)<delta && trafil4==false ){ poc=poc+1; postext+=50; tehla4.destroy(); text = game.add.text(postext, 35, "4", style); trafil4 = true; } //if(tehla5.y<game.height) game.add.tween(tehla5).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true); if(tehla5.y<game.height) tehla5.y+=rychlost; if(tehla5.y>=game.height) {tehla5.y=game.rnd.integerInRange(20, 200);tehla5.x=game.rnd.integerInRange(20, 500);} if(Math.abs(tehla5.y-player.y)<delta && Math.abs(tehla5.x-player.x)<delta && trafil5==false ){ poc=poc+1; postext+=50; tehla5.destroy(); text = game.add.text(postext, 35, "5", style); trafil5 = true; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { if(player.x>0) player.x -= 15; cikoniec(); } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { if(player.x<660) player.x += 15; cikoniec(); } game.physics.arcade.collide(player, platforms); } function render() { game.debug.text('Hold left/right to move the player.'); } </script> <script> // Wait for window load $(window).load(function() { // Animate loader off screen $("#loader").animate({ top: -200 }, 1500); }); </script> </head> <body> <img src="assets/loader.gif" id="loader"> <noscript>Sorry, your browser does not support JavaScript!</noscript> </body> </html>更多推荐
Phaser预加载不在HTML5游戏中工作
发布评论