Upit | Learn about creating the game Game of Thrones Quiz Challenge with gen AI

===================================================================\n--- original.js\n+++ change.js\n@@ -129,30 +129,66 @@\n \tquestion: "What is the name of the wall's black-cloaked defenders?",\n \tanswers: ["The Kingsguard", "The Night's Watch", "The Gold Cloaks", "The Brotherhood"],\n \tcorrect: 1\n }];\n+// Game state management\n+var gameState = 'menu'; // 'menu', 'playing', 'finished'\n var currentQuestionIndex = 0;\n var correctAnswers = 0;\n var totalQuestions = questions.length;\n var questionCard;\n var answerButtons = [];\n var scoreText;\n var isAnswering = false;\n+// Menu UI elements\n+var menuContainer;\n+var gameContainer;\n+var endContainer;\n // Create UI elements\n function initializeUI() {\n+\t// Create main containers\n+\tmenuContainer = game.addChild(new Container());\n+\tgameContainer = game.addChild(new Container());\n+\tendContainer = game.addChild(new Container());\n+\t// Setup menu screen\n+\tvar menuTitle = new Text2('Game of Thrones Quiz', {\n+\t\tsize: 80,\n+\t\tfill: 0xF39C12\n+\t});\n+\tmenuTitle.anchor.set(0.5, 0.5);\n+\tmenuTitle.x = 1024;\n+\tmenuTitle.y = 800;\n+\tmenuContainer.addChild(menuTitle);\n+\tvar menuSubtitle = new Text2('Test your knowledge of Westeros!', {\n+\t\tsize: 48,\n+\t\tfill: 0xFFFFFF\n+\t});\n+\tmenuSubtitle.anchor.set(0.5, 0.5);\n+\tmenuSubtitle.x = 1024;\n+\tmenuSubtitle.y = 950;\n+\tmenuContainer.addChild(menuSubtitle);\n+\tvar startButton = menuContainer.addChild(new AnswerButton());\n+\tstartButton.setAnswer('Start Game', false);\n+\tstartButton.x = 1024;\n+\tstartButton.y = 1200;\n+\tstartButton.down = function () {\n+\t\tstartGame();\n+\t};\n+\t// Setup game screen \n+\tgameContainer.visible = false;\n \t// Question card\n-\tquestionCard = game.addChild(new QuestionCard());\n+\tquestionCard = gameContainer.addChild(new QuestionCard());\n \tquestionCard.x = 1024;\n \tquestionCard.y = 600;\n \t// Answer buttons\n \tfor (var i = 0; i < 4; i++) {\n-\t\tvar button = game.addChild(new AnswerButton());\n+\t\tvar button = gameContainer.addChild(new AnswerButton());\n \t\tbutton.x = i % 2 === 0 ? 524 : 1524;\n \t\tbutton.y = i < 2 ? 1200 : 1400;\n \t\tanswerButtons.push(button);\n \t}\n \t// Score display\n-\tvar scoreBackground = game.addChild(LK.getAsset('scoreBackground', {\n+\tvar scoreBackground = gameContainer.addChild(LK.getAsset('scoreBackground', {\n \t\tanchorX: 0.5,\n \t\tanchorY: 0.5\n \t}));\n \tscoreBackground.x = 1024;\n@@ -162,8 +198,10 @@\n \t\tfill: 0xFFFFFF\n \t});\n \tscoreText.anchor.set(0.5, 0.5);\n \tscoreBackground.addChild(scoreText);\n+\t// Setup end screen\n+\tendContainer.visible = false;\n }\n function displayQuestion() {\n \tif (currentQuestionIndex >= questions.length) {\n \t\tshowFinalScore();\n@@ -179,17 +217,58 @@\n }\n function updateScore() {\n \tscoreText.setText('Score: ' + correctAnswers + '/' + (currentQuestionIndex + 1));\n }\n+function startGame() {\n+\tgameState = 'playing';\n+\tcurrentQuestionIndex = 0;\n+\tcorrectAnswers = 0;\n+\tisAnswering = false;\n+\t// Hide menu, show game\n+\tmenuContainer.visible = false;\n+\tgameContainer.visible = true;\n+\tendContainer.visible = false;\n+\tdisplayQuestion();\n+}\n+function goToMenu() {\n+\tgameState = 'menu';\n+\t// Hide all screens, show menu\n+\tmenuContainer.visible = true;\n+\tgameContainer.visible = false;\n+\tendContainer.visible = false;\n+}\n function showFinalScore() {\n-\tvar finalText = new Text2('Quiz Complete!\\nFinal Score: ' + correctAnswers + '/' + totalQuestions, {\n+\tgameState = 'finished';\n+\t// Hide game screen, show end screen\n+\tgameContainer.visible = false;\n+\tendContainer.visible = true;\n+\t// Clear previous end screen content\n+\twhile (endContainer.children.length > 0) {\n+\t\tendContainer.removeChildAt(0);\n+\t}\n+\tvar endTitle = new Text2('Quiz Complete!', {\n \t\tsize: 80,\n \t\tfill: 0xF39C12\n \t});\n-\tfinalText.anchor.set(0.5, 0.5);\n-\tfinalText.x = 1024;\n-\tfinalText.y = 1366;\n-\tgame.addChild(finalText);\n+\tendTitle.anchor.set(0.5, 0.5);\n+\tendTitle.x = 1024;\n+\tendTitle.y = 1000;\n+\tendContainer.addChild(endTitle);\n+\tvar finalScoreText = new Text2('Final Score: ' + correctAnswers + '/' + totalQuestions, {\n+\t\tsize: 60,\n+\t\tfill: 0xFFFFFF\n+\t});\n+\tfinalScoreText.anchor.set(0.5, 0.5);\n+\tfinalScoreText.x = 1024;\n+\tfinalScoreText.y = 1200;\n+\tendContainer.addChild(finalScoreText);\n+\tvar menuButton = endContainer.addChild(new AnswerButton());\n+\tmenuButton.setAnswer('Return to Menu', false);\n+\tmenuButton.x = 1024;\n+\tmenuButton.y = 1500;\n+\tmenuButton.down = function () {\n+\t\tgoToMenu();\n+\t};\n \tif (correctAnswers >= totalQuestions * 0.8) {\n \t\tLK.showYouWin();\n \t} else if (correctAnswers < totalQuestions * 0.4) {\n \t\tLK.showGameOver();\n@@ -217,5 +296,5 @@\n \t}, 2000);\n };\n // Initialize the game\n initializeUI();\n-displayQuestion();\n\\ No newline at end of file\n+goToMenu();\n\\ No newline at end of file\n

