我在射箭游戏中更新了得分变量。但是，我无法正确更新分数。每次更新时，新文本都会粘贴在旧文本上。
我已经在getMedal函数内部，getMedal函数外部，render（）函数内部进行了尝试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video Game</title>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//Configurations for the physics engine
var physicsConfig = {
default: 'arcade',
arcade: {
debug: false //CHANGE THIS TO TRUE TO SEE LINES
}
}
//Configurations for the game itself
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: physicsConfig,
scene: {
preload: preload,
create: create,
update: update,
render: render
}
};
//Start the game
var game = new Phaser.Game(config);
function preload ()
{
//Images
this.load.image('sky', 'assets/images/sky.png');
this.load.image('target', 'assets/images/target.png');
this.load.image('ground', 'assets/images/ground.png');
this.load.image('arrow', 'assets/images/arrow.png');
this.load.image('gold_medal', 'assets/images/goldmedal.png');
this.load.image('silver_medal', 'assets/images/silvermedal.png');
this.load.image('bronze_medal', 'assets/images/bronzemedal.png');
//Spritesheets
this.load.spritesheet('archer', 'assets/spritesheets/archer_sprites.png', {frameWidth: 128, frameHeight: 128});
this.load.spritesheet('rings', 'assets/spritesheets/rings_sprite.png', {frameWidth: 320, frameHeight: 320});
//Audio
this.load.audio('arrow_shot', 'assets/sounds/arrow_shooting.mp3');
}
function create ()
{
//Load all the images that won't move
this.add.image(400, 300, 'sky');
this.add.image(210, 200, 'ground');
//Create the archer/player
this.player = this.physics.add.sprite(100, 410, 'archer');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
//Shooting animation
this.anims.create({
key: 'shoot',
frames: this.anims.generateFrameNumbers('archer', {start : 0, end: 4}),
frameRate: 20,
repeat: 0
});
//Rings animation
this.anims.create({
key: 'rings_anim',
frames: this.anims.generateFrameNumbers('rings', {start : 0, end : 69}),
frameRate: 10,
repeat: 0
})
//Play the animation on start
this.rings = this.physics.add.sprite(300, 40, 'rings');
this.rings.anims.play('rings_anim', true);
//Create the target
this.target = this.physics.add.sprite(530, 365, 'target');
this.target.setSize(115, 95).setOffset(70, 130); //TARGET HITBOX
this.target.enableBody = true;
this.target.setImmovable();
//Create an array for arrows for later
this.arrows = [];
//Create an array for medals for later
this.medals = [];
//Get keypresses
this.cursors = this.input.keyboard.createCursorKeys();
//Assign input for spacebar
this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
//Play sound when the arrow is shot
this.arrowSound = this.sound.add('arrow_shot');
//Make the arrows collide with the target
this.physics.add.collider(this.arrows, this.target)
}
function update ()
{
//Declare constants for movement
const playerMoveAmt = 200;
const arrowMoveAmt = 1500;
this.player.setDrag(2000);
//Declare variables for the score
var score = 0;
var scoreBoard;
//Add the scoreboard in
//Scoreboard
scoreBoard = this.add.text(440, 40, "SCORE:0",
{fontSize: '32px', fill: '#fff'});
//Rotation of the player
if (this.cursors.up.isDown && this.player.angle > -45) {
this.player.angle -= 1;}
if (this.cursors.down.isDown && this.player.angle < 0) {
this.player.angle += 1;}
//Shooting with the spacebar
if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
//Animate the shooting
this.player.anims.play('shoot', true);
//Arrow shooting
let arrow = this.physics.add.sprite(this.player.x, (this.player.y + 20), 'arrow');
arrow.enableBody = true;
arrow.body.immovable = false;
//Edit arrow hitbox
arrow.setSize(50, 15).setOffset(5, 50);
arrow.setGravityY(3600); //Gravity will affect the arrows
//Arrow speeds
arrow.setVelocityX(arrowMoveAmt);
arrow.setVelocityY((this.player.angle * 50));
this.arrows.push(arrow); //Add arrow to the arrow created earlier
this.arrowSound.play(); //Play the sound
}
else if( this.target.body.touching.left) {
let i = 0;
//Set initial position of new medals
let arrowOnTargetPositionX = 200;
//Loop to create multiple arrows
while (i < this.arrows.length) {
newArrows = this.arrows[i];
newArrows.setGravityY(0);
newArrows.setVelocityX(0);
newArrows.setVelocityY(0);
//Add 30 to the new medal's x position
arrowOnTargetPositionX = arrowOnTargetPositionX + 40;
//Call the function to determine medal and pass the variable
if(this.arrows.length <= 5) {
getMedal(arrowOnTargetPositionX);
}
i++;
}
}
getMedal = (value) => {
//Gold medal
if (410 < newArrows.y && newArrows.y < 435) {
this.add.image(value, 170, 'gold_medal');
score += 5;
this.player.angle = 0;
}
//Silver medal
else if (395 < newArrows.y && newArrows.y < 450) {
this.add.image(value, 170, 'silver_medal');
score += 3;
this.player.angle = 0;
}
//Bronze medal
else if (380 < newArrows.y && newArrows.y < 460) {
this.add.image(value, 173, 'bronze_medal');
score += 1;
this.player.angle = 0;
}
}
}
function render() {
}
</script>
</body>
</html>
我希望它只显示一组文字，而不是一遍又一遍地粘贴在“ SCORE：0”上。
我已经找到解决方法：
update()方法之外设置score变量，应在preload()函数之前设置它们。scoreBoard = this.add.text(440, 40, "SCORE: 0", {fontSize: '32px', fill: '#fff'});方法中添加create()。scoreBoard.setText('Score: ' + score)函数内的最后一个else if语句之后设置getMedal()。最终代码如下：
<script type="text/javascript"> //Configurations for the physics engine var physicsConfig = { default: 'arcade', arcade: { debug: false //CHANGE THIS TO TRUE TO SEE LINES } } //Configurations for the game itself var config = { type: Phaser.AUTO, width: 800, height: 600, physics: physicsConfig, scene: { preload: preload, create: create, update: update, render: render } }; //Declare score variables let score = 0; let scoreBoard; //Start the game var game = new Phaser.Game(config); function preload () { //Images this.load.image('sky', 'assets/images/sky.png'); this.load.image('target', 'assets/images/target.png'); this.load.image('ground', 'assets/images/ground.png'); this.load.image('arrow', 'assets/images/arrow.png'); this.load.image('gold_medal', 'assets/images/goldmedal.png'); this.load.image('silver_medal', 'assets/images/silvermedal.png'); this.load.image('bronze_medal', 'assets/images/bronzemedal.png'); //Spritesheets this.load.spritesheet('archer', 'assets/spritesheets/archer_sprites.png', {frameWidth: 128, frameHeight: 128}); this.load.spritesheet('rings', 'assets/spritesheets/rings_sprite.png', {frameWidth: 320, frameHeight: 320}); //Audio this.load.audio('arrow_shot', 'assets/sounds/arrow_shooting.mp3'); } function create () { //Load all the images that won't move this.add.image(400, 300, 'sky'); this.add.image(210, 200, 'ground'); //Create the archer/player this.player = this.physics.add.sprite(100, 410, 'archer'); this.player.setBounce(0.2); this.player.setCollideWorldBounds(true); //Shooting animation this.anims.create({ key: 'shoot', frames: this.anims.generateFrameNumbers('archer', {start : 0, end: 4}), frameRate: 20, repeat: 0 }); //Rings animation this.anims.create({ key: 'rings_anim', frames: this.anims.generateFrameNumbers('rings', {start : 0, end : 69}), frameRate: 10, repeat: 0 }) //Play the animation on start this.rings = this.physics.add.sprite(300, 40, 'rings'); this.rings.anims.play('rings_anim', true); //Create the target this.target = this.physics.add.sprite(530, 365, 'target'); this.target.setSize(115, 95).setOffset(70, 130); //TARGET HITBOX this.target.enableBody = true; this.target.setImmovable(); //Create an array for arrows for later this.arrows = []; //Create an array for medals for later this.medals = []; //Get keypresses this.cursors = this.input.keyboard.createCursorKeys(); //Assign input for spacebar this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); //Play sound when the arrow is shot this.arrowSound = this.sound.add('arrow_shot'); //Make the arrows collide with the target this.physics.add.collider(this.arrows, this.target) //Add the scoreboard in scoreBoard = this.add.text(440, 40, "SCORE: 0", {fontSize: '32px', fill: '#fff'}); } function update () { //Declare constants for movement const playerMoveAmt = 200; const arrowMoveAmt = 1500; this.player.setDrag(2000); //Rotation of the player if (this.cursors.up.isDown && this.player.angle > -45) { this.player.angle -= 1;} if (this.cursors.down.isDown && this.player.angle < 0) { this.player.angle += 1;} //Shooting with the spacebar if (Phaser.Input.Keyboard.JustDown(this.spacebar)) { //Animate the shooting this.player.anims.play('shoot', true); //Arrow shooting let arrow = this.physics.add.sprite(this.player.x, (this.player.y + 20), 'arrow'); arrow.enableBody = true; arrow.body.immovable = false; //Edit arrow hitbox arrow.setSize(50, 15).setOffset(5, 50); arrow.setGravityY(3600); //Gravity will affect the arrows //Arrow speeds arrow.setVelocityX(arrowMoveAmt); arrow.setVelocityY((this.player.angle * 50)); this.arrows.push(arrow); //Add arrow to the arrow created earlier this.arrowSound.play(); //Play the sound } else if( this.target.body.touching.left) { let i = 0; //Set initial position of new medals let arrowOnTargetPositionX = 200; //Loop to create multiple arrows while (i < this.arrows.length) { newArrows = this.arrows[i]; newArrows.setGravityY(0); newArrows.setVelocityX(0); newArrows.setVelocityY(0); //Add 30 to the new medal's x position arrowOnTargetPositionX = arrowOnTargetPositionX + 40; //Call the function to determine medal and pass the variable if(this.arrows.length <= 5) { getMedal(arrowOnTargetPositionX); } i++; } } getMedal = (value) => { //Gold medal if (410 < newArrows.y && newArrows.y < 435) { this.add.image(value, 170, 'gold_medal'); score += 5; this.player.angle = 0; } //Silver medal else if (395 < newArrows.y && newArrows.y < 450) { this.add.image(value, 170, 'silver_medal'); score += 3; this.player.angle = 0; } //Bronze medal else if (380 < newArrows.y && newArrows.y < 460) { this.add.image(value, 173, 'bronze_medal'); score += 1; this.player.angle = 0; } scoreBoard.setText('Score: ' + score) } } function render() { } </script>编辑：
OP要求我解决分数
的一个额外问题，该问题未显示正确分数。我通过在getMedal()循环外部删除if函数及其while语句包装器来修复它，如下所示：//Loop to create multiple arrows
while (i < this.arrows.length) {
newArrows = this.arrows[i];
newArrows.setGravityY(0);
newArrows.setVelocityX(0);
newArrows.setVelocityY(0);
//Add 30 to the new medal's x position
arrowOnTargetPositionX = arrowOnTargetPositionX + 40;
i++;
}
//Call the function to determine medal and pass the variable
if(this.arrows.length <= 5) {
getMedal(arrowOnTargetPositionX);
}