From 5fcd2266df149c6532f57ae83f55939a7fa313d9 Mon Sep 17 00:00:00 2001 From: aadityaforwork Date: Mon, 7 Oct 2024 15:04:00 +0530 Subject: [PATCH 1/2] game_machine_1 added --- .../map_arcade/game_machine_1.intercation.js | 247 ++++++++++++++++++ src/interactions/map_arcade/index.js | 4 +- 2 files changed, 250 insertions(+), 1 deletion(-) create mode 100644 src/interactions/map_arcade/game_machine_1.intercation.js diff --git a/src/interactions/map_arcade/game_machine_1.intercation.js b/src/interactions/map_arcade/game_machine_1.intercation.js new file mode 100644 index 00000000..2d20214d --- /dev/null +++ b/src/interactions/map_arcade/game_machine_1.intercation.js @@ -0,0 +1,247 @@ +import { displayDialogue } from '../../utils'; + +export const interactionWithGameMachine1 = (player, k, map) => { + player.onCollide('game_machine_1', () => { + if (player.isInDialog) return; + console.log('Player collided with game machine 1'); + player.isInDialog = true; + showCustomPrompt( + 'Do you want to play "Guess the Number: Extreme Edition"?', + ['Yes', 'No'], + (selectedOption) => { + console.log(`Selected option: ${selectedOption}`); + if (selectedOption === 'Yes') { + displayDialogue({ + k, + player, + text: ['Starting Zero to Hero... Good luck!'], + onDisplayEnd: () => { + console.log('Dialog ended, starting the game.'); + player.isInDialog = false; + openGuessTheNumberGame(k, player); + }, + }); + } else { + displayDialogue({ + k, + player, + text: ['Maybe next time!'], + onDisplayEnd: () => { + console.log('Dialog ended, no game started.'); + player.isInDialog = false; + closeCustomPrompt(); + }, + }); + } + } + ); + }); +}; + +function showCustomPrompt(message, options, callback) { + const promptElement = document.getElementById('custom-prompt'); + if (!promptElement) { + console.error('Custom prompt element not found.'); + return; + } + promptElement.style.display = 'block'; + promptElement.innerHTML = ` +
+

${message}

+
+ ${options.map(option => ``).join('')} +
+
+ `; + const buttons = promptElement.getElementsByClassName('prompt-btn'); + Array.from(buttons).forEach((button, index) => { + button.addEventListener('click', () => { + callback(options[index]); + closeCustomPrompt(); + }); + button.addEventListener('mouseover', () => { + button.style.backgroundColor = '#2980b9'; + }); + button.addEventListener('mouseout', () => { + button.style.backgroundColor = '#3498db'; + }); + }); +} + +function closeCustomPrompt() { + const promptElement = document.getElementById('custom-prompt'); + if (promptElement) { + promptElement.style.display = 'none'; + } else { + console.error('Custom prompt element not found for closing.'); + } +} + +function openGuessTheNumberGame(k, player) { + const gameWindow = window.open('', 'GuessTheNumber', 'width=600,height=400'); + const targetNumber = Math.floor(Math.random() * 100) + 1; + let attempts = 0; + const maxAttempts = 10; + let score = 1000; + let timeLeft = 60; + let difficulty = 'normal'; + let hintUsed = false; + + gameWindow.document.write(` + + + Guess the Number: Extreme Edition + + + +
+

Guess the Number: Extreme Edition

+
+ + +
+

Guess a number between 1 and 100

+ + + + +
+
Attempts: 0/${maxAttempts}
+
Score: ${score}
+
Time: ${timeLeft}s
+
+
+ + + + `); + + gameWindow.focus(); +} \ No newline at end of file diff --git a/src/interactions/map_arcade/index.js b/src/interactions/map_arcade/index.js index 45678d8b..75c1813e 100644 --- a/src/interactions/map_arcade/index.js +++ b/src/interactions/map_arcade/index.js @@ -1,12 +1,14 @@ import { enterMapCityInteraction } from './enterMapCity.interactions'; +import { interactionWithGameMachine1 } from './game_machine_1.intercation'; import { interactionWithGameMachine2 } from './game_machine_2.interactions'; const interactions = [ enterMapCityInteraction, // Add more interactions here - + interactionWithGameMachine1, // new interaction interactionWithGameMachine2, + ]; export const attachInteractions = (gameObj, k) => { From 7c92ac9fbe57644c17dc66a85cfbcfd8ca26a43f Mon Sep 17 00:00:00 2001 From: aadityaforwork Date: Thu, 10 Oct 2024 21:22:46 +0530 Subject: [PATCH 2/2] game_machine-1 updated --- .../map_arcade/game_machine_1.intercation.js | 413 +++++++++--------- 1 file changed, 211 insertions(+), 202 deletions(-) diff --git a/src/interactions/map_arcade/game_machine_1.intercation.js b/src/interactions/map_arcade/game_machine_1.intercation.js index 2d20214d..6797ea89 100644 --- a/src/interactions/map_arcade/game_machine_1.intercation.js +++ b/src/interactions/map_arcade/game_machine_1.intercation.js @@ -2,23 +2,19 @@ import { displayDialogue } from '../../utils'; export const interactionWithGameMachine1 = (player, k, map) => { player.onCollide('game_machine_1', () => { - if (player.isInDialog) return; - console.log('Player collided with game machine 1'); player.isInDialog = true; showCustomPrompt( - 'Do you want to play "Guess the Number: Extreme Edition"?', + 'Do you want to play the Number Guessing Game?', ['Yes', 'No'], (selectedOption) => { - console.log(`Selected option: ${selectedOption}`); if (selectedOption === 'Yes') { displayDialogue({ k, player, - text: ['Starting Zero to Hero... Good luck!'], + text: ['Starting the Number Guessing Game... Get ready!'], onDisplayEnd: () => { - console.log('Dialog ended, starting the game.'); player.isInDialog = false; - openGuessTheNumberGame(k, player); + startNumberGuessingGame(k); }, }); } else { @@ -27,9 +23,7 @@ export const interactionWithGameMachine1 = (player, k, map) => { player, text: ['Maybe next time!'], onDisplayEnd: () => { - console.log('Dialog ended, no game started.'); player.isInDialog = false; - closeCustomPrompt(); }, }); } @@ -38,210 +32,225 @@ export const interactionWithGameMachine1 = (player, k, map) => { }); }; -function showCustomPrompt(message, options, callback) { - const promptElement = document.getElementById('custom-prompt'); - if (!promptElement) { - console.error('Custom prompt element not found.'); - return; - } - promptElement.style.display = 'block'; - promptElement.innerHTML = ` -
-

${message}

-
- ${options.map(option => ``).join('')} -
-
- `; - const buttons = promptElement.getElementsByClassName('prompt-btn'); - Array.from(buttons).forEach((button, index) => { - button.addEventListener('click', () => { - callback(options[index]); - closeCustomPrompt(); +function startNumberGuessingGame(k) { + const MAX_ATTEMPTS = 5; + const randomNumber = Math.floor(Math.random() * 100) + 1; + let attempts = 0; + let feedbackText; + + k.scene('numberGuessing', () => { + const centerX = k.width() / 2; + const centerY = k.height() / 2; + const offsetY = -100; + + k.add([ + k.text('Guess a number between 1 and 100', { size: 24 }), + k.pos(centerX, centerY - 100 + offsetY), + k.anchor('center') + ]); + const input = k.add([ + k.text('Enter Guess: ', { size: 32 }), + k.pos(centerX, centerY+offsetY), + k.anchor('center') + ]); + + feedbackText = k.add([ + k.text('Your guess will appear here', { size: 24 }), + k.pos(centerX, centerY + 100+ offsetY), + k.anchor('center') + ]); + + let currentGuess = ''; + + k.onKeyPress('enter', () => { + if (currentGuess.length > 0) { + const guess = parseInt(currentGuess, 10); + attempts++; + if (guess === randomNumber) { + k.go('win', attempts); + } else if (attempts >= MAX_ATTEMPTS) { + k.go('lose', randomNumber); + } else { + if (guess < randomNumber) { + feedbackText.text = `Too low! Try again. Attempts left: ${MAX_ATTEMPTS - attempts}`; + } else { + feedbackText.text = `Too high! Try again. Attempts left: ${MAX_ATTEMPTS - attempts}`; + } + } + currentGuess = ''; + } }); - button.addEventListener('mouseover', () => { - button.style.backgroundColor = '#2980b9'; + + k.onKeyPress((key) => { + if (key === 'backspace') { + currentGuess = currentGuess.slice(0, -1); + } else if (!isNaN(key) && currentGuess.length < 3) { + currentGuess += key; + } + input.text = `Enter Guess: ${currentGuess}`; }); - button.addEventListener('mouseout', () => { - button.style.backgroundColor = '#3498db'; + + k.onKeyPress('escape', () => { + k.go('arcade'); }); }); + + k.scene('win', (attempts) => { + const centerX = k.width() / 2; + const centerY = k.height() / 2; + const offsetY = -100; + + k.add([ + k.text('Congratulations! You guessed the number!', { size: 32 }), + k.pos(centerX, centerY - 100 + offsetY), + k.anchor('center') + ]); + k.add([ + k.text(`Attempts: ${attempts}`, { size: 32 }), + k.pos(centerX, centerY + offsetY), + k.anchor('center') + ]); + + const playAgainButton = k.add([ + k.text('Play Again', { size: 24 }), + k.pos(centerX, centerY + 80 + offsetY), + k.anchor('center'), + k.area() + ]); + playAgainButton.onClick(() => startNumberGuessingGame(k)); + + const exitButton = k.add([ + k.text('Exit', { size: 24 }), + k.pos(centerX, centerY + 140 + offsetY), + k.anchor('center'), + k.area() + ]); + exitButton.onClick(() => k.go('arcade')); + }); + + k.scene('lose', (number) => { + const centerX = k.width() / 2; + const centerY = k.height() / 2; + const offsetY = -100; + + k.add([ + k.text('Game Over! You ran out of attempts.', { size: 32 }), + k.pos(centerX, centerY - 100 + offsetY), + k.anchor('center') + ]); + k.add([ + k.text(`The number was: ${number}`, { size: 32 }), + k.pos(centerX, centerY + offsetY), + k.anchor('center') + ]); + + const playAgainButton = k.add([ + k.text('Play Again', { size: 24 }), + k.pos(centerX, centerY + 80 + offsetY), + k.anchor('center'), + k.area() + ]); + playAgainButton.onClick(() => startNumberGuessingGame(k)); + + const exitButton = k.add([ + k.text('Exit', { size: 24 }), + k.pos(centerX, centerY + 140 + offsetY), + k.anchor('center'), + k.area() + ]); + exitButton.onClick(() => k.go('arcade')); + }); + + k.go('numberGuessing'); } -function closeCustomPrompt() { - const promptElement = document.getElementById('custom-prompt'); - if (promptElement) { - promptElement.style.display = 'none'; - } else { - console.error('Custom prompt element not found for closing.'); +function injectCSS() { + const style = document.createElement('style'); + style.innerHTML = ` + #custom-prompt { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; } -} -function openGuessTheNumberGame(k, player) { - const gameWindow = window.open('', 'GuessTheNumber', 'width=600,height=400'); - const targetNumber = Math.floor(Math.random() * 100) + 1; - let attempts = 0; - const maxAttempts = 10; - let score = 1000; - let timeLeft = 60; - let difficulty = 'normal'; - let hintUsed = false; - - gameWindow.document.write(` - - - Guess the Number: Extreme Edition - - - -
-

Guess the Number: Extreme Edition

-
- - -
-

Guess a number between 1 and 100

- - - - -
-
Attempts: 0/${maxAttempts}
-
Score: ${score}
-
Time: ${timeLeft}s
-
-
- - - - `); - - gameWindow.focus(); + @media (max-width: 600px) { + #options-container { + flex-direction: column; + } + + .option-btn { + width: 100%; + text-align: center; + } + } + `; + document.head.appendChild(style); +} + +function showCustomPrompt(message, options, callback) { + injectCSS(); // Inject the CSS styles + document.getElementById('prompt-message').textContent = message; + const optionsContainer = document.getElementById('options-container'); + optionsContainer.innerHTML = ''; + + options.forEach((option) => { + const button = document.createElement('button'); + button.textContent = option; + button.classList.add('option-btn'); + button.onclick = function () { + callback(option); + closeCustomPrompt(); + }; + optionsContainer.appendChild(button); + }); + + document.getElementById('custom-prompt').style.display = 'flex'; + if (optionsContainer.children.length > 0) { + optionsContainer.children[0].focus(); + } +} + +function closeCustomPrompt() { + document.getElementById('custom-prompt').style.display = 'none'; } \ No newline at end of file