问题描述
在使用 p5.js 开发了一些游戏后，我刚刚开始在 Phaser 3 中编码，并且想要制作一个 2d 无尽的跑步游戏。所以这是我的游戏代码：
var game;
var gameOptions = {
monkeyGravity: 1200,monkeyPower: 1000
}
window.onload = function() {
let gameConfig = {
type: Phaser.AUTO,backgroundColor:0x87ceeb,scale: {
mode: Phaser.Scale.FIT,autoCenter: Phaser.Scale.CENTER_BOTH,parent: 'thegame',width: 1920,height: 1080
},physics: {
default: 'arcade',arcade: {debug: true}
},scene: [
startGame,playGame
]
}
game = new Phaser.Game(gameConfig);
window.focus();
}
class startGame extends Phaser.Scene{
constructor(){
super('StartGame');
}
preload(){
this.load.image('menu-bg','/jeffrey2nd/menu-bg.png');
this.load.image('play-button','/jeffrey2nd/play-button.png');
}
create() {
this.menuBg = this.add.sprite(game.config.width / 2,'menu-bg').setScale(2);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2;
const startButton = this.add.sprite(screenCenterX,screenCenterY,'play-button');
startButton.setInteractive();
startButton.on('pointerdown',() => this.scene.start('PlayGame'));
}
}
class playGame extends Phaser.Scene{
constructor(){
super('PlayGame');
}
preload(){
this.load.image('background','/jeffrey2nd/background.png');
this.load.image('backgroundL1','/jeffrey2nd/backgroundL1.png');
this.load.image('backgroundL2','/jeffrey2nd/backgroundL2.png');
this.load.image('backgroundL3','/jeffrey2nd/backgroundL3.png');
this.load.image('backgroundL4','/jeffrey2nd/backgroundL4.png');
this.load.image('ground','/jeffrey2nd/ground.png');
//ANIMATIONS
this.load.image('run0','/jeffrey2nd/animations/monkey/Running_000.png');
this.load.image('run1','/jeffrey2nd/animations/monkey/Running_001.png');
this.load.image('run2','/jeffrey2nd/animations/monkey/Running_002.png');
this.load.image('run3','/jeffrey2nd/animations/monkey/Running_003.png');
this.load.image('run4','/jeffrey2nd/animations/monkey/Running_004.png');
this.load.image('run5','/jeffrey2nd/animations/monkey/Running_005.png');
this.load.image('run6','/jeffrey2nd/animations/monkey/Running_006.png');
this.load.image('run7','/jeffrey2nd/animations/monkey/Running_007.png');
this.load.image('run8','/jeffrey2nd/animations/monkey/Running_008.png');
this.load.image('run9','/jeffrey2nd/animations/monkey/Running_009.png');
this.load.image('run10','/jeffrey2nd/animations/monkey/Running_010.png');
this.load.image('run11','/jeffrey2nd/animations/monkey/Running_011.png');
this.load.image('run12','/jeffrey2nd/animations/monkey/Running_012.png');
this.load.image('run13','/jeffrey2nd/animations/monkey/Running_013.png');
this.load.image('jump0','/jeffrey2nd/animations/monkey/Jumping_000.png');
this.load.image('jump1','/jeffrey2nd/animations/monkey/Jumping_001.png');
this.load.image('jump2','/jeffrey2nd/animations/monkey/Jumping_002.png');
this.load.image('jump3','/jeffrey2nd/animations/monkey/Jumping_003.png');
this.load.image('jump4','/jeffrey2nd/animations/monkey/Jumping_004.png');
}
create(){
//BACKGROUND AND LAYERS
this.bgLs = this.add.group();
this.background = this.bgLs.create(0,game.config.height / 2,'background');
this.backgroundL1 = this.bgLs.create(0,'backgroundL1');
this.backgroundL12 = this.bgLs.create(game.config.width,'backgroundL1');
this.backgroundL2 = this.bgLs.create(0,'backgroundL2');
this.backgroundL22 = this.bgLs.create(game.config.width,'backgroundL2');
this.backgroundL3 = this.bgLs.create(0,'backgroundL3');
this.backgroundL32 = this.bgLs.create(game.config.width,'backgroundL3');
this.backgroundL4 = this.bgLs.create(0,'backgroundL4');
this.backgroundL42 = this.bgLs.create(game.config.width,'backgroundL4');
for (let b of this.bgLs.children.entries) {
b.setorigin(0,0.5);
}
//GROUND PLATFORMS
this.groundGroup = this.physics.add.group();
this.ground1 = this.groundGroup.create(0,game.config.height - 50,'ground');
this.ground2 = this.groundGroup.create(game.config.width,'ground');
this.ground3 = this.groundGroup.create(game.config.width + game.config.width / 2,game.config.height - 275,'ground');
this.ground4 = this.groundGroup.create(game.config.width + game.config.width / 1.5,game.config.height - 500,'ground');
this.ground4.setScale(0.5,1);
for (let g of this.groundGroup.children.entries) {
g.setorigin(0,0.5);
g.setImmovable(true);
g.setScale(1,0.3);
g.body.checkCollision.down = false;
}
//MONKEY
this.monkey = this.physics.add.sprite(game.config.width / 10 * 2,500,'run0');
this.monkey.setScale(0.3);
this.anims.create({
key: "player-run",frames: [
{ key: 'run0' },{ key: 'run1' },{ key: 'run2' },{ key: 'run3' },{ key: 'run4' },{ key: 'run5' },{ key: 'run6' },{ key: 'run7' },{ key: 'run8' },{ key: 'run9' },{ key: 'run10' },{ key: 'run11' },{ key: 'run12' },{ key: 'run13' }
],frameRate: 20,repeat: -1
})
this.anims.create({
key: "player-jump",frames: [
{ key: 'jump0' },{ key: 'jump1' },{ key: 'jump2' },{ key: 'jump3' },{ key: 'jump4' }
],repeat: -1
})
this.monkey.body.setSize(this.monkey.width/2,this.monkey.height/2);
this.input.on('pointerdown',this.jump,this);
this.input.on('pointerup',this.fall,this);
}
update(){
this.backgroundL1.x -= 0.2;
this.backgroundL12.x -= 0.2;
this.backgroundL2.x -= 0.4;
this.backgroundL22.x -= 0.4;
this.backgroundL3.x -= 0.6;
this.backgroundL32.x -= 0.6;
this.backgroundL4.x -= 0.8;
this.backgroundL42.x -= 0.8;
for (let b of this.bgLs.children.entries) {
if (b.x <= -game.config.width) b.setX(game.config.width);
}
var speed = 5;
for (let g of this.groundGroup.children.entries) {
g.setX(g.x-speed);
//if (g.x <= -game.config.width) g.setX(game.config.width);
}
if (this.ground1.x <= -game.config.width) this.ground1.setX(game.config.width);
if (this.ground2.x <= -game.config.width) this.ground2.setX(game.config.width);
if (this.ground3.x <= -game.config.width) {
this.rnd1 = (Phaser.Math.Between(0,500))/100;
this.ground3.setX(game.config.width + game.config.width / this.rnd1);
}
if (this.ground4.x <= -game.config.width) {
this.rnd2 = (Phaser.Math.Between(0,500))/100;
this.ground4.setX(game.config.width + game.config.width / this.rnd2);
}
this.physics.world.collide(this.groundGroup,this.monkey,()=> {console.log('touche' + game.loop.time )},null,this);
this.monkey.body.gravity.y = gameOptions.monkeyGravity;
if(this.monkey.body.touching.down) this.monkey.anims.play("player-run",true);
else this.monkey.anims.play("player-jump",true);
}
jump(){
if(this.monkey.body.touching.down) {
this.monkey.body.setVeLocity(0,-gameOptions.monkeyPower);
this.monkey.anims.stop();
this.monkey.anims.play("player-jump");
}
}
fall(){
if (this.monkey.body.veLocity.y < 0) this.monkey.body.setVeLocity(0,-100);
}
}
游戏开始场景有开始按钮，游戏开始，猴子在平台上奔跑，你可以跳上平台。
似乎一切正常，但有时猴子会随机从屏幕上掉下来。 您可以在 https://420videogames.com/jeffrey2nd
上查看该错误的可玩版本这里我在'monkey vs ground goup collide'回调函数中添加了一个控制台日志，记录game.loop.time来尝试理解。我的想法是，可能在更新过程中丢失了一些帧，对象没有完美碰撞，但是当猴子掉下来时，回调函数运行了 2 次，然后猴子不断地掉下来，游戏就崩溃了。
关于这个问题的另一个奇怪的事情是，在我的手机REDMI8上，游戏没有问题，至于我GF的iPhone8。顺便说一下，在另一位朋友的 Firefox 手机上，游戏也有同样的 PC 问题。
提前感谢您的关注，希望有人能帮我解决这个问题， 抗体
解决方法
解决了将碰撞器从更新函数移动到创建函数的问题。