Hello everyone. I am working on the Phaser.js Fast Foodie project. This is a really difficult project and the directions seem vague and all over the place. I have been leaning on previous forum posts to get me this far but I think I need some additional help. I am setting up some checks to see how full the customer is. I’m not sure what condition exactly I should be checking for in 26, so I moved to the next else if and when I get to 32 I’m back to what I thought I was checking for in 29. Here is my full code because I am really not feeling confident about any of it. However, I am not throwing any errors and everything works so far. Only thing is I think I should be seeing food on the tray by this point and I am not. Please help. Here is the link to the project and the code I have so far. I have put comments saying which step I am on throughout the code.
https://www.codecademy.com/paths/create-video-games-with-phaser/tracks/game-dev-learn-phaser-visual-effects-and-capstone/modules/game-dev-project-capstone/projects/fastfoodie
const gameState = {
score: 0,
starRating: 5,
currentWaveCount: 1,
customerIsReady: false,
cam: {},
gameSpeed: 3,
currentMusic: {},
totalWaveCount: 3,
countdownTimer: 1500,
readyForNextOrder: true,
customersServedCount: 0,
}
// Gameplay scene
class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' })
}
// Step 15 - adding method
updateCustomerCountText() {
// Step 16
gameState.customersLeftCount = gameState.totalCustomerCount - gameState.customersServedCount;
// Step 17 - part 1 setting text
gameState.customerCountText.setText(`Customers left: ${gameState.customersLeftCount}`);
}
// Step 26
placeFood(food, fullnessValue) {
// Step 27
if (gameState.currentMeal.children.entries.length < 3 && gameState.customerIsReady === true) {
let Xposition = gameState.tray.x;
// Step 28
switch(gameState.currentMeal.children.entries.length) {
case 2:
Xposition += 100;
break;
case 1:
Xposition -= 80;
}
gameState.currentMeal.create(Xposition, gameState.tray.y, food);
// Step 28
gameState.currentMeal.fullnessValue += fullnessValue;
// Step 29
for (let i = 0; i < gameState.currentMeal.fullnessValue; i++) {
if (i < gameState.currentCustomer.fullnessCapacity) {
// Step 30
} else if (i === gameState.currentCustomer.fullnessCapacity) {
gameState.currentCustomer.fullnessMeterBlocks[i].setFillStyle(0x3ADB40);
gameState.currentCustomer.fullnessMeterBlocks[i].setStrokeStyle(2, 0xEB94E);
// Step 31
} else if (i > gameState.currentCustomer.fullnessCapacity) {
gameState.currentCustomer.fullnessMeterBlocks[i].setFillStyle(0xDB533A);
gameState.currentCustomer.fullnessMeterBlocks[i].setStrokeStyle(2, 0xB92E2E);
}
}
}
}
preload() {
// Preload images
const baseURL = 'https://content.codecademy.com/courses/learn-phaser/fastfoodie/';
this.load.image('Chef', `${baseURL}art/Chef.png`);
this.load.image('Customer-1', `${baseURL}art/Customer-1.png`);
this.load.image('Customer-2', `${baseURL}art/Customer-2.png`);
this.load.image('Customer-3', `${baseURL}art/Customer-3.png`);
this.load.image('Customer-4', `${baseURL}art/Customer-4.png`);
this.load.image('Customer-5', `${baseURL}art/Customer-5.png`);
this.load.image('Floor-Server', `${baseURL}art/Floor-Server.png`);
this.load.image('Floor-Customer', `${baseURL}art/Floor-Customer.png`);
this.load.image('Tray', `${baseURL}art/Tray.png`);
this.load.image('Barrier', `${baseURL}art/Barrier.png`);
this.load.image('Star-full', `${baseURL}art/Star-full.png`);
this.load.image('Star-half', `${baseURL}art/Star-half.png`);
this.load.image('Star-empty', `${baseURL}art/Star-empty.png`);
// Preload song
this.load.audio('gameplayTheme', [
`${baseURL}audio/music/2-gameplayTheme.ogg`,
`${baseURL}audio/music/2-gameplayTheme.mp3`
]); // Credit: "Pixel Song #18" by hmmm101: https://freesound.org/people/hmmm101
// Preload SFX
this.load.audio('placeFoodSFX', [
`${baseURL}audio/sfx/placeFood.ogg`,
`${baseURL}audio/sfx/placeFood.mp3`
]); // Credit: "action_02.wav" by dermotte: https://freesound.org/people/dermotte
this.load.audio('servingCorrectSFX', [
`${baseURL}audio/sfx/servingCorrect.ogg`,
`${baseURL}audio/sfx/servingCorrect.mp3`
]); // Credit: "Video Game SFX Positive Action Long Tail" by rhodesmas: https://freesound.org/people/djlprojects
this.load.audio('servingIncorrectSFX', [
`${baseURL}audio/sfx/servingIncorrect.ogg`,
`${baseURL}audio/sfx/servingIncorrect.mp3`
]); // Credit: "Incorrect 01" by rhodesmas: https://freesound.org/people/rhodesmas
this.load.audio('servingEmptySFX', [
`${baseURL}audio/sfx/servingEmpty.ogg`,
`${baseURL}audio/sfx/servingEmpty.mp3`
]); // Credit: "Computer Error Noise [variants of KevinVG207's Freesound#331912].wav" by Timbre: https://freesound.org/people/Timbre
this.load.audio('fiveStarsSFX', [
`${baseURL}audio/sfx/fiveStars.ogg`,
`${baseURL}audio/sfx/fiveStars.mp3`
]); // Credit: "Success 01" by rhodesmas: https://freesound.org/people/rhodesmas
this.load.audio('nextWaveSFX', [
`${baseURL}audio/sfx/nextWave.ogg`,
`${baseURL}audio/sfx/nextWave.mp3`
]); // Credit: "old fashion radio jingle 2.wav" by rhodesmas: https://freesound.org/people/chimerical
}
create() {
// Stop, reassign, and play the new music
gameState.currentMusic.stop();
gameState.currentMusic = this.sound.add('gameplayTheme');
gameState.currentMusic.play({ loop: true });
// Assign SFX
gameState.sfx = {};
gameState.sfx.placeFood = this.sound.add('placeFoodSFX');
gameState.sfx.servingCorrect = this.sound.add('servingCorrectSFX');
gameState.sfx.servingIncorrect = this.sound.add('servingIncorrectSFX');
gameState.sfx.servingEmpty = this.sound.add('servingEmptySFX');
gameState.sfx.fiveStars = this.sound.add('fiveStarsSFX');
gameState.sfx.nextWave = this.sound.add('nextWaveSFX');
// Create environment sprites
gameState.floorServer = this.add.sprite(gameState.cam.midPoint.x, 0, 'Floor-Server').setScale(0.5).setOrigin(0.5, 0);
gameState.floorCustomer = this.add.sprite(gameState.cam.midPoint.x, gameState.cam.worldView.bottom, 'Floor-Customer').setScale(0.5).setOrigin(0.5, 1);
gameState.table = this.add.sprite(gameState.cam.midPoint.x, gameState.cam.midPoint.y, 'Barrier').setScale(0.5);
// Create player and tray sprites
gameState.tray = this.add.sprite(gameState.cam.midPoint.x, gameState.cam.midPoint.y, 'Tray').setScale(0.5);
gameState.player = this.add.sprite(gameState.cam.midPoint.x, 200, 'Chef').setScale(0.5);
// Display the score
gameState.scoreTitleText = this.add.text(gameState.cam.midPoint.x, 30, 'Score', { fontSize: '15px', fill: '#666666' }).setOrigin(0.5);
gameState.scoreText = this.add.text(gameState.cam.midPoint.x, gameState.scoreTitleText.y + gameState.scoreTitleText.height + 20, gameState.score, { fontSize: '30px', fill: '#000000' }).setOrigin(0.5);
// Display the wave count
gameState.waveTitleText = this.add.text(gameState.cam.worldView.right - 20, 30, 'Wave', { fontSize: '64px', fill: '#666666' }).setOrigin(1, 1).setScale(0.25);
gameState.waveCountText = this.add.text(gameState.cam.worldView.right - 20, 30, gameState.currentWaveCount + '/' + gameState.totalWaveCount, { fontSize: '120px', fill: '#000000' }).setOrigin(1, 0).setScale(0.25);
// Display number of customers left
gameState.customerCountText = this.add.text(gameState.cam.worldView.right - 20, 80, `Customers left: ${gameState.customersLeftCount}`, { fontSize: '15px', fill: '#000000' }).setOrigin(1);
// Generate wave group
gameState.customers = this.add.group();
this.generateWave();
// Step 18
gameState.currentMeal = this.add.group();
// Step 19
gameState.currentMeal.fullnessValue = 0;
// Step 24 & 25 - setting up keyboard keys
gameState.keys.Enter = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER);
gameState.keys.a = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
gameState.keys.s= this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
gameState.keys.d = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
}
update() {
// Step 10 - checking for readyForNextOrder to be true and if so resetting to false
if (gameState.readyForNextOrder === true) {
gameState.readyForNextOrder = false;
// Step 11
gameState.customerIsReady = false;
// Step 12
gameState.currentCustomer = gameState.customers.children.entries[gameState.customersServedCount];
// Step 13 - creating tween
const tween = this.tweens.add({
targets: gameState.currentCustomer,
duration: 1000,
delay: 100,
angle: 90,
ease: 'Power2',
x: gameState.player.x,
// Step 23
onComplete: () => {
gameState.currentCustomer.meterContainer.visible = true;
}
});
// Step 14
gameState.customerIsReady = true;
}
}
/* WAVES */
// Generate wave
generateWave() {
// Add the total number of customers per wave here:
// Step 3 - generating number of customers in line
gameState.totalCustomerCount = (Math.ceil(Math.random() * 10)) * gameState.currentWaveCount;
// Step 17 - part 2 - updating text
this.updateCustomerCountText();
for (let i = 0; i < gameState.totalCustomerCount; i++) {
// Create your container below and add your customers to it below:
// Step 4
const customerContainer = this.add.container(gameState.cam.worldView.right + (200 * i), gameState.cam.worldView.bottom - 140);
// Step 5 - adding customerContainer to gameState.customers
gameState.customers.add(customerContainer);
// Customer sprite randomizer
let customerImageKey = Math.ceil(Math.random() * 5);
// Draw customers here!
// Step 6 drawing random customer sprite
let customer = this.add.sprite(0, 0, `Customer-${customerImageKey}`).setScale(0.5);
// Step 7 adding customer to container
customerContainer.add(customer);
// Fullness meter container
customerContainer.fullnessMeter = this.add.group();
// Define capacity
customerContainer.fullnessCapacity = Math.ceil(Math.random() * 5 * gameState.totalWaveCount);
// If capacity is an impossible number, reshuffle it until it isn't
while (customerContainer.fullnessCapacity === 12 || customerContainer.fullnessCapacity === 14) {
customerContainer.fullnessCapacity = Math.ceil(Math.random() * 5) * gameState.totalWaveCount;
}
// Step 20 - Edit the meterWidth
let meterWidth = customerContainer.fullnessCapacity * 10;
customerContainer.meterContainer = this.add.container(0, customer.y + (meterWidth / 2));
// Step 21 - Add the customerContainer.meterContainer to customerContainer
customerContainer.add(customerContainer.meterContainer);
// Add meter base
customerContainer.meterBase = this.add.rectangle(-130, customer.y, meterWidth, 33, 0x707070).setOrigin(0);
customerContainer.meterBase.setStrokeStyle(6, 0x707070);
customerContainer.meterBase.angle = -90;
customerContainer.meterContainer.add(customerContainer.meterBase);
// Add timer countdown meter body
customerContainer.timerMeterBody = this.add.rectangle(customerContainer.meterBase.x + 22, customer.y + 1, meterWidth + 4, 12, 0x3ADB40).setOrigin(0);
customerContainer.timerMeterBody.angle = -90;
customerContainer.meterContainer.add(customerContainer.timerMeterBody);
// Create container for individual fullness blocks
customerContainer.fullnessMeterBlocks = [];
// Create fullness meter blocks
for (let j = 0; j < customerContainer.fullnessCapacity; j++) {
customerContainer.fullnessMeterBlocks[j] = this.add.rectangle(customerContainer.meterBase.x, customer.y - (10 * j), 10, 20, 0xDBD53A).setOrigin(0);
customerContainer.fullnessMeterBlocks[j].setStrokeStyle(2, 0xB9B42E);
customerContainer.fullnessMeterBlocks[j].angle = -90;
customerContainer.fullnessMeter.add(customerContainer.fullnessMeterBlocks[j]);
customerContainer.meterContainer.add(customerContainer.fullnessMeterBlocks[j]);
}
// Hide meters
customerContainer.meterContainer.visible = false;
}
}
}
Edit: I kept going and this is my completed placeFood() function but I don’t know where to put it. It breaks the code no matter where.
// Step 26 I don't know where this goes
placeFood(food, fullnessValue) {
// Step 27
if (gameState.currentMeal.children.entries.length < 3 && gameState.customerIsReady === true) {
let Xposition = gameState.tray.x;
// Step 28
switch(gameState.currentMeal.children.entries.length) {
case 2:
Xposition += 100;
break;
case 1:
Xposition -= 80;
}
gameState.currentMeal.create(Xposition, gameState.tray.y, food);
// Step 28
gameState.currentMeal.fullnessValue += fullnessValue;
// Step 29
for (let i = 0; i < gameState.currentMeal.fullnessValue; i++) {
if (i < gameState.currentCustomer.fullnessCapacity) {
// Step 30
} else if (i === gameState.currentCustomer.fullnessCapacity) {
gameState.currentCustomer.fullnessMeterBlocks[i].setFillStyle(0x3ADB40);
gameState.currentCustomer.fullnessMeterBlocks[i].setStrokeStyle(2, 0xEB94E);
// Step 31
} else if (i > gameState.currentCustomer.fullnessCapacity) {
gameState.currentCustomer.fullnessMeterBlocks[i].setFillStyle(0xDB533A);
gameState.currentCustomer.fullnessMeterBlocks[i].setStrokeStyle(2, 0xB92E2E);
// Step 32
} else if (gameState.currentCustomer.fullnessCapacity === 0) {
gameState.currentCustomer.fullnessMeterBlocks[i].setFillStyle(0xFFFA81);
}
}
}
// Step 33
gameState.sfx.placeFood.play();
}