I invite you to copy the code of this game and set up your own game page. All that I ask is that you make the code freely available to others, with the expectation that they will also make it freely available. This is not a commercial endeavor.
I invite you to copy the code of this game and set up your own game page. All that I ask is that you make the code freely available to others, with the expectation that they will also make it freely available. This is not a commercial endeavor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anonymous Game</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
padding: 15px;
background-color: #f5f5f5;
max-width: 100%;
overflow-x: hidden;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.text-block {
background-color: white;
border: 2px solid #333;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
min-height: 100px;
max-height: 400px;
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.text-block h3 {
margin-bottom: 10px;
color: #333;
font-size: 18px;
}
.text-block-content {
color: #555;
line-height: 1.6;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
align-items: center;
}
button {
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
flex: 1;
min-width: 120px;
max-width: 250px;
}
button:hover {
background-color: #0056b3;
}
button:active {
transform: scale(0.98);
}
.counter {
padding: 8px 15px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
min-width: 60px;
text-align: center;
}
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
overflow-y: auto;
}
.popup-content {
background-color: white;
margin: 50px auto;
padding: 20px;
border-radius: 8px;
max-width: 90%;
width: 600px;
}
.popup-content h3 {
margin-bottom: 10px;
}
textarea {
width: 100%;
padding: 10px;
border: 2px solid #333;
border-radius: 5px;
font-size: 16px;
font-family: Arial, sans-serif;
resize: vertical;
margin-bottom: 15px;
}
.title-input {
font-weight: bold;
}
.timer-display {
background-color: #fff3cd;
border: 2px solid #ffc107;
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
text-align: center;
font-weight: bold;
display: none;
}
.strikethrough {
text-decoration: line-through;
}
@media (max-width: 600px) {
button {
flex: 1 1 100%;
max-width: 100%;
}
.counter {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center; margin-bottom: 20px;">Anonymous Game</h1>
<div class="timer-display" id="timerDisplay">Time Remaining: --:--:--</div>
<div class="text-block">
<h3>Old Games</h3>
<div class="text-block-content" id="oldGames"></div>
</div>
<div class="text-block">
<h3>Current Game</h3>
<div class="text-block-content" id="currentGame"></div>
</div>
<div class="text-block">
<h3>Judge Move</h3>
<div class="text-block-content" id="judgeMove"></div>
</div>
<div class="button-group">
<button id="challengeBtn">Challenge</button>
<div class="counter" id="challengeCounter">0</div>
</div>
<div class="button-group">
<button id="whatHappensBtn">What Happens Next?</button>
<button id="startNewGameBtn">Start A New Game</button>
</div>
</div>
<!-- Move Popup -->
<div class="popup-overlay" id="movePopup">
<div class="popup-content">
<h3>Move</h3>
<textarea id="moveInput" maxlength="200" rows="5" placeholder="Enter your move (max 200 characters)"></textarea>
<button id="submitMoveBtn">Submit Move</button>
</div>
</div>
<!-- New Game Popup -->
<div class="popup-overlay" id="newGamePopup">
<div class="popup-content">
<h3>Title</h3>
<textarea id="titleInput" class="title-input" maxlength="100" rows="2" placeholder="Enter game title (max 100 characters)"></textarea>
<h3>Scenario</h3>
<textarea id="scenarioInput" maxlength="500" rows="8" placeholder="Enter game scenario (max 500 characters)"></textarea>
<button id="startGameBtn">Start Game</button>
</div>
</div>
<script>
let challengeCount = 0;
let gameTimer = null;
let timerEndTime = null;
const elements = {
oldGames: document.getElementById('oldGames'),
currentGame: document.getElementById('currentGame'),
judgeMove: document.getElementById('judgeMove'),
challengeCounter: document.getElementById('challengeCounter'),
challengeBtn: document.getElementById('challengeBtn'),
whatHappensBtn: document.getElementById('whatHappensBtn'),
startNewGameBtn: document.getElementById('startNewGameBtn'),
movePopup: document.getElementById('movePopup'),
moveInput: document.getElementById('moveInput'),
submitMoveBtn: document.getElementById('submitMoveBtn'),
newGamePopup: document.getElementById('newGamePopup'),
titleInput: document.getElementById('titleInput'),
scenarioInput: document.getElementById('scenarioInput'),
startGameBtn: document.getElementById('startGameBtn'),
timerDisplay: document.getElementById('timerDisplay')
};
// Challenge button click
elements.challengeBtn.addEventListener('click', () => {
challengeCount++;
elements.challengeCounter.textContent = challengeCount;
// Generate random number between 1 and 100
const randomNum = Math.floor(Math.random() * 100) + 1;
if (randomNum <= 10) {
// Successful challenge
const currentText = elements.judgeMove.textContent;
if (currentText.trim()) {
elements.judgeMove.innerHTML = `<span class="strikethrough">${currentText}</span><br>This move was successfully challenged.`;
}
}
});
// What Happens Next button click
elements.whatHappensBtn.addEventListener('click', () => {
elements.movePopup.style.display = 'block';
});
// Submit Move button click
elements.submitMoveBtn.addEventListener('click', () => {
const moveText = elements.moveInput.value;
const judgeMoveHTML = elements.judgeMove.innerHTML;
const judgeMoveText = elements.judgeMove.textContent || elements.judgeMove.innerText;
if (judgeMoveText.trim()) {
const currentGameHTML = elements.currentGame.innerHTML;
elements.currentGame.innerHTML = currentGameHTML +
(currentGameHTML ? '<br><br>' : '') +
judgeMoveHTML +
'<br>Challenges: ' + challengeCount;
}
// Reset challenge counter
challengeCount = 0;
elements.challengeCounter.textContent = '0';
// Move text from Move to Judge Move
elements.judgeMove.textContent = moveText;
// Clear and hide move popup
elements.moveInput.value = '';
elements.movePopup.style.display = 'none';
});
// Start A New Game button click
elements.startNewGameBtn.addEventListener('click', () => {
elements.newGamePopup.style.display = 'block';
});
// Start Game button click
elements.startGameBtn.addEventListener('click', () => {
const title = elements.titleInput.value;
const scenario = elements.scenarioInput.value;
if (!title.trim() && !scenario.trim()) {
alert('Please enter at least a title or scenario');
return;
}
// Start 24 hour timer
startTimer();
// Move Current Game to Old Games
const currentGameHTML = elements.currentGame.innerHTML;
if (currentGameHTML.trim()) {
const oldGamesHTML = elements.oldGames.innerHTML;
elements.oldGames.innerHTML = oldGamesHTML +
(oldGamesHTML ? '<br><br>' : '') +
currentGameHTML;
}
// Clear Current Game
elements.currentGame.innerHTML = '';
// Move Judge Move to Old Games
const judgeMoveHTML = elements.judgeMove.innerHTML;
const judgeMoveText = elements.judgeMove.textContent || elements.judgeMove.innerText;
if (judgeMoveText.trim()) {
const oldGamesHTML = elements.oldGames.innerHTML;
elements.oldGames.innerHTML = oldGamesHTML +
(oldGamesHTML ? '<br>' : '') +
judgeMoveHTML;
}
// Clear Judge Move
elements.judgeMove.innerHTML = '';
// Add title and scenario to Current Game
const newGameText = (title ? `${title}<br>` : '') + scenario;
elements.currentGame.innerHTML = newGameText;
// Clear and hide new game popup
elements.titleInput.value = '';
elements.scenarioInput.value = '';
elements.newGamePopup.style.display = 'none';
});
// Close popups when clicking outside
elements.movePopup.addEventListener('click', (e) => {
if (e.target === elements.movePopup) {
elements.movePopup.style.display = 'none';
}
});
elements.newGamePopup.addEventListener('click', (e) => {
if (e.target === elements.newGamePopup) {
elements.newGamePopup.style.display = 'none';
}
});
// Timer functions
function startTimer() {
// Clear existing timer if any
if (gameTimer) {
clearInterval(gameTimer);
}
// Set timer end time (24 hours from now)
timerEndTime = Date.now() + (24 * 60 * 60 * 1000);
// Show timer display
elements.timerDisplay.style.display = 'block';
// Update timer every second
gameTimer = setInterval(updateTimer, 1000);
updateTimer(); // Update immediately
}
function updateTimer() {
const now = Date.now();
const remaining = timerEndTime - now;
if (remaining <= 0) {
// Timer expired
clearInterval(gameTimer);
gameTimer = null;
elements.timerDisplay.style.display = 'none';
handleTimerExpiry();
return;
}
// Calculate hours, minutes, seconds
const hours = Math.floor(remaining / (1000 * 60 * 60));
const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
elements.timerDisplay.textContent = `Time Remaining: ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
function handleTimerExpiry() {
// Move Current Game to Old Games
const currentGameHTML = elements.currentGame.innerHTML;
if (currentGameHTML.trim()) {
const oldGamesHTML = elements.oldGames.innerHTML;
elements.oldGames.innerHTML = oldGamesHTML +
(oldGamesHTML ? '<br><br>' : '') +
currentGameHTML +
'<br>This game session ran out of time. Please start a new game or put in the title and click Start Game to keep the game going.';
// Clear Current Game
elements.currentGame.innerHTML = '';
}
}
</script>
</body>
</html>