Skip to content

Commit e9fd377

Browse files
TobiasMue91TobiasMue91
committed
- implement a simplified Death by AI game (original: https://deathbyai.gg/)
- make it single player after struggling to make multiplayer work
1 parent 07aaffd commit e9fd377

File tree

1 file changed

+123
-0
lines changed

1 file changed

+123
-0
lines changed

‎games/death_by_ai.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Death by AI - Single Player</title>
7+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💀</text></svg>">
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
</head>
10+
<body class="bg-gradient-to-r from-gray-800 to-gray-900 text-white min-h-screen flex items-center justify-center">
11+
<div id="appContainer" class="container mx-auto p-4 max-w-2xl"></div>
12+
13+
<script>
14+
const appContainer = document.getElementById('appContainer');
15+
const scenarios = [
16+
"You are falling off a crumbling cliff",
17+
"You are trapped in a room with a black bear",
18+
"You're in a sinking ship",
19+
"You're caught in a tornado",
20+
"You're in a building on fire",
21+
"You're lost in a desert with no water",
22+
"You're facing a charging rhinoceros",
23+
"You're in a plane with failing engines",
24+
"You're caught in an avalanche",
25+
"You're in the path of a lava flow"
26+
];
27+
28+
let currentRound = 0;
29+
let playerScore = 0;
30+
31+
function startGame() {
32+
currentRound = 0;
33+
playerScore = 0;
34+
nextRound();
35+
}
36+
37+
function nextRound() {
38+
if (currentRound < 5) {
39+
currentRound++;
40+
const scenario = scenarios[Math.floor(Math.random() * scenarios.length)];
41+
renderPromptInput(scenario);
42+
} else {
43+
renderScoreboard();
44+
}
45+
}
46+
47+
function renderPromptInput(scenario) {
48+
appContainer.innerHTML = `
49+
<div class="text-center bg-gray-700 p-8 rounded-lg shadow-lg">
50+
<h2 class="text-3xl mb-4 text-green-400">Round ${currentRound}/5: ${scenario}</h2>
51+
<textarea id="prompt-input" class="bg-gray-800 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full h-32 mb-4" placeholder="Enter your escape plan..."></textarea>
52+
<button id="submit-prompt" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">Submit</button>
53+
</div>
54+
`;
55+
document.getElementById('submit-prompt').addEventListener('click', () => submitPrompt(scenario));
56+
}
57+
58+
async function submitPrompt(scenario) {
59+
const prompt = document.getElementById('prompt-input').value || "The player didn't submit a prompt";
60+
appContainer.innerHTML = `
61+
<div class="text-center bg-gray-700 p-8 rounded-lg shadow-lg">
62+
<h2 class="text-3xl mb-4 text-green-400">Resolving your fate</h2>
63+
<p class="text-xl">Please wait...</p>
64+
</div>
65+
`;
66+
67+
try {
68+
const response = await fetch('https://chatgpt.tobiasmue91.workers.dev/', {
69+
method: 'POST',
70+
headers: {"Content-Type": "application/json", "Accept": "*/*"},
71+
body: JSON.stringify({
72+
model: "gpt-3.5-turbo",
73+
max_tokens: 150,
74+
temperature: 0.7,
75+
messages: [
76+
{role: "system", content: "You are the AI judge in a game called 'Death by AI'. Your task is to determine if a player survives a given scenario based on their prompt. Respond with a JSON object containing 'survived' (boolean) and 'explanation' (string)."},
77+
{role: "user", content: `Scenario: ${scenario}\nPlayer's action: ${prompt}`}
78+
]
79+
})
80+
});
81+
82+
const data = await response.json();
83+
const fate = JSON.parse(data.choices[0].message.content);
84+
85+
if (fate.survived) playerScore++;
86+
87+
appContainer.innerHTML = `
88+
<div class="text-center bg-gray-700 p-8 rounded-lg shadow-lg">
89+
<h2 class="text-3xl mb-4 text-green-400">Your Fate</h2>
90+
<p class="text-xl mb-4">${fate.explanation}</p>
91+
<p class="text-2xl font-bold ${fate.survived ? 'text-green-400' : 'text-red-400'}">${fate.survived ? 'You survived!' : 'You died!'}</p>
92+
<button id="next-round" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">Next Round</button>
93+
</div>
94+
`;
95+
document.getElementById('next-round').addEventListener('click', nextRound);
96+
} catch (error) {
97+
console.error('Error resolving fate:', error);
98+
appContainer.innerHTML = `
99+
<div class="text-center bg-gray-700 p-8 rounded-lg shadow-lg">
100+
<h2 class="text-3xl mb-4 text-red-400">Error</h2>
101+
<p class="text-xl">An error occurred while resolving your fate. Please try again.</p>
102+
<button id="retry" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">Retry</button>
103+
</div>
104+
`;
105+
document.getElementById('retry').addEventListener('click', () => renderPromptInput(scenario));
106+
}
107+
}
108+
109+
function renderScoreboard() {
110+
appContainer.innerHTML = `
111+
<div class="text-center bg-gray-700 p-8 rounded-lg shadow-lg">
112+
<h2 class="text-3xl mb-4 text-green-400">Game Over</h2>
113+
<p class="text-2xl mb-4">Your final score: ${playerScore}/5</p>
114+
<button id="new-game" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">New Game</button>
115+
</div>
116+
`;
117+
document.getElementById('new-game').addEventListener('click', startGame);
118+
}
119+
120+
startGame();
121+
</script>
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)