countdowntimer - 如何在 Phaser 游戏中添加倒数计时器
问题描述
我正在尝试向 Phaser 游戏添加一个简单的倒数计时器。当计时器结束时,我希望游戏重新开始。添加相关代码后,控制台中没有错误,但我无法让计时器出现在屏幕上。我是 Phaser 的新手,仍在学习 Javascript。请问我哪里错了?我只发布了下面的相关代码,以及用于游戏中已经存在的运行良好的文本的代码(用于计算收集到的硬币的文本)。
PlayState = {};
PlayState.init = function () {
//....
};
PlayState.preload = function () {
this.game.load.image('font:numbers', 'images/numbers.png'); //for the
//HUD coin count - not the timer
};
PlayState.create = function () {
//TIMER CODE:
this.timeInSeconds = 120;
this.timeText = this.game.add.text(this.game.world.centerX,
this.game.world.centerY, "0:00",{font: '15px Arial', fill: '#FFFFFF', align:
'center'});
this.timeText.anchor.set(0.5, 0.5);
this.timer = this.game.time.events.loop(Phaser.Timer.SECOND,
this.updateTimer, this);
};
PlayState.update = function () {
this.coinFont.text = `x${this.coinPickupCount}`; //for HUD coin count not
//the timer
};
//TIMER CODE:
PlayState.updateTimer = function() {
this.timeInSeconds--;
var minutes = Math.floor(this.timeInSeconds / 60);
var seconds = this.timeInSeconds - (minutes * 60);
var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds);
this.timeText.text = timeString;
if (this.timeInSeconds == 0) {
this.game.state.restart();
}
};
//add leading zeros to any number less than 10
//for example turn 1 to 01
PlayState.addZeros = function(num) {
if (num < 10) {
num = "0" + num;
}
return num;
};
//BELOW IS CODE FOR THE COIN COUNT NOT THE TIMER
PlayState._createHud = function () {
this.keyIcon = this.game.make.image(0, 30, 'icon:key');
this.keyIcon.anchor.set(0, 0.5);
const NUMBERS_STR = '0123456789X ';
this.coinFont = this.game.add.retroFont('font:numbers', 20,
26,NUMBERS_STR, 6);
let coinIcon = this.game.make.image(this.keyIcon.width + 7,
0, 'icon:coin');
let coinScoreImg = this.game.make.image(coinIcon.x +
coinIcon.width, coinIcon.height / 2, this.coinFont);
coinScoreImg.anchor.set(0, 0.5);
this.hud = this.game.add.group();
this.hud.add(coinIcon);
this.hud.position.set(10, 10);
this.hud.add(coinScoreImg);
this.hud.add(this.keyIcon);
this.hud.fixedToCamera = true;
};
window.onload = function () {
let game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game');
game.state.add('play', PlayState);
game.state.start('play');
};
解决方案
我终于解决了这个问题。文本未显示,因为它是在创建背景图像之后渲染的。所以它就在那里,但被背景图像隐藏了。我只是将计时器代码移到了创建的末尾,它现在可以工作了。
PlayState.create = function () {
this.game.world.setBounds(0, 0, 2560, 800);
background1 = this.game.add.sprite(0, 0, 'background');
background2 = this.game.add.sprite(1280, 0, 'background2');
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.setMinMax(480,320,1280,800);
this.game.scale.windowConstraints.bottom = 'visual';
this.game.add.image(0, 0, 'background');
this._loadLevel(this.game.cache.getJSON('level:1'));
this._createHud();
//TIMER CODE SHOULD GO HERE AND NOT AT THE BEGINNING OF CREATE
this.timeInSeconds = 120;
this.timeText = this.game.add.text(220, 30, "0:00",{font: '30px Arial', fill:
'#FFFFFF', align: 'center'});
this.timeText.anchor.set(0.5, 0.5);
this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer,
this);
};
推荐阅读
- html - 如何强制 Azure 应用使用最新的 html 文件?
- c++ - 我用 C++ 编写的 ascii 到二进制转换器显示二进制向后,我怎样才能让它正确显示?
- ios - 当视图从纵向变为横向时,调整带有透明孔的图层的位置
- jquery - 显示带有孩子淡入和淡出的 div
- c - 无法在 C 中打印“*”
- angular - 从组件中检测模板驱动的表单更改
- android - Android GridView(自定义)分片图片,但无法打开页面
- sql - MS Access,使用 VB 代码通过网络链接后端表
- c# - 在 PDF 文件创建期间添加新页面(如果需要)
- vue.js - 如何在 Vue 中创建一个数字输入组件,其限制不允许超出限制