Skip to content

Commit 3a85655

Browse files
r4pt0sr4pt0s
authored
game_machine_1 added (#103)
Part of #30
2 parents b6ae2d6 + cc53042 commit 3a85655

File tree

2 files changed

+262
-0
lines changed

2 files changed

+262
-0
lines changed

‎src/interactions/map_arcade/game_machine_1.intercation.js

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import { displayDialogue } from '../../utils';
2+
3+
export const interactionWithGameMachine1 = (player, k, map) => {
4+
player.onCollide('game_machine_1', () => {
5+
player.isInDialog = true;
6+
showCustomPrompt(
7+
'Do you want to play the Number Guessing Game?',
8+
['Yes', 'No'],
9+
(selectedOption) => {
10+
if (selectedOption === 'Yes') {
11+
displayDialogue({
12+
k,
13+
player,
14+
text: ['Starting the Number Guessing Game... Get ready!'],
15+
onDisplayEnd: () => {
16+
player.isInDialog = false;
17+
startNumberGuessingGame(k);
18+
},
19+
});
20+
} else {
21+
displayDialogue({
22+
k,
23+
player,
24+
text: ['Maybe next time!'],
25+
onDisplayEnd: () => {
26+
player.isInDialog = false;
27+
},
28+
});
29+
}
30+
}
31+
);
32+
});
33+
};
34+
35+
function startNumberGuessingGame(k) {
36+
const MAX_ATTEMPTS = 5;
37+
const randomNumber = Math.floor(Math.random() * 100) + 1;
38+
let attempts = 0;
39+
let feedbackText;
40+
41+
k.scene('numberGuessing', () => {
42+
const centerX = k.width() / 2;
43+
const centerY = k.height() / 2;
44+
const offsetY = -100;
45+
46+
k.add([
47+
k.text('Guess a number between 1 and 100', { size: 24 }),
48+
k.pos(centerX, centerY - 100 + offsetY),
49+
k.anchor('center')
50+
]);
51+
const input = k.add([
52+
k.text('Enter Guess: ', { size: 32 }),
53+
k.pos(centerX, centerY+offsetY),
54+
k.anchor('center')
55+
]);
56+
57+
feedbackText = k.add([
58+
k.text('Your guess will appear here', { size: 24 }),
59+
k.pos(centerX, centerY + 100+ offsetY),
60+
k.anchor('center')
61+
]);
62+
63+
let currentGuess = '';
64+
65+
k.onKeyPress('enter', () => {
66+
if (currentGuess.length > 0) {
67+
const guess = parseInt(currentGuess, 10);
68+
attempts++;
69+
if (guess === randomNumber) {
70+
k.go('win', attempts);
71+
} else if (attempts >= MAX_ATTEMPTS) {
72+
k.go('lose', randomNumber);
73+
} else {
74+
if (guess < randomNumber) {
75+
feedbackText.text = `Too low! Try again. Attempts left: ${MAX_ATTEMPTS - attempts}`;
76+
} else {
77+
feedbackText.text = `Too high! Try again. Attempts left: ${MAX_ATTEMPTS - attempts}`;
78+
}
79+
}
80+
currentGuess = '';
81+
}
82+
});
83+
84+
k.onKeyPress((key) => {
85+
if (key === 'backspace') {
86+
currentGuess = currentGuess.slice(0, -1);
87+
} else if (!isNaN(key) && currentGuess.length < 3) {
88+
currentGuess += key;
89+
}
90+
input.text = `Enter Guess: ${currentGuess}`;
91+
});
92+
93+
k.onKeyPress('escape', () => {
94+
k.go('arcade');
95+
});
96+
});
97+
98+
k.scene('win', (attempts) => {
99+
const centerX = k.width() / 2;
100+
const centerY = k.height() / 2;
101+
const offsetY = -100;
102+
103+
k.add([
104+
k.text('Congratulations! You guessed the number!', { size: 32 }),
105+
k.pos(centerX, centerY - 100 + offsetY),
106+
k.anchor('center')
107+
]);
108+
k.add([
109+
k.text(`Attempts: ${attempts}`, { size: 32 }),
110+
k.pos(centerX, centerY + offsetY),
111+
k.anchor('center')
112+
]);
113+
114+
const playAgainButton = k.add([
115+
k.text('Play Again', { size: 24 }),
116+
k.pos(centerX, centerY + 80 + offsetY),
117+
k.anchor('center'),
118+
k.area()
119+
]);
120+
playAgainButton.onClick(() => startNumberGuessingGame(k));
121+
122+
const exitButton = k.add([
123+
k.text('Exit', { size: 24 }),
124+
k.pos(centerX, centerY + 140 + offsetY),
125+
k.anchor('center'),
126+
k.area()
127+
]);
128+
exitButton.onClick(() => k.go('arcade'));
129+
});
130+
131+
k.scene('lose', (number) => {
132+
const centerX = k.width() / 2;
133+
const centerY = k.height() / 2;
134+
const offsetY = -100;
135+
136+
k.add([
137+
k.text('Game Over! You ran out of attempts.', { size: 32 }),
138+
k.pos(centerX, centerY - 100 + offsetY),
139+
k.anchor('center')
140+
]);
141+
k.add([
142+
k.text(`The number was: ${number}`, { size: 32 }),
143+
k.pos(centerX, centerY + offsetY),
144+
k.anchor('center')
145+
]);
146+
147+
const playAgainButton = k.add([
148+
k.text('Play Again', { size: 24 }),
149+
k.pos(centerX, centerY + 80 + offsetY),
150+
k.anchor('center'),
151+
k.area()
152+
]);
153+
playAgainButton.onClick(() => startNumberGuessingGame(k));
154+
155+
const exitButton = k.add([
156+
k.text('Exit', { size: 24 }),
157+
k.pos(centerX, centerY + 140 + offsetY),
158+
k.anchor('center'),
159+
k.area()
160+
]);
161+
exitButton.onClick(() => k.go('arcade'));
162+
});
163+
164+
k.go('numberGuessing');
165+
}
166+
167+
function injectCSS() {
168+
const style = document.createElement('style');
169+
style.innerHTML = `
170+
#custom-prompt {
171+
display: none;
172+
position: fixed;
173+
top: 0;
174+
left: 0;
175+
width: 100vw;
176+
height: 100vh;
177+
background-color: rgba(0, 0, 0, 0.6);
178+
display: flex;
179+
align-items: center;
180+
justify-content: center;
181+
z-index: 1000;
182+
}
183+
184+
#prompt-message {
185+
font-size: 1.5rem;
186+
color: white;
187+
text-align: center;
188+
margin-bottom: 20px;
189+
}
190+
191+
#options-container {
192+
display: flex;
193+
justify-content: center;
194+
gap: 10px;
195+
}
196+
197+
.option-btn {
198+
padding: 10px 20px;
199+
background-color: #007BFF;
200+
color: white;
201+
border: none;
202+
border-radius: 5px;
203+
font-size: 1.2rem;
204+
cursor: pointer;
205+
transition: background-color 0.3s ease;
206+
}
207+
208+
.option-btn:hover {
209+
background-color: #0056b3;
210+
}
211+
212+
.option-btn:focus {
213+
outline: none;
214+
box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.8);
215+
}
216+
217+
@media (max-width: 600px) {
218+
#options-container {
219+
flex-direction: column;
220+
}
221+
222+
.option-btn {
223+
width: 100%;
224+
text-align: center;
225+
}
226+
}
227+
`;
228+
document.head.appendChild(style);
229+
}
230+
231+
function showCustomPrompt(message, options, callback) {
232+
injectCSS(); // Inject the CSS styles
233+
document.getElementById('prompt-message').textContent = message;
234+
const optionsContainer = document.getElementById('options-container');
235+
optionsContainer.innerHTML = '';
236+
237+
options.forEach((option) => {
238+
const button = document.createElement('button');
239+
button.textContent = option;
240+
button.classList.add('option-btn');
241+
button.onclick = function () {
242+
callback(option);
243+
closeCustomPrompt();
244+
};
245+
optionsContainer.appendChild(button);
246+
});
247+
248+
document.getElementById('custom-prompt').style.display = 'flex';
249+
if (optionsContainer.children.length > 0) {
250+
optionsContainer.children[0].focus();
251+
}
252+
}
253+
254+
function closeCustomPrompt() {
255+
document.getElementById('custom-prompt').style.display = 'none';
256+
}

‎src/interactions/map_arcade/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { enterMapCityInteraction } from './enterMapCity.interactions';
2+
3+
import { interactionWithGameMachine1 } from './game_machine_1.intercation';
24
import { interactionWithGameMachine8 } from './game_machine_8';
35
import { interactionWithGameMachine2 } from './game_machine_2.interactions';
46
import { interactionWithGameMachine4 } from './game_machine_4.interactions';
@@ -11,6 +13,10 @@ const interactions = [
1113
enterMapCityInteraction,
1214
// Add more interactions here
1315

16+
interactionWithGameMachine1,
17+
// new interaction
18+
interactionWithGameMachine2,
19+
1420
interactionWithJessie,
1521

1622
// new interaction

0 commit comments

Comments
 (0)