/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var AnswerButton = Container.expand(function () { var self = Container.call(this); self.defaultBackground = self.attachAsset('answerButton', { anchorX: 0.5, anchorY: 0.5 }); self.answerText = new Text2('', { size: 48, fill: 0xFFFFFF, wordWrap: true, wordWrapWidth: 750 }); self.answerText.anchor.set(0.5, 0.5); self.addChild(self.answerText); self.isCorrect = false; self.isClickable = true; self.setAnswer = function (text, correct) { self.answerText.setText(text); self.isCorrect = correct; self.isClickable = true; self.resetVisual(); }; self.resetVisual = function () { self.removeChild(self.defaultBackground); self.defaultBackground = self.attachAsset('answerButton', { anchorX: 0.5, anchorY: 0.5 }); self.addChildAt(self.defaultBackground, 0); }; self.showResult = function () { self.removeChild(self.defaultBackground); if (self.isCorrect) { self.defaultBackground = self.attachAsset('correctButton', { anchorX: 0.5, anchorY: 0.5 }); } else { self.defaultBackground = self.attachAsset('incorrectButton', { anchorX: 0.5, anchorY: 0.5 }); } self.addChildAt(self.defaultBackground, 0); self.isClickable = false; }; self.down = function (x, y, obj) { if (!self.isClickable) return; self.isClickable = false; game.answerSelected(self); }; return self; }); var QuestionCard = Container.expand(function () { var self = Container.call(this); var background = self.attachAsset('questionBackground', { anchorX: 0.5, anchorY: 0.5 }); self.questionText = new Text2('', { size: 60, fill: 0xFFFFFF, wordWrap: true, wordWrapWidth: 1700 }); self.questionText.anchor.set(0.5, 0.5); self.addChild(self.questionText); self.setQuestion = function (questionData) { self.questionText.setText(questionData.question); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x1a252f }); /**** * Game Code ****/ var questions = [{ question: "What is Jon Snow's true parentage?", answers: ["Ned Stark and unknown mother", "Lyanna Stark and Rhaegar Targaryen", "Catelyn Stark and Ned Stark", "Cersei Lannister and Robert Baratheon"], correct: 1 }, { question: "What is the name of Daenerys' largest dragon?", answers: ["Viserion", "Rhaegal", "Drogon", "Balerion"], correct: 2 }, { question: "Which city is known as the Free City across the Narrow Sea?", answers: ["King's Landing", "Winterfell", "Braavos", "Oldtown"], correct: 2 }, { question: "Who is known as the 'King in the North'?", answers: ["Jon Snow", "Robb Stark", "Ned Stark", "Both A and B"], correct: 3 }, { question: "What is the motto of House Stark?", answers: ["Fire and Blood", "Winter is Coming", "Hear Me Roar", "Ours is the Fury"], correct: 1 }, { question: "Who killed King Joffrey?", answers: ["Tyrion Lannister", "Sansa Stark", "Olenna Tyrell", "Arya Stark"], correct: 2 }, { question: "What is the capital of the Seven Kingdoms?", answers: ["Winterfell", "King's Landing", "Casterly Rock", "Dragonstone"], correct: 1 }, { question: "Which house has the motto 'Fire and Blood'?", answers: ["Lannister", "Stark", "Targaryen", "Baratheon"], correct: 2 }, { question: "Who is Arya Stark's sword fighting teacher?", answers: ["Jon Snow", "Syrio Forel", "The Hound", "Jaqen H'ghar"], correct: 1 }, { question: "What is the name of the wall's black-cloaked defenders?", answers: ["The Kingsguard", "The Night's Watch", "The Gold Cloaks", "The Brotherhood"], correct: 1 }]; // Game state management var gameState = 'menu'; // 'menu', 'playing', 'finished' var currentQuestionIndex = 0; var correctAnswers = 0; var totalQuestions = questions.length; var questionCard; var answerButtons = []; var scoreText; var isAnswering = false; // Menu UI elements var menuContainer; var gameContainer; var endContainer; // Create UI elements function initializeUI() { // Create main containers menuContainer = game.addChild(new Container()); gameContainer = game.addChild(new Container()); endContainer = game.addChild(new Container()); // Setup menu screen var menuTitle = new Text2('Game of Thrones Quiz', { size: 80, fill: 0xF39C12 }); menuTitle.anchor.set(0.5, 0.5); menuTitle.x = 1024; menuTitle.y = 800; menuContainer.addChild(menuTitle); var menuSubtitle = new Text2('Test your knowledge of Westeros!', { size: 48, fill: 0xFFFFFF }); menuSubtitle.anchor.set(0.5, 0.5); menuSubtitle.x = 1024; menuSubtitle.y = 950; menuContainer.addChild(menuSubtitle); var startButton = menuContainer.addChild(new AnswerButton()); startButton.setAnswer('Start Game', false); startButton.x = 1024; startButton.y = 1200; startButton.down = function () { startGame(); }; // Setup game screen gameContainer.visible = false; // Question card questionCard = gameContainer.addChild(new QuestionCard()); questionCard.x = 1024; questionCard.y = 600; // Answer buttons for (var i = 0; i < 4; i++) { var button = gameContainer.addChild(new AnswerButton()); button.x = i % 2 === 0 ? 524 : 1524; button.y = i < 2 ? 1200 : 1400; answerButtons.push(button); } // Score display var scoreBackground = gameContainer.addChild(LK.getAsset('scoreBackground', { anchorX: 0.5, anchorY: 0.5 })); scoreBackground.x = 1024; scoreBackground.y = 200; scoreText = new Text2('Score: 0/0', { size: 48, fill: 0xFFFFFF }); scoreText.anchor.set(0.5, 0.5); scoreBackground.addChild(scoreText); // Setup end screen endContainer.visible = false; } function displayQuestion() { if (currentQuestionIndex >= questions.length) { showFinalScore(); return; } var questionData = questions[currentQuestionIndex]; questionCard.setQuestion(questionData); for (var i = 0; i < 4; i++) { answerButtons[i].setAnswer(questionData.answers[i], i === questionData.correct); } updateScore(); isAnswering = false; } function updateScore() { scoreText.setText('Score: ' + correctAnswers + '/' + (currentQuestionIndex + 1)); } function startGame() { gameState = 'playing'; currentQuestionIndex = 0; correctAnswers = 0; isAnswering = false; // Hide menu, show game menuContainer.visible = false; gameContainer.visible = true; endContainer.visible = false; displayQuestion(); } function goToMenu() { gameState = 'menu'; // Hide all screens, show menu menuContainer.visible = true; gameContainer.visible = false; endContainer.visible = false; } function showFinalScore() { gameState = 'finished'; // Hide game screen, show end screen gameContainer.visible = false; endContainer.visible = true; // Clear previous end screen content while (endContainer.children.length > 0) { endContainer.removeChildAt(0); } var endTitle = new Text2('Quiz Complete!', { size: 80, fill: 0xF39C12 }); endTitle.anchor.set(0.5, 0.5); endTitle.x = 1024; endTitle.y = 1000; endContainer.addChild(endTitle); var finalScoreText = new Text2('Final Score: ' + correctAnswers + '/' + totalQuestions, { size: 60, fill: 0xFFFFFF }); finalScoreText.anchor.set(0.5, 0.5); finalScoreText.x = 1024; finalScoreText.y = 1200; endContainer.addChild(finalScoreText); var menuButton = endContainer.addChild(new AnswerButton()); menuButton.setAnswer('Return to Menu', false); menuButton.x = 1024; menuButton.y = 1500; menuButton.down = function () { goToMenu(); }; if (correctAnswers >= totalQuestions * 0.8) { LK.showYouWin(); } else if (correctAnswers < totalQuestions * 0.4) { LK.showGameOver(); } } game.answerSelected = function (selectedButton) { if (isAnswering) return; isAnswering = true; // Show results for all buttons for (var i = 0; i < answerButtons.length; i++) { answerButtons[i].showResult(); } // Check if answer is correct if (selectedButton.isCorrect) { correctAnswers++; LK.setScore(correctAnswers); LK.getSound('correct').play(); } else { LK.getSound('incorrect').play(); } // Move to next question after delay LK.setTimeout(function () { currentQuestionIndex++; displayQuestion(); }, 2000); }; // Initialize the game initializeUI(); goToMenu();

===================================================================
--- original.js
+++ change.js
@@ -129,30 +129,66 @@
 	question: "What is the name of the wall's black-cloaked defenders?",
 	answers: ["The Kingsguard", "The Night's Watch", "The Gold Cloaks", "The Brotherhood"],
 	correct: 1
 }];
