|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Shy Guy Simulator</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
max-width: 800px; |
|
margin: 20px auto; |
|
padding: 20px; |
|
background-color: #1a1a1a; |
|
color: #fff; |
|
} |
|
|
|
#game-container { |
|
background-color: #2a2a2a; |
|
padding: 20px; |
|
border-radius: 8px; |
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
#story-text { |
|
margin-bottom: 20px; |
|
line-height: 1.6; |
|
min-height: 100px; |
|
} |
|
|
|
#choices { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 10px; |
|
} |
|
|
|
button { |
|
padding: 10px 20px; |
|
background-color: #4a4a4a; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
transition: background-color 0.3s; |
|
} |
|
|
|
button:hover { |
|
background-color: #666; |
|
} |
|
|
|
#stats { |
|
margin-top: 20px; |
|
padding: 10px; |
|
background-color: #333; |
|
border-radius: 4px; |
|
} |
|
|
|
.thought-bubble { |
|
font-style: italic; |
|
color: #aaa; |
|
margin: 10px 0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="game-container"> |
|
<h1>Shy Guy Simulator</h1> |
|
<div id="stats"> |
|
Confidence: <span id="confidence">0</span>% | |
|
Drinks: <span id="drinks">0</span> | |
|
Time: <span id="time">8:00 PM</span> |
|
</div> |
|
<div id="story-text"></div> |
|
<div id="choices"></div> |
|
</div> |
|
|
|
<script> |
|
class ShyGuyGame { |
|
constructor() { |
|
this.stats = { |
|
confidence: 0, |
|
drinks: 0, |
|
time: new Date(2024, 0, 1, 20, 0) |
|
}; |
|
|
|
this.currentScene = 'start'; |
|
this.thoughts = [ |
|
"Maybe she won't like me...", |
|
"What if I say something stupid?", |
|
"Everyone's watching...", |
|
"I should probably just go home...", |
|
"She looks way out of my league..." |
|
]; |
|
|
|
this.initialize(); |
|
} |
|
|
|
initialize() { |
|
this.updateStats(); |
|
this.loadScene(this.currentScene); |
|
setInterval(() => this.showRandomThought(), 15000); |
|
} |
|
|
|
showRandomThought() { |
|
if (this.stats.confidence < 70) { |
|
const thoughtText = this.thoughts[Math.floor(Math.random() * this.thoughts.length)]; |
|
const thoughtBubble = document.createElement('div'); |
|
thoughtBubble.className = 'thought-bubble'; |
|
thoughtBubble.textContent = `Inner voice: "${thoughtText}"`; |
|
|
|
const storyText = document.getElementById('story-text'); |
|
storyText.insertBefore(thoughtBubble, storyText.firstChild); |
|
|
|
setTimeout(() => thoughtBubble.remove(), 5000); |
|
} |
|
} |
|
|
|
updateStats() { |
|
document.getElementById('confidence').textContent = this.stats.confidence; |
|
document.getElementById('drinks').textContent = this.stats.drinks; |
|
document.getElementById('time').textContent = |
|
this.stats.time.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); |
|
} |
|
|
|
advanceTime(minutes) { |
|
this.stats.time = new Date(this.stats.time.getTime() + minutes * 60000); |
|
this.updateStats(); |
|
} |
|
|
|
loadScene(sceneId) { |
|
const scene = this.scenes[sceneId]; |
|
if (!scene) return; |
|
|
|
document.getElementById('story-text').innerHTML = scene.text; |
|
|
|
const choicesContainer = document.getElementById('choices'); |
|
choicesContainer.innerHTML = ''; |
|
|
|
scene.choices.forEach(choice => { |
|
if (!choice.condition || choice.condition(this.stats)) { |
|
const button = document.createElement('button'); |
|
button.textContent = choice.text; |
|
button.onclick = () => { |
|
if (choice.effect) { |
|
choice.effect(this.stats); |
|
this.updateStats(); |
|
} |
|
this.loadScene(choice.next); |
|
}; |
|
choicesContainer.appendChild(button); |
|
} |
|
}); |
|
} |
|
|
|
scenes = { |
|
start: { |
|
text: "You're at the homecoming party, standing awkwardly by the snack table. Across the room, you see her - the pretty girl you've been too nervous to talk to all semester. What do you do?", |
|
choices: [ |
|
{ |
|
text: "Get a drink to calm your nerves", |
|
effect: stats => { |
|
stats.drinks++; |
|
stats.confidence += 10; |
|
this.advanceTime(15); |
|
}, |
|
next: 'after_drink' |
|
}, |
|
{ |
|
text: "Try to move closer to the dance floor", |
|
effect: stats => { |
|
stats.confidence += 5; |
|
this.advanceTime(10); |
|
}, |
|
next: 'dance_floor' |
|
}, |
|
{ |
|
text: "Stay by the snacks and observe", |
|
effect: stats => { |
|
this.advanceTime(20); |
|
}, |
|
next: 'observe' |
|
} |
|
] |
|
}, |
|
after_drink: { |
|
text: "The drink starts to take effect, making you feel a bit warmer and more relaxed. The music seems more inviting now.", |
|
choices: [ |
|
{ |
|
text: "Get another drink", |
|
effect: stats => { |
|
stats.drinks++; |
|
stats.confidence += 15; |
|
this.advanceTime(15); |
|
}, |
|
next: 'more_drinks' |
|
}, |
|
{ |
|
text: "Start swaying to the music", |
|
effect: stats => { |
|
stats.confidence += 10; |
|
this.advanceTime(10); |
|
}, |
|
next: 'dancing' |
|
} |
|
] |
|
}, |
|
more_drinks: { |
|
text: "You're definitely feeling the drinks now. Your anxiety is lower, but you're also a bit wobbly.", |
|
choices: [ |
|
{ |
|
text: "Try to approach her", |
|
condition: stats => stats.confidence >= 40, |
|
effect: stats => this.advanceTime(5), |
|
next: 'approach' |
|
}, |
|
{ |
|
text: "Take a break outside", |
|
effect: stats => { |
|
stats.confidence -= 10; |
|
this.advanceTime(20); |
|
}, |
|
next: 'outside' |
|
} |
|
] |
|
}, |
|
dance_floor: { |
|
text: "You're closer to where she's standing now. The music is louder, and people are dancing around you.", |
|
choices: [ |
|
{ |
|
text: "Start dancing near her group", |
|
effect: stats => { |
|
stats.confidence += 15; |
|
this.advanceTime(15); |
|
}, |
|
next: 'dancing' |
|
}, |
|
{ |
|
text: "Retreat to get a drink", |
|
effect: stats => { |
|
stats.drinks++; |
|
stats.confidence += 5; |
|
this.advanceTime(10); |
|
}, |
|
next: 'after_drink' |
|
} |
|
] |
|
}, |
|
dancing: { |
|
text: "You're dancing! Not too badly either. You notice she's glancing in your direction occasionally.", |
|
choices: [ |
|
{ |
|
text: "Make eye contact and smile", |
|
effect: stats => { |
|
stats.confidence += 20; |
|
this.advanceTime(5); |
|
}, |
|
next: 'eye_contact' |
|
}, |
|
{ |
|
text: "Keep dancing but avoid eye contact", |
|
effect: stats => { |
|
stats.confidence += 5; |
|
this.advanceTime(15); |
|
}, |
|
next: 'continue_dancing' |
|
} |
|
] |
|
}, |
|
eye_contact: { |
|
text: "She smiles back! Your heart is racing, but in a good way.", |
|
choices: [ |
|
{ |
|
text: "Walk over and say hi", |
|
condition: stats => stats.confidence >= 60, |
|
next: 'success' |
|
}, |
|
{ |
|
text: "Panic and get another drink", |
|
effect: stats => { |
|
stats.drinks++; |
|
stats.confidence += 10; |
|
this.advanceTime(10); |
|
}, |
|
next: 'more_drinks' |
|
} |
|
] |
|
}, |
|
success: { |
|
text: "Congratulations! You managed to overcome your shyness and talk to her. Turns out, she's been hoping you'd come say hi all evening. Sometimes the hardest part is just taking that first step.", |
|
choices: [ |
|
{ |
|
text: "Play Again", |
|
effect: stats => { |
|
stats.confidence = 0; |
|
stats.drinks = 0; |
|
stats.time = new Date(2024, 0, 1, 20, 0); |
|
}, |
|
next: 'start' |
|
} |
|
] |
|
} |
|
}; |
|
} |
|
|
|
|
|
const game = new ShyGuyGame(); |
|
</script> |
|
</body> |
|
</html> |
