The code is in vuejs. I was trying to develop a game using phaser. But when the game is at the end I want to freeze the screen or stop the tweens.
But if I stop the tween when the game is over, on restarting the tweens are not restarting.
My main motive is to freeze the screen or stop the tween, but on restart it should run normally.
Please guide me what needs to be modified.
Here is my full code given below:
<template>
<!-- <div v-if="!initialize">
<button @click="initializeGame" class="btn">Start to Play</button>
</div> -->
<div ref="phaserContainer"></div>
</template>
<script>
import Phaser from 'phaser';
let gameOver = false;
let retryButton;
let okButton;
let tween1;
let tween2;
let tween3;
let tween4;
let image1;
let text1;
let image2;
let text2;
let image3;
let text3;
let image4;
let text4;
export default {
data() {
return {
initialize: false,
textQuestion: "",
questionCounter: 1,
quiz: [
{
question: "WHAT IS THE CAPITAL OF FRANCE?",
answers: ["LONDON", "PARIS", "BERLIN", "ROME"],
correctAnswer: "PARIS"
},
{
question: "WHICH PLANET IS KNOWN AS THE RED PLANET?",
answers: ["MARS", "JUPITER", "SATURN", "VENUS"],
correctAnswer: "MARS"
},
{
question: "WHAT IS THE NATIONAL FLOWER OF INDIA?",
answers: ["ROSE", "LOTUS", "LILY", "JASMINE"],
correctAnswer: "LOTUS"
},
{
question: "WHAT IS THE CHEMICAL SYMBOL FOR WATER?",
answers: ["O", "H2O", "CO2", "NaCl"],
correctAnswer: "H2O"
}
],
questionIndex: 0,
fishImage1: true,
fishImage2: true,
fishImage3: true,
fishImage4: true
}
},
watch: {
questionCounter() {
if(this.questionCounter > this.quiz.length) {
this.initialize = false;
}
}
},
mounted() {
//Initialize Phaser game
//this.initPhaserGame();
this.initializeGame();
},
methods: {
initializeGame() {
this.initialize = true;
this.initPhaserGame();
},
getIndexOfAnswer(correctAnswer) {
const currentQuestion = this.quiz[this.questionIndex];
return currentQuestion.answers.indexOf(correctAnswer);
},
getNextQuestion() {
this.questionCounter++;
if(this.questionCounter <= this.quiz.length) {
//Next quextion
this.questionIndex = this.questionIndex + 1;
this.textQuestion.setText(this.quiz[this.questionIndex].question);
text1.setText(this.quiz[this.questionIndex].answers[0]);
text2.setText(this.quiz[this.questionIndex].answers[1]);
text3.setText(this.quiz[this.questionIndex].answers[2]);
text4.setText(this.quiz[this.questionIndex].answers[3]);
this.fishImage1 = true;
this.fishImage2 = true;
this.fishImage3 = true;
this.fishImage4 = true;
}
},
handleGameOver(obj) {
// Stop any ongoing game actions, animations, or timers
// For example:
//obj.scene.stop("MainScene");
// Show game over text or UI
obj.add.text(400, 300, 'Game Over', { fontSize: '32px', fill: '#fff' }).setOrigin(0.5);
// this.textQuestion = this.add.text(5, 0, self.quiz[self.questionIndex].question).setFont('28px Arial Black').setFill('#ffffff').setShadow(2, 2, "#333333", 2);
tween1.pause();
tween2.pause();
tween3.pause();
tween4.pause();
// Buttons to control the Tween timescale
retryButton = obj.add.image(500, 430, 'retry');
const width = 100; // Desired width
const height = 30; // Desired height
retryButton.setScale(width / retryButton.width, height / retryButton.height);
okButton = obj.add.image(300, 430, 'ok');
okButton.setScale(width / okButton.width, height / okButton.height);
// Allow the player to restart the game
//Retry button
retryButton.on('pointerdown', () => {
//obj.scene.start("MainScene");
// tween1.restart();
// tween2.restart();
// tween3.restart();
// tween4.restart();
//this.initPhaserGame();
//window.location.reload();
obj.scene.restart();
});
retryButton.setInteractive({
pixelPerfect: false,
useHandCursor: true
});
//Ok button
okButton.on('pointerdown', () => {
tween1.resume();
tween2.resume();
tween3.resume();
tween4.resume();
this.$router.push({ name: 'Home' })
});
okButton.setInteractive({
pixelPerfect: false,
useHandCursor: true
});
// retryButton.on('pointerdown', () => {
// // Reload the current scene or restart the game
// obj.scene.restart();
// // Reset any game state or variables
// //gameOver = false;
// });
},
initPhaserGame() {
const self = this;
const MainScene = {
preload() {
// Load background image
this.load.image('bg', 'src/assets/space/nebula.jpg');
this.load.image('up', 'src/assets/ui/up-bubble.png');
this.load.image('down', 'src/assets/ui/down-bubble.png');
this.load.image('retry', 'src/assets/space/retry.png');
this.load.image('ok', 'src/assets/space/ok.png');
//this.load.spritesheet('fish', 'src/assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
this.load.image('fish1', 'src/assets/space/ufo1.png');
this.load.image('fish2', 'src/assets/space/ufo2.png');
this.load.image('fish3', 'src/assets/space/ufo3.png');
this.load.image('fish4', 'src/assets/space/ufo2.png');
},
create() {
//Create background image
this.add.image(400, 300, 'bg');
//Create question
self.textQuestion = this.add.text(5, 0, self.quiz[self.questionIndex].question).setFont('28px Arial Black').setFill('#ffffff').setShadow(2, 2, "#333333", 2);
//###################################################################
//######################First Fish###################################
//###################################################################
image1 = this.add.image(100, -150, 'fish1', 0);
// Initialize text1 of fish1
text1 = this.add.text(300, -150, self.quiz[self.questionIndex].answers[0], { fontSize: '20px', fill: '#fff' }).setOrigin(0.6,-2);
//Onhover on fish1
image1.setInteractive({
pixelPerfect: false,
useHandCursor: true
});
//Onclick on fish1
image1.on('pointerdown', function (){
//alert("fish 1");
if(self.initialize){
if(self.fishImage1){
//Get index of correct answer
const correctAnswerIndex = self.getIndexOfAnswer(self.quiz[self.questionIndex].correctAnswer);
if(correctAnswerIndex == 0) {
alert("CORRECT ANSWER");
self.getNextQuestion();
} else {
self.fishImage1 = false;
//image1.off('pointerdown');
alert("WRONG ANSWER");
}
}
}
});
//code to move fish1 when moving up and down
tween1 = this.tweens.add({
targets: image1,
//cycle: true,
props: {
x: { value: 600, },
y: { value: 600, },
},
duration: 5000,
ease: 'Sine.easeInOut',
//yoyo: true,
repeat: -1,
// onComplete: function (tween) {
// if (tween.targets[0].x >= 800) {
// tween.targets[0].x = -150; // Reset position to the left
// }
// }
// onComplete: () => { image1.setPosition(-70, 300); },
// onUpdate: function () {
// // Check if image1.x is greater than a certain value
// if (image1.x > 800) {
// // Update flipX property to true
// image1.flipX = true;
// } else {
// // Reset flipX property to false
// image1.flipX = false;
// }
// }
});
//text1 to follow fish1 when moving up and down
this.tweens.add({
targets: text1,
//cycle: true,
props: {
x: { value: 300 },
y: { value: 600 },
},
duration: 6000,
ease: 'Power1',
//yoyo: true,
repeat: -1,
//onComplete: () => { text1.setPosition(-70, 300); },
});
//###################################################################
//##################Second fish######################################
//###################################################################
image2 = this.add.image(300, -150, 'fish2', 1).setScale(0.95);
// Initialize text2 of fish2
text2 = this.add.text(300, 150, self.quiz[self.questionIndex].answers[1], { fontSize: '20px', fill: '#fff' }).setOrigin(0.6,-2);
//Onhover on fish2
image2.setInteractive({
pixelPerfect: false,
useHandCursor: true
});
//Onclick on fish2
image2.on('pointerdown', function (){
//alert("fish 2");
if(self.initialize){
if(self.fishImage2){
//Get index of correct answer
const correctAnswerIndex = self.getIndexOfAnswer(self.quiz[self.questionIndex].correctAnswer);
if(correctAnswerIndex == 1) {
alert("CORRECT ANSWER");
self.getNextQuestion();
} else {
self.fishImage2 = false;
//image2.off('pointerdown');
alert("WRONG ANSWER");
}
}
}
});
//code to move fish2 when moving up and down
tween2 = this.tweens.add({
targets: image2,
props: {
x: { value: 900, },
y: { value: 800, },
},
duration: 5000,
ease: 'Sine.easeInOut',
//yoyo: true,
repeat: -1,
// onComplete: () => { image2.setPosition(-150, 300); },
// onUpdate: function () {
// // Check if image2.x is greater than a certain value
// if (image2.x > 850) {
// // Update flipX property to true
// image2.flipX = true;
// } else {
// // Reset flipX property to false
// image2.flipX = false;
// }
// }
});
//text2 to follow fish2 when moving up and down
this.tweens.add({
targets: text2,
//cycle: true,
props: {
x: { value: 300 },
y: { value: 900 },
},
duration: 6000,
ease: 'Power1',
//yoyo: true,
repeat: -1,
});
//###################################################################
//##################Third fish#######################################
//###################################################################
image3 = this.add.image(250, 110, 'fish3', 2).setScale(1.25);
// Initialize text3 of fish3
text3 = this.add.text(250, 110, self.quiz[self.questionIndex].answers[2], { fontSize: '20px', fill: '#fff' }).setOrigin(0.6,-2);
//Onhover on fish3
image3.setInteractive({
pixelPerfect: false,
useHandCursor: true
});
//Onclick on fish3
image3.on('pointerdown', function (){
//alert("fish 3");
if(self.initialize){
if(self.fishImage3){
//Get index of correct answer
const correctAnswerIndex = self.getIndexOfAnswer(self.quiz[self.questionIndex].correctAnswer);
if(correctAnswerIndex == 2) {
alert("CORRECT ANSWER");
self.getNextQuestion();
} else {
self.fishImage3 = false;
//image3.off('pointerdown');
alert("WRONG ANSWER");
}
}
}
});
//code to move fish3 when moving up and down
tween3 = this.tweens.add({
targets: image3,
props: {
x: { value: 500 },
y: { value: 600 },
},
duration: 5000,
ease: 'Linear',
//yoyo: true,
repeat: -1
});
//text3 to follow fish3 when moving up and down
this.tweens.add({
targets: text3,
//cycle: true,
props: {
x: { value: 150 },
y: { value: 700 },
},
duration: 5000,
ease: 'Power1',
//yoyo: true,
repeat: -1,
});
//###################################################################
//##################Fourth fish######################################
//###################################################################
//image4 = this.add.image(400, 0, 'fish4', 1).setScale(1.45);
image4 = this.add.image(150, 0, 'fish4', 1).setScale(1.45);
// Initialize text4 of fish4
text4 = this.add.text(400, 0, self.quiz[self.questionIndex].answers[3], { fontSize: '20px', fill: '#fff' }).setOrigin(0.6,-2.7);
//Onhover on fish4
image4.setInteractive({
pixelPerfect: false,
useHandCursor: true
});
//Onclick on fish4
image4.on('pointerdown', function (){
//alert("fish 4");
if(self.initialize){
if(self.fishImage4){
//Get index of correct answer
const correctAnswerIndex = self.getIndexOfAnswer(self.quiz[self.questionIndex].correctAnswer);
if(correctAnswerIndex == 3) {
alert("CORRECT ANSWER");
self.getNextQuestion();
} else {
self.fishImage4 = false;
//image4.off('pointerdown');
alert("WRONG ANSWER");
}
}
}
});
//code to move fish4 when moving up and down
// this.tweens.add({
// targets: image4,
// props: {
// x: { value: 700, duration: 2000, flipX: true },
// y: { value: 50, duration: 15000, },
// },
// ease: 'Sine.easeInOut',
// yoyo: true,
// repeat: -1
// });
tween4 = this.tweens.add({
targets: image4,
props: {
x: { value: 150 },
y: { value: 700 },
},
duration: 5000,
ease: 'Power1',
//yoyo: true,
repeat: -1,
});
//text4 to follow fish4 when moving up and down
this.tweens.add({
targets: text4,
props: {
x: { value: 150 },
y: { value: 900 },
},
duration: 5000,
ease: 'Power1',
//yoyo: true,
repeat: -1,
});
// Buttons to control the Tween timescale
// retryButton.on('pointerdown', () => {
// });
// retryButton.setInteractive({
// pixelPerfect: false,
// useHandCursor: true
// });
// okButton.on('pointerdown', () => {
// });
// okButton.setInteractive({
// pixelPerfect: false,
// useHandCursor: true
// });
// const downButton = this.add.image(70, 530, 'down').setInteractive();
// downButton.on('pointerdown', () => {
// if (this.tweens.timeScale > 0)
// {
// this.tweens.timeScale -= 0.1;
// }
// text.setText('Global timeScale: ' + this.tweens.timeScale.toFixed(2));
// });
// const upButton = this.add.image(730, 530, 'up').setInteractive();
// upButton.on('pointerdown', () => {
// if (this.tweens.timeScale < 9.9)
// {
// this.tweens.timeScale += 0.1;
// }
// text.setText('Global timeScale: ' + this.tweens.timeScale.toFixed(2));
// });
},
update() {
if(self.questionCounter > self.quiz.length) {
// Set gameOver flag to true
gameOver = true;
// Call a function to handle game over
this.scene.stop("MainScene");
self.handleGameOver(this);
}
//###################Fish1
// Move the object - copy movement of fish1 with text1
image1.x += 1;
image1.y += 1;
// Update text position
text1.x = image1.x;
text1.y = image1.y;
// if (image1.x > 800) {
// image1.setPosition(-150, 300); // Reset position to the left of the screen
// // image1.flipX = true;
// // text1.setPosition(-70, 300);
// }
//###################Fish2
// Move the object - copy movement of fish2 with text2
image2.x += 1;
image2.y += 1;
// Update text position
text2.x = image2.x;
text2.y = image2.y;
//###################Fish3
// Move the object - copy movement of fish3 with text3
image3.x += 1;
image3.y += 1;
// Update text position
text3.x = image3.x;
text3.y = image3.y;
//###################Fish4
// Move the object - copy movement of fish4 with text3
image4.x += 1;
image4.y += 1;
// Update text position
text4.x = image4.x;
text4.y = image4.y;
}
};
// Create a Phaser game configuration
const config = {
type: Phaser.AUTO,
parent: this.$refs.phaserContainer,
width: 800,
height: 600,
scene: MainScene
};
// Create Phaser game instance
new Phaser.Game(config);
}
}
};
</script>
enter code here