CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polybius</title>
<style>
.polybius5391-body {
font-family: 'Courier New', monospace;
background-color: #000;
color: #0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.polybius5391-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.polybius5391-game-area {
border: 2px solid #0f0;
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
background-color: #000;
}
.polybius5391-info {
width: 200px;
}
.polybius5391-title {
font-size: 24px;
margin-bottom: 10px;
text-shadow: 0 0 5px #0f0;
}
.polybius5391-description {
font-size: 14px;
margin-bottom: 20px;
}
.polybius5391-instructions {
font-size: 12px;
margin-bottom: 20px;
}
.polybius5391-button {
background-color: #0f0;
color: #000;
border: none;
padding: 10px 20px;
margin: 5px 0;
cursor: pointer;
width: 100%;
font-family: 'Courier New', monospace;
transition: all 0.3s;
}
.polybius5391-button:hover {
background-color: #000;
color: #0f0;
box-shadow: 0 0 10px #0f0;
}
.polybius5391-stats {
font-size: 14px;
margin-top: 20px;
}
.polybius5391-player {
width: 20px;
height: 20px;
background-color: #0f0;
position: absolute;
border-radius: 50%;
transition: all 0.1s;
}
.polybius5391-object {
position: absolute;
background-color: rgba(255, 0, 0, 0.7);
transition: all 0.2s;
}
.polybius5391-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (max-width: 768px) {
.polybius5391-container {
flex-direction: column;
}
.polybius5391-game-area {
width: 300px;
height: 200px;
}
.polybius5391-info {
width: 300px;
}
}
</style>
</head>
<body class="polybius5391-body">
<div class="polybius5391-container">
<div class="polybius5391-game-area" id="gameArea">
<div class="polybius5391-player" id="player"></div>
<div class="polybius5391-effect" id="effect"></div>
</div>
<div class="polybius5391-info">
<h1 class="polybius5391-title">Polybius</h1>
<p class="polybius5391-description">Enter a world of bizarre experiences and hidden secrets.</p>
<ul class="polybius5391-instructions">
<li>Use arrow keys to move</li>
<li>Collect green objects</li>
<li>Avoid red objects</li>
<li>Discover the truth...</li>
</ul>
<button class="polybius5391-button" id="startButton">Start</button>
<button class="polybius5391-button" id="pauseButton">Pause</button>
<button class="polybius5391-button" id="newGameButton">New Game</button>
<div class="polybius5391-stats" id="stats">
<div>Score: <span id="score">0</span></div>
<div>Level: <span id="level">1</span></div>
<div>Mental State: <span id="mentalState">Stable</span></div>
</div>
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const player = document.getElementById('player');
const effect = document.getElementById('effect');
const startButton = document.getElementById('startButton');
const pauseButton = document.getElementById('pauseButton');
const newGameButton = document.getElementById('newGameButton');
const scoreDisplay = document.getElementById('score');
const levelDisplay = document.getElementById('level');
const mentalStateDisplay = document.getElementById('mentalState');
let score = 0;
let level = 1;
let mentalState = 100;
let gameLoop;
let objects = [];
let isPaused = false;
let playerX = 290;
let playerY = 190;
const messages = [
"Do you really want to continue?",
"Are you sure this is just a game?",
"Your mind is slipping...",
"There's no escape.",
"We are watching you.",
"This is more than a game.",
"Your reality is changing.",
"You can't unsee the truth.",
];
startButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', togglePause);
newGameButton.addEventListener('click', resetGame);
document.addEventListener('keydown', movePlayer);
function startGame() {
if (!gameLoop) {
gameLoop = setInterval(updateGame, 20);
spawnObject();
}
}
function togglePause() {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
}
function resetGame() {
clearInterval(gameLoop);
gameLoop = null;
objects.forEach(obj => obj.remove());
objects = [];
score = 0;
level = 1;
mentalState = 100;
updateStats();
playerX = 290;
playerY = 190;
updatePlayerPosition();
isPaused = false;
pauseButton.textContent = 'Pause';
effect.style.background = 'none';
}
function movePlayer(e) {
if (isPaused) return;
const speed = 5;
switch(e.key) {
case 'ArrowLeft':
playerX = Math.max(0, playerX - speed);
break;
case 'ArrowRight':
playerX = Math.min(gameArea.offsetWidth - 20, playerX + speed);
break;
case 'ArrowUp':
playerY = Math.max(0, playerY - speed);
break;
case 'ArrowDown':
playerY = Math.min(gameArea.offsetHeight - 20, playerY + speed);
break;
}
updatePlayerPosition();
}
function updatePlayerPosition() {
player.style.left = `${playerX}px`;
player.style.top = `${playerY}px`;
}
function spawnObject() {
const obj = document.createElement('div');
obj.classList.add('polybius5391-object');
obj.style.width = `${Math.random() * 30 + 10}px`;
obj.style.height = `${Math.random() * 30 + 10}px`;
obj.style.left = `${Math.random() * (gameArea.offsetWidth - 40)}px`;
obj.style.top = `${Math.random() * (gameArea.offsetHeight - 40)}px`;
if (Math.random() < 0.3) {
obj.style.backgroundColor = 'rgba(0, 255, 0, 0.7)';
obj.dataset.type = 'good';
} else {
obj.style.backgroundColor = 'rgba(255, 0, 0, 0.7)';
obj.dataset.type = 'bad';
}
gameArea.appendChild(obj);
objects.push(obj);
}
function updateGame() {
if (isPaused) return;
objects.forEach((obj, index) => {
const objRect = obj.getBoundingClientRect();
const playerRect = player.getBoundingClientRect();
if (objRect.left < playerRect.right &&
objRect.right > playerRect.left &&
objRect.top < playerRect.bottom &&
objRect.bottom > playerRect.top) {
if (obj.dataset.type === 'good') {
score += 10;
mentalState = Math.min(100, mentalState + 5);
} else {
score -= 5;
mentalState = Math.max(0, mentalState - 10);
applyEffect();
}
obj.remove();
objects.splice(index, 1);
updateStats();
}
});
if (Math.random() < 0.05) {
spawnObject();
}
if (score > level * 100) {
level++;
showMessage(messages[Math.floor(Math.random() * messages.length)]);
}
}
function updateStats() {
scoreDisplay.textContent = score;
levelDisplay.textContent = level;
if (mentalState > 80) mentalStateDisplay.textContent = "Stable";
else if (mentalState > 60) mentalStateDisplay.textContent = "Uneasy";
else if (mentalState > 40) mentalStateDisplay.textContent = "Disturbed";
else if (mentalState > 20) mentalStateDisplay.textContent = "Unstable";
else mentalStateDisplay.textContent = "Insane";
}
function applyEffect() {
const effects = [
'invert(100%)',
'blur(5px)',
'hue-rotate(90deg)',
'saturate(200%)',
'contrast(200%)'
];
effect.style.filter = effects[Math.floor(Math.random() * effects.length)];
setTimeout(() => {
effect.style.filter = 'none';
}, 1000);
}
function showMessage(message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messageElement.style.position = 'absolute';
messageElement.style.top = '50%';
messageElement.style.left = '50%';
messageElement.style.transform = 'translate(-50%, -50%)';
messageElement.style.color = '#0f0';
messageElement.style.fontSize = '24px';
messageElement.style.textAlign = 'center';
messageElement.style.textShadow = '0 0 10px #0f0';
gameArea.appendChild(messageElement);
setTimeout(() => {
messageElement.remove();
}, 3000);
}
// Easter eggs and secrets
let konami = '';
document.addEventListener('keydown', (e) => {
konami += e.key;
if (konami.includes('ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightba')) {
showMessage("You've unlocked the secret... But at what cost?");
effect.style.background = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' viewBox=\'0 0 100 100\'%3E%3Cg fill-rule=\'evenodd\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\'%3E%3Cpath opacity=\'.5\' d=\'M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z\'/%3E%3Cpath d=\'M6 5V0H5v5H0v1h5v94h1V6h94V5H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")';
konami = '';
}
});
</script>
</body>
</html>