Mole Unearther Step 16

Ireally don’t understand what this question is asking me to do I’ve tried multiple ways and the website won’t let me download solution ( just shows up some chineese letters)

Question:
The updateScore() function should be flexible enough to update by any number of points. To accommodate this, add a points parameter to our function that allows the caller to pass in any number, and add it to the score .

Inside updateScore , add the points parameter to score .

My Code:
let timeLeft = 30
let score = 0
let isPaused = false
// Stores the current “key” location of the mole
let currentBurrowKey;

const gameState = {};

class GameScene extends Phaser.Scene {
constructor() {
super({ key: ‘GameScene’ });

	// list of all burrow locations
	// each location contains a corresponding key on the keyboard,
	// and the x and y pixel coordinates on the screen
	this.burrowLocations = [{
		key: 'j',
		x: 100,
		y: 310,
	},
	{
		key: 'k',
		x: 240,
		y: 390,
	},
	{
		key: 'l',
		x: 380,
		y: 310,
	}];
}

// import all of the visual assets we will use throughout the game
preload() {
	// calls the image function to load in the background, and assigns the image to the field key
	// the background is loaded from the given url
	this.load.image('background', 'https://content.codecademy.com/courses/learn-phaser/mole-unearther/background.png');
	// calls the spritesheet function to load in the mole as a spritesheet to make animations, and assigns it to the mole key
	// the mole is loaded from the given url with the given width and height
	this.load.spritesheet('mole',
		'https://content.codecademy.com/courses/learn-phaser/mole-unearther/mole-sprite.png',
		{ frameWidth: 198, frameHeight: 250 });
}

// set up scene visuals, animations, and game logic when events occur
create() {
	// executed after every second passes
	const updateTimer = () => {
  timeLeft = timeLeft - 1
}

const onSecondElapsed = () => {
		if (isPaused === false) {

			// display the new time to the user
			this.updateTimerText();

updateTimer()
}
};

	// display background
	this.initializeBackground();

	// set up score text
	this.initializeScoreText();

	// go through each burrow and set up key listeners on the corresponding key
	this.initializeBurrowKeys();

	// set up animation callbacks
	this.initializeAnimations();

	// set up mole and place in first location
	this.initializeMole();

	// set up text for timer and callback for countdown
	this.initializeTimer(onSecondElapsed);
}

// periodically checks and handles user input by updating game logic
update() {
	if (timeLeft <= 0) {
		// Provided for user
		this.scene.stop('GameScene');
		this.scene.start('EndScene');
	}
// Updates score.
 const updateScore = number => {
 points = score + points
 }
	// user successfully hit the mole, so reward the user with 5pts
	const applyHitReward = () => {
  updateScore(5)
		// display how many points the user will gain
		this.displayRewardText();

		// display the new score to the user
		this.updateScoreText();
	};

	// user missed the mole, so penalize the user by taking away 5pts
	const applyMissPenalty = () => {
		// display how many points the user will lose
		this.displayPenaltyText();

		// display the new score to the user
		this.updateScoreText();

	};
const onBurrowHit = key => {
  if (currentBurrowKey === key) { 
    applyHitReward() + this.relocateMole()
  } else if ( currentBurrowKey != key) { 
    applyMissPenalty()
    }
}

	if (isPaused === false) {
		// check each burrow's location if the user is hitting the corresponding key
		// and run the handler to determine if user should get a reward or penalty
		if (Phaser.Input.Keyboard.JustDown(gameState.jKey) ) {  onBurrowHit('j');

		} else if (Phaser.Input.Keyboard.JustDown(gameState.kKey) ) {onBurrowHit('k') ;

		} else if (Phaser.Input.Keyboard.JustDown(gameState.lKey)) { onBurrowHit('l');

		}
	}

	if (Phaser.Input.Keyboard.JustDown(gameState.spaceKey)) { 

	}
}

// adds the background image to the scene starting at the coordinates (0, 0)
initializeBackground() {
	const background = this.add.image(0, 0, 'background');
	background.setScale(0.5);
	background.setOrigin(0, 0);

	// create box for the score and timer
	const scoreBox = this.add.rectangle(90, 70, 140, 90, 0xFFFFFF);
	scoreBox.alpha = 0.5;
}

// display user's score on screen
initializeScoreText() {
	gameState.scoreText = this.add.text(50, 50, `Score: ${score}`).setColor('#000000');
}

// go through each burrow and set up listeners on the corresponding key
initializeBurrowKeys() {
	// set up listeners at the burrow's assigned key that will tell us when user input at that key occurs
	gameState.jKey = this.input.keyboard.addKey('j');
	gameState.kKey = this.input.keyboard.addKey('k');
	gameState.lKey = this.input.keyboard.addKey('l');
	gameState.spaceKey = this.input.keyboard.addKey('space');

	// set up text to identify which key belongs to which burrow
	this.burrowLocations.forEach((burrow) => {
		this.add.text(burrow.x - 10, burrow.y + 70, burrow.key.toUpperCase(), {
			fontSize: 32,
			color: '#553a1f',
		});
	});
}

// create mole character from the spritesheet that was loaded
initializeMole() {
	// add mole sprite to scene
	gameState.mole = this.physics.add.sprite(0, 0, 'mole');
	gameState.mole.setScale(0.5, 0.5);

	// set mole's location
	this.updateBurrow();


	// after mole appears, run idle animation
	gameState.mole.on('animationcomplete-appear', () => {
		gameState.mole.anims.play('idle');
	});

	// after mole is hidden, immediately relocate to another burrow
	gameState.mole.on('animationcomplete-disappear', () => {
		this.updateBurrow();
	});
}

// creates all the animations that will run after an action is performed
initializeAnimations() {
	// create the appear animation from mole spritesheet
	this.anims.create({
		key: 'appear',
		frames: this.anims.generateFrameNumbers('mole', { start: 0, end: 2 }),
		frameRate: 10,
	});

	// create the idle animation from mole spritesheet that will repeat indefinitely
	this.anims.create({
		key: 'idle',
		frames: this.anims.generateFrameNumbers('mole', { frames: [1, 3, 1, 1, 4] }),
		frameRate: 3,
		repeat: -1,
	});

	// create the disappear animation from mole spritesheet
	this.anims.create({
		key: 'disappear',
		frames: this.anims.generateFrameNumbers('mole', { frames: [5, 6, 6, 5, 2, 1, 0] }),
		frameRate: 15,
	});
}

// display remaining time left on screen and run update after every second
initializeTimer(timerCallback) {
	gameState.timerText = this.add.text(50, 75, `Time: ${timeLeft}`).setColor('#000000');

	this.time.addEvent({
		delay: 1000, // call after every 1000ms (1sec)
		callback: timerCallback, // run function after 1sec elapsed
		args: [1], // amount of time that elapsed
		callbackScope: this, // scope to this class
		loop: true, // repeat forever
	});
}

// fetches a random burrow from our list of burrows
getRandomBurrow() {
	return Phaser.Utils.Array.GetRandom(this.burrowLocations);
}

// select new burrow and move mole to it
updateBurrow() {
	// select a random burrow from our list of burrows
	const burrowLocation = this.getRandomBurrow();

	// update the current burrow key to the new burrow's key
	currentBurrowKey = burrowLocation.key;

	// set the mole's position to the new burrow's (x, y) coordinates
	gameState.mole.setPosition(burrowLocation.x, burrowLocation.y);

	// play animation to make mole appear
	gameState.mole.anims.play('appear');
}

// play the mole's disappear animation to indicate it was hit
// and after animation is complete, mole will move to a new burrow
relocateMole() {
	gameState.mole.anims.play('disappear');
}

// update the clock text on the screen to reflect the changed amount
updateTimerText() {
	gameState.timerText.setText(`Time: ${timeLeft}`);
}

// update the score text on the screen to reflect the changed amount
updateScoreText() {
	gameState.scoreText.setText(`Score: ${score}`);
}

// display the number of points the user gained
displayRewardText() {
	// add text to display score reward
	const rewardText = this.add.text(160, 50, '+5').setColor('#228B22');
	this.time.addEvent({
		delay: 500, // call after 200ms
		callback:  () => { rewardText.destroy(); }, // remove text after 200ms
		args: [rewardText], // text to remove
		repeat: -1,
	});
}

// display the number of points the user lost
displayPenaltyText() {
	// add text to display score penalty
	const penaltyText = this.add.text(160, 50, '-5').setColor('#991A00');
	this.time.addEvent({
		delay: 300, // call after 200ms
		callback: () => { penaltyText.destroy(); }, // remove text after 200ms
		args: [penaltyText], // text to remove
		repeat: -1,
	});
}

// display background overlay with pause messages to indicate game is paused
displayPauseScreen() {
	gameState.pauseOverlay = this.add.rectangle(0, 0, 480, 640, 0xFFFFFF);
	gameState.pauseOverlay.alpha = 0.75;
	gameState.pauseOverlay.setOrigin(0, 0);

	gameState.pauseText = this.add.text(225, 325, 'PAUSED').setColor('#000000');
	gameState.resumeText = this.add.text(125, 375, 'Press space to resume game').setColor('#000000');
}

// remove overlay and pause messages when game is unpaused
removePauseScreen() {
	gameState.pauseOverlay.destroy();
	gameState.pauseText.destroy();
	gameState.resumeText.destroy();
}

}

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on E.g. loops, learn-compatibility

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

Hey @yumil5408365918
you left text from the default instruction text about how to write a good post in your post. It says:

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

I think that would be very helpful here.

1 Like

Hey Yumil
I may be able to help you, but please post your code formatted as requested by the guidelines.

You can either do this by adding three backticks ``` in newlines before and after your code block, or simply copypaste you code inside the <code> tags when you create a Codebyte.

1 Like

From the code I think @yumil5408365918 is referring to a project of the Phaser course, it’s a game where you click on moles that show up from the ground.
But you’re definitely right, a link to the course is very important. I can’t find it for example xD

1 Like

Like this?

console.log('Hello world!'); const updateScore = number => { points = score + points } // user successfully hit the mole, so reward the user with 5pts const applyHitReward = () => { updateScore(5) // display how many points the user will gain this.displayRewardText(); // display the new score to the user this.updateScoreText(); }; // user missed the mole, so penalize the user by taking away 5pts const applyMissPenalty = () => { // display how many points the user will lose this.displayPenaltyText(); // display the new score to the user this.updateScoreText(); };

This seems to be only a chunk of the code you posted. It would help if you format all of the code you posted.
Also, it would be helpful if you posted a link to the exercise you’re referring to.
A guide how to format code can be found here:

Alright.
Here you got your your updateScore:

 const updateScore = number => {

The step states:

add a points parameter to our function

So, while you used number in order to pass the exercise you must use the word points instead.
This doesn’t imply that using points is better than using any other word. But the exercise will verify that you’re complying with the request.

let timeLeft = 30
let score = 0
let isPaused = false
// Stores the current "key" location of the mole
let currentBurrowKey;

const gameState = {};

class GameScene extends Phaser.Scene {
	constructor() {
		super({ key: 'GameScene' });

		// list of all burrow locations
		// each location contains a corresponding key on the keyboard,
		// and the x and y pixel coordinates on the screen
		this.burrowLocations = [{
			key: 'j',
			x: 100,
			y: 310,
		},
		{
			key: 'k',
			x: 240,
			y: 390,
		},
		{
			key: 'l',
			x: 380,
			y: 310,
		}];
	}

	// import all of the visual assets we will use throughout the game
	preload() {
		// calls the image function to load in the background, and assigns the image to the field key
		// the background is loaded from the given url
		this.load.image('background', 'https://content.codecademy.com/courses/learn-phaser/mole-unearther/background.png');
		// calls the spritesheet function to load in the mole as a spritesheet to make animations, and assigns it to the mole key
		// the mole is loaded from the given url with the given width and height
		this.load.spritesheet('mole',
			'https://content.codecademy.com/courses/learn-phaser/mole-unearther/mole-sprite.png',
			{ frameWidth: 198, frameHeight: 250 });
	}

	// set up scene visuals, animations, and game logic when events occur
	create() {
		// executed after every second passes
		const updateTimer = () => {
      timeLeft = timeLeft - 1
    }
    
    const onSecondElapsed = () => {
			if (isPaused === false) {

				// display the new time to the user
				this.updateTimerText();
 updateTimer()
			}
		};

		// display background
		this.initializeBackground();

		// set up score text
		this.initializeScoreText();

		// go through each burrow and set up key listeners on the corresponding key
		this.initializeBurrowKeys();

		// set up animation callbacks
		this.initializeAnimations();

		// set up mole and place in first location
		this.initializeMole();

		// set up text for timer and callback for countdown
		this.initializeTimer(onSecondElapsed);
	}

	// periodically checks and handles user input by updating game logic
	update() {
		if (timeLeft <= 0) {
			// Provided for user
			this.scene.stop('GameScene');
			this.scene.start('EndScene');
		}
    // Updates score.
     const updateScore = number => {
     points = score + points
     }
		// user successfully hit the mole, so reward the user with 5pts
		const applyHitReward = () => {
      updateScore(5)
			// display how many points the user will gain
			this.displayRewardText();

			// display the new score to the user
			this.updateScoreText();
		};

		// user missed the mole, so penalize the user by taking away 5pts
		const applyMissPenalty = () => {
			// display how many points the user will lose
			this.displayPenaltyText();

			// display the new score to the user
			this.updateScoreText();
  
		};
    const onBurrowHit = key => {
      if (currentBurrowKey === key) { 
        applyHitReward() + this.relocateMole()
      } else if ( currentBurrowKey != key) { 
        applyMissPenalty()
        }
    }

		if (isPaused === false) {
			// check each burrow's location if the user is hitting the corresponding key
			// and run the handler to determine if user should get a reward or penalty
			if (Phaser.Input.Keyboard.JustDown(gameState.jKey) ) {  onBurrowHit('j');

			} else if (Phaser.Input.Keyboard.JustDown(gameState.kKey) ) {onBurrowHit('k') ;

			} else if (Phaser.Input.Keyboard.JustDown(gameState.lKey)) { onBurrowHit('l');

			}
		}

		if (Phaser.Input.Keyboard.JustDown(gameState.spaceKey)) { 

		}
	}

	// adds the background image to the scene starting at the coordinates (0, 0)
	initializeBackground() {
		const background = this.add.image(0, 0, 'background');
		background.setScale(0.5);
		background.setOrigin(0, 0);

		// create box for the score and timer
		const scoreBox = this.add.rectangle(90, 70, 140, 90, 0xFFFFFF);
		scoreBox.alpha = 0.5;
	}

	// display user's score on screen
	initializeScoreText() {
		gameState.scoreText = this.add.text(50, 50, `Score: ${score}`).setColor('#000000');
	}

	// go through each burrow and set up listeners on the corresponding key
	initializeBurrowKeys() {
		// set up listeners at the burrow's assigned key that will tell us when user input at that key occurs
		gameState.jKey = this.input.keyboard.addKey('j');
		gameState.kKey = this.input.keyboard.addKey('k');
		gameState.lKey = this.input.keyboard.addKey('l');
		gameState.spaceKey = this.input.keyboard.addKey('space');

		// set up text to identify which key belongs to which burrow
		this.burrowLocations.forEach((burrow) => {
			this.add.text(burrow.x - 10, burrow.y + 70, burrow.key.toUpperCase(), {
				fontSize: 32,
				color: '#553a1f',
			});
		});
	}

	// create mole character from the spritesheet that was loaded
	initializeMole() {
		// add mole sprite to scene
		gameState.mole = this.physics.add.sprite(0, 0, 'mole');
		gameState.mole.setScale(0.5, 0.5);

		// set mole's location
		this.updateBurrow();


		// after mole appears, run idle animation
		gameState.mole.on('animationcomplete-appear', () => {
			gameState.mole.anims.play('idle');
		});

		// after mole is hidden, immediately relocate to another burrow
		gameState.mole.on('animationcomplete-disappear', () => {
			this.updateBurrow();
		});
	}

	// creates all the animations that will run after an action is performed
	initializeAnimations() {
		// create the appear animation from mole spritesheet
		this.anims.create({
			key: 'appear',
			frames: this.anims.generateFrameNumbers('mole', { start: 0, end: 2 }),
			frameRate: 10,
		});

		// create the idle animation from mole spritesheet that will repeat indefinitely
		this.anims.create({
			key: 'idle',
			frames: this.anims.generateFrameNumbers('mole', { frames: [1, 3, 1, 1, 4] }),
			frameRate: 3,
			repeat: -1,
		});

		// create the disappear animation from mole spritesheet
		this.anims.create({
			key: 'disappear',
			frames: this.anims.generateFrameNumbers('mole', { frames: [5, 6, 6, 5, 2, 1, 0] }),
			frameRate: 15,
		});
	}

	// display remaining time left on screen and run update after every second
	initializeTimer(timerCallback) {
		gameState.timerText = this.add.text(50, 75, `Time: ${timeLeft}`).setColor('#000000');

		this.time.addEvent({
			delay: 1000, // call after every 1000ms (1sec)
			callback: timerCallback, // run function after 1sec elapsed
			args: [1], // amount of time that elapsed
			callbackScope: this, // scope to this class
			loop: true, // repeat forever
		});
	}

	// fetches a random burrow from our list of burrows
	getRandomBurrow() {
		return Phaser.Utils.Array.GetRandom(this.burrowLocations);
	}

	// select new burrow and move mole to it
	updateBurrow() {
		// select a random burrow from our list of burrows
		const burrowLocation = this.getRandomBurrow();

		// update the current burrow key to the new burrow's key
		currentBurrowKey = burrowLocation.key;

		// set the mole's position to the new burrow's (x, y) coordinates
		gameState.mole.setPosition(burrowLocation.x, burrowLocation.y);

		// play animation to make mole appear
		gameState.mole.anims.play('appear');
	}

	// play the mole's disappear animation to indicate it was hit
	// and after animation is complete, mole will move to a new burrow
	relocateMole() {
		gameState.mole.anims.play('disappear');
	}

	// update the clock text on the screen to reflect the changed amount
	updateTimerText() {
		gameState.timerText.setText(`Time: ${timeLeft}`);
	}

	// update the score text on the screen to reflect the changed amount
	updateScoreText() {
		gameState.scoreText.setText(`Score: ${score}`);
	}

	// display the number of points the user gained
	displayRewardText() {
		// add text to display score reward
		const rewardText = this.add.text(160, 50, '+5').setColor('#228B22');
		this.time.addEvent({
			delay: 500, // call after 200ms
			callback:  () => { rewardText.destroy(); }, // remove text after 200ms
			args: [rewardText], // text to remove
			repeat: -1,
		});
	}

	// display the number of points the user lost
	displayPenaltyText() {
		// add text to display score penalty
		const penaltyText = this.add.text(160, 50, '-5').setColor('#991A00');
		this.time.addEvent({
			delay: 300, // call after 200ms
			callback: () => { penaltyText.destroy(); }, // remove text after 200ms
			args: [penaltyText], // text to remove
			repeat: -1,
		});
	}

	// display background overlay with pause messages to indicate game is paused
	displayPauseScreen() {
		gameState.pauseOverlay = this.add.rectangle(0, 0, 480, 640, 0xFFFFFF);
		gameState.pauseOverlay.alpha = 0.75;
		gameState.pauseOverlay.setOrigin(0, 0);

		gameState.pauseText = this.add.text(225, 325, 'PAUSED').setColor('#000000');
		gameState.resumeText = this.add.text(125, 375, 'Press space to resume game').setColor('#000000');
	}

	// remove overlay and pause messages when game is unpaused
	removePauseScreen() {
		gameState.pauseOverlay.destroy();
		gameState.pauseText.destroy();
		gameState.resumeText.destroy();
	}
}

This is the whole code. Thanks for the help. The problem lies at step 16:
(The updateScore() function should be flexible enough to update by any number of points. To accommodate this, add a points parameter to our function that allows the caller to pass in any number, and add it to the score .

Inside updateScore , add the points parameter to score .)

After you have done what written in my previous answer, you got a second thing to do:

Inside updateScore , add the points parameter to score

so instead of this line you wrote:

     points = score + points

you must update score, so:

score += points //add the points to the score

Of course this implies that from within your function updateScore you’re able to reach the variable score. From the code you posted is not clear so.

Edit:
Since you have posted the missing part of your code, I see that you declared score as a global variable.

let score = 0

so you should be able to update it without any problem.

Hopefully this is enough to help. Let us know if you’re encountering other issues. :slight_smile:

2 Likes

So, the game runs with this function but it doesn’t register it at all, the score is supposed to update when I get the right answer but it simply disregards.

update() {

   if (timeLeft <= 0) {

     // Provided for user

     this.scene.stop('GameScene');

     this.scene.start('EndScene');

   }

   // Updates score.

    const updateScore = points => {

    points += score

    }

   // user successfully hit the mole, so reward the user with 5pts

   const applyHitReward = () => {

     updateScore(5)

     // display how many points the user will gain

     this.displayRewardText();

     // display the new score to the user

     this.updateScoreText();

   };

You can notice the function being called after variable applyHitReward() but it does nothing.

And when do you call the function applyHitReward()? :wink:
You have defined it. But you’re not calling it.

Ideally you should be able to write a logic that listen for whenever a mole is hit, figure out if the mole hit was the correct mole and call updateScore() as a consequence with the correct parameter(positive number if the mole hit was the correct mole, non-positive number otherwise).

Does this make sense to you? :slight_smile:

The thing is that the applyHitReward() function triggers after u pick the hole where the mole is so it runs applyHitReward() but does not run updateScore(). NOW… I found the cowards way of doing it which is this way:

const updateScore = ()=> {
     score += 5
     }
		// user successfully hit the mole, so reward the user with 5pts
		const applyHitReward = () => {
      updateScore()
``` This is not the way to do it because I'm supposed to be able to call the function with any numerical value Ex: updateScore(9) but I figure if I just input the 5 into the updateScore() function the I shuld get the same results :sweat_smile:

The thing is that the applyHitReward() function triggers after u pick the hole where the mole is

Can you show this thing you say in the code. Because I don’t see it in what you posted.

Also @mirja_t asked gently if you could share the link of the exercise :slight_smile:

1 Like

Mole Unearther link

const updateScore = (points)=> {
     score += points
     }
		// user successfully hit the mole, so reward the user with 5pts
		const applyHitReward = () => {
      updateScore(5)

Think this is the final solution you were right I just needed to switch the order. Thanks a bunch guys!! :grinning:

1 Like