+// Game state management
+var gameState = 'menu'; // 'menu', 'playing', 'finished'
 var currentQuestionIndex = 0;
 var correctAnswers = 0;
 var totalQuestions = questions.length;
 var questionCard;
 var answerButtons = [];
 var scoreText;
 var isAnswering = false;
+// Menu UI elements
+var menuContainer;
+var gameContainer;
+var endContainer;
 // Create UI elements
 function initializeUI() {
+	// Create main containers
+	menuContainer = game.addChild(new Container());
+	gameContainer = game.addChild(new Container());
+	endContainer = game.addChild(new Container());
+	// Setup menu screen
+	var menuTitle = new Text2('Game of Thrones Quiz', {
+		size: 80,
+		fill: 0xF39C12
+	});
+	menuTitle.anchor.set(0.5, 0.5);
+	menuTitle.x = 1024;
+	menuTitle.y = 800;
+	menuContainer.addChild(menuTitle);
+	var menuSubtitle = new Text2('Test your knowledge of Westeros!', {
+		size: 48,
+		fill: 0xFFFFFF
+	});
+	menuSubtitle.anchor.set(0.5, 0.5);
+	menuSubtitle.x = 1024;
+	menuSubtitle.y = 950;
+	menuContainer.addChild(menuSubtitle);
+	var startButton = menuContainer.addChild(new AnswerButton());
+	startButton.setAnswer('Start Game', false);
+	startButton.x = 1024;
+	startButton.y = 1200;
+	startButton.down = function () {
+		startGame();
+	};
+	// Setup game screen  
+	gameContainer.visible = false;
 	// Question card
-	questionCard = game.addChild(new QuestionCard());
+	questionCard = gameContainer.addChild(new QuestionCard());
 	questionCard.x = 1024;
 	questionCard.y = 600;
 	// Answer buttons
 	for (var i = 0; i < 4; i++) {
-		var button = game.addChild(new AnswerButton());
+		var button = gameContainer.addChild(new AnswerButton());
 		button.x = i % 2 === 0 ? 524 : 1524;
 		button.y = i < 2 ? 1200 : 1400;
 		answerButtons.push(button);
 	}
 	// Score display
-	var scoreBackground = game.addChild(LK.getAsset('scoreBackground', {
+	var scoreBackground = gameContainer.addChild(LK.getAsset('scoreBackground', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	}));
 	scoreBackground.x = 1024;
@@ -162,8 +198,10 @@
 		fill: 0xFFFFFF
 	});
 	scoreText.anchor.set(0.5, 0.5);
 	scoreBackground.addChild(scoreText);
+	// Setup end screen
+	endContainer.visible = false;
 }
 function displayQuestion() {
 	if (currentQuestionIndex >= questions.length) {
 		showFinalScore();
@@ -179,17 +217,58 @@
 }
 function updateScore() {
 	scoreText.setText('Score: ' + correctAnswers + '/' + (currentQuestionIndex + 1));
 }
+function startGame() {
+	gameState = 'playing';
+	currentQuestionIndex = 0;
+	correctAnswers = 0;
+	isAnswering = false;
+	// Hide menu, show game
+	menuContainer.visible = false;
+	gameContainer.visible = true;
+	endContainer.visible = false;
+	displayQuestion();
+}
+function goToMenu() {
+	gameState = 'menu';
+	// Hide all screens, show menu
+	menuContainer.visible = true;
+	gameContainer.visible = false;
+	endContainer.visible = false;
+}
 function showFinalScore() {
-	var finalText = new Text2('Quiz Complete!\nFinal Score: ' + correctAnswers + '/' + totalQuestions, {
+	gameState = 'finished';
+	// Hide game screen, show end screen
+	gameContainer.visible = false;
+	endContainer.visible = true;
+	// Clear previous end screen content
+	while (endContainer.children.length > 0) {
+		endContainer.removeChildAt(0);
+	}
+	var endTitle = new Text2('Quiz Complete!', {
 		size: 80,
 		fill: 0xF39C12
 	});
-	finalText.anchor.set(0.5, 0.5);
-	finalText.x = 1024;
-	finalText.y = 1366;
-	game.addChild(finalText);
+	endTitle.anchor.set(0.5, 0.5);
+	endTitle.x = 1024;
+	endTitle.y = 1000;
+	endContainer.addChild(endTitle);
+	var finalScoreText = new Text2('Final Score: ' + correctAnswers + '/' + totalQuestions, {
+		size: 60,
+		fill: 0xFFFFFF
+	});
+	finalScoreText.anchor.set(0.5, 0.5);
+	finalScoreText.x = 1024;
+	finalScoreText.y = 1200;
+	endContainer.addChild(finalScoreText);
+	var menuButton = endContainer.addChild(new AnswerButton());
+	menuButton.setAnswer('Return to Menu', false);
+	menuButton.x = 1024;
+	menuButton.y = 1500;
+	menuButton.down = function () {
+		goToMenu();
+	};
 	if (correctAnswers >= totalQuestions * 0.8) {
 		LK.showYouWin();
 	} else if (correctAnswers < totalQuestions * 0.4) {
 		LK.showGameOver();
@@ -217,5 +296,5 @@
 	}, 2000);
 };
 // Initialize the game
 initializeUI();
-displayQuestion();
\ No newline at end of file
+goToMenu();
\ No newline at end of file

Creation History

Game of Thrones Quiz

Game of Thrones Quiz

Ayarlar

Quiz Bitti!

Game of Thrones Quiz

Ayarlar

Quiz Bitti!

Game of Thrones Quiz

Quiz Bitti!

Game of Thrones Quiz

Images

Used plugins