Fix all 5 new games with proper logic flow and Tetris 120 FPS
- Neon Puzzle: Fixed angle normalization, visual feedback for aligned connections - Rhythm Beat: Complete 4-lane system with key indicators and timing-based scoring - Cosmic Arena: Added particle explosion effects - Crystal Tetris: Fixed duplicate shape, proper game over, drop speed scaling, 120 FPS with requestAnimationFrame - Aurora Jumper: Reachable platform placement based on jump physics, proper respawn system
This commit is contained in:
Gemini AI
262
index.html
262
index.html
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>TRAE Aurora | Crystalline Christmas</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -19,8 +19,14 @@
|
||||
<div class="logo">TRAE <span>AURORA</span></div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#hero">Home</a></li>
|
||||
<li><a href="#game">Gift Catcher</a></li>
|
||||
<li><a href="#traoom">Traoom</a></li>
|
||||
<li><a href="#neonpuzzle">Puzzle</a></li>
|
||||
<li><a href="#rhythm">Rhythm</a></li>
|
||||
<li><a href="#arena">Arena</a></li>
|
||||
<li><a href="#tetris">Tetris</a></li>
|
||||
<li><a href="#platformer">Jumper</a></li>
|
||||
<li><a href="#forge">Forge</a></li>
|
||||
<li><a href="#game">Game</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -30,11 +36,11 @@
|
||||
<h1 class="glitch-text" data-text="TRAE CHRISTMAS">TRAE CHRISTMAS</h1>
|
||||
<p class="subtitle">Built using <strong>TRAE.AI IDE</strong>, <a href="https://z.ai/subscribe?ic=R0K78RJKNW" target="_blank" class="glm-link">GLM 4.7</a>, and <strong>Google Gemini 3 Flash</strong>.</p>
|
||||
|
||||
<a href="https://trae9nt2qbd3.vercel.app" target="_blank" class="play-banner">
|
||||
<a href="#game" class="play-banner">
|
||||
<div class="banner-inner">
|
||||
<span class="banner-tag">LIVE NOW</span>
|
||||
<h2 class="banner-title">PLAY TRAE AURORA</h2>
|
||||
<p class="banner-subtitle">Experience the full crystalline adventure on Vercel</p>
|
||||
<p class="banner-subtitle">Experience the full crystalline adventure</p>
|
||||
<div class="banner-glow"></div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -58,9 +64,59 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-icons">
|
||||
<div class="app-icon" onclick="scrollToSection('game')">
|
||||
<div class="app-icon-inner gift-icon">
|
||||
<span class="app-icon-emoji">🎁</span>
|
||||
</div>
|
||||
<span class="app-label">Gift Catcher</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('traoom')">
|
||||
<div class="app-icon-inner traoom-icon">
|
||||
<span class="app-icon-emoji">🐛</span>
|
||||
</div>
|
||||
<span class="app-label">Traoom</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('neonpuzzle')">
|
||||
<div class="app-icon-inner neonpuzzle-icon">
|
||||
<span class="app-icon-emoji">🧩</span>
|
||||
</div>
|
||||
<span class="app-label">Neon Puzzle</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('rhythm')">
|
||||
<div class="app-icon-inner rhythm-icon">
|
||||
<span class="app-icon-emoji">🎵</span>
|
||||
</div>
|
||||
<span class="app-label">Rhythm Beat</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('arena')">
|
||||
<div class="app-icon-inner arena-icon">
|
||||
<span class="app-icon-emoji">⚔️</span>
|
||||
</div>
|
||||
<span class="app-label">Cosmic Arena</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('tetris')">
|
||||
<div class="app-icon-inner tetris-icon">
|
||||
<span class="app-icon-emoji">💎</span>
|
||||
</div>
|
||||
<span class="app-label">Crystal Tetris</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('platformer')">
|
||||
<div class="app-icon-inner platformer-icon">
|
||||
<span class="app-icon-emoji">🏃</span>
|
||||
</div>
|
||||
<span class="app-label">Aurora Jumper</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('forge')">
|
||||
<div class="app-icon-inner forge-icon">
|
||||
<span class="app-icon-emoji">✨</span>
|
||||
</div>
|
||||
<span class="app-label">Message Forge</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<button onclick="scrollToSection('forge')" class="btn-primary">Forge a Message</button>
|
||||
<button onclick="scrollToSection('game')" class="btn-secondary">Play Game</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -78,6 +134,15 @@
|
||||
<p id="outputMessage"></p>
|
||||
<canvas id="snowflakeCanvas"></canvas>
|
||||
</div>
|
||||
<div id="messageCloud" class="message-cloud glass">
|
||||
<h3>Community Cloud</h3>
|
||||
<div id="cloudContainer"></div>
|
||||
<div class="export-buttons">
|
||||
<button class="export-btn" onclick="exportMessages()">Download Messages</button>
|
||||
<button class="export-btn" onclick="document.getElementById('importMessagesFile').click()">Import Messages</button>
|
||||
<input type="file" id="importMessagesFile" accept=".json" style="display:none" onchange="importMessages(event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -89,10 +154,197 @@
|
||||
<div class="game-container" id="gameContainer">
|
||||
<div id="gameUI">
|
||||
<div class="score">Score: <span id="scoreVal">0</span></div>
|
||||
<div class="time-selector">
|
||||
<span class="selector-label">Challenge:</span>
|
||||
<button class="time-btn active" data-time="15">15s</button>
|
||||
<button class="time-btn" data-time="30">30s</button>
|
||||
<button class="time-btn" data-time="60">60s</button>
|
||||
</div>
|
||||
<div id="gameOverlay" class="game-overlay hidden">
|
||||
<h3 id="overlayTitle">GAME OVER</h3>
|
||||
<div class="input-group">
|
||||
<input type="text" id="playerName" placeholder="Enter your name" maxlength="15">
|
||||
<button id="submitScoreBtn" class="btn-primary">Save Score</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="startGameBtn" class="btn-primary">Start Mission</button>
|
||||
</div>
|
||||
<div class="game-timer">
|
||||
<span id="timerDisplay">60s</span>
|
||||
</div>
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
</div>
|
||||
<div class="leaderboard glass">
|
||||
<h3>Leaderboard</h3>
|
||||
<div id="leaderboardList"></div>
|
||||
<div class="export-buttons">
|
||||
<button class="export-btn" onclick="exportLeaderboard()">Download Scores</button>
|
||||
<button class="export-btn" onclick="document.getElementById('importFile').click()">Import Scores</button>
|
||||
<input type="file" id="importFile" accept=".json" style="display:none" onchange="importLeaderboard(event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Traoom Section - Bug Hunter -->
|
||||
<section id="traoom" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Traoom</h2>
|
||||
<p>Fight against code bugs! Use WASD/Arrows to move, Click to shoot.</p>
|
||||
<div class="traoom-container" id="traoomContainer">
|
||||
<div id="traoomUI">
|
||||
<div class="traoom-stats">
|
||||
<div class="traoom-stat">Kills: <span id="killVal">0</span></div>
|
||||
<div class="traoom-stat">Time: <span id="traoomTime">0:00</span></div>
|
||||
<div class="traoom-stat">Wave: <span id="waveVal">1</span></div>
|
||||
</div>
|
||||
<div id="traoomOverlay" class="game-overlay hidden">
|
||||
<h3 id="traoomOverlayTitle">GAME OVER</h3>
|
||||
<p id="traoomOverlayScore">Bugs Fixed: <span id="finalKills">0</span></p>
|
||||
<p id="traoomOverlayTime">Time Survived: <span id="finalTime">0:00</span></p>
|
||||
<button id="restartTraoomBtn" class="btn-primary">Play Again</button>
|
||||
</div>
|
||||
<button id="startTraoomBtn" class="btn-primary">Start Bug Hunt</button>
|
||||
</div>
|
||||
<canvas id="traoomCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> WASD/Arrows to move | Click to shoot | Space to dash</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Neon Puzzle Section -->
|
||||
<section id="neonpuzzle" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Neon Puzzle</h2>
|
||||
<p>Connect neon paths to complete circuits! Click nodes to rotate.</p>
|
||||
<div class="neonpuzzle-container" id="neonpuzzleContainer">
|
||||
<div id="neonpuzzleUI">
|
||||
<div class="neonpuzzle-stats">
|
||||
<div class="neonpuzzle-stat">Level: <span id="puzzleLevel">1</span></div>
|
||||
<div class="neonpuzzle-stat">Moves: <span id="puzzleMoves">0</span></div>
|
||||
</div>
|
||||
<div id="neonpuzzleOverlay" class="game-overlay hidden">
|
||||
<h3 id="puzzleOverlayTitle">LEVEL COMPLETE</h3>
|
||||
<p id="puzzleOverlayScore">Moves: <span id="finalMoves">0</span></p>
|
||||
<button id="nextPuzzleBtn" class="btn-primary">Next Level</button>
|
||||
</div>
|
||||
<button id="startPuzzleBtn" class="btn-primary">Start Puzzle</button>
|
||||
</div>
|
||||
<canvas id="neonpuzzleCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> Click nodes to rotate paths | Complete all connections</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Rhythm Beat Section -->
|
||||
<section id="rhythm" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Rhythm Beat</h2>
|
||||
<p>Hit the beats in sync with the aurora rhythm!</p>
|
||||
<div class="rhythm-container" id="rhythmContainer">
|
||||
<div id="rhythmUI">
|
||||
<div class="rhythm-stats">
|
||||
<div class="rhythm-stat">Score: <span id="rhythmScore">0</span></div>
|
||||
<div class="rhythm-stat">Combo: <span id="rhythmCombo">0</span></div>
|
||||
<div class="rhythm-stat">Streak: <span id="rhythmStreak">0</span></div>
|
||||
</div>
|
||||
<div id="rhythmOverlay" class="game-overlay hidden">
|
||||
<h3 id="rhythmOverlayTitle">BEAT OVER</h3>
|
||||
<p id="rhythmOverlayScore">Final Score: <span id="finalRhythmScore">0</span></p>
|
||||
<button id="restartRhythmBtn" class="btn-primary">Play Again</button>
|
||||
</div>
|
||||
<button id="startRhythmBtn" class="btn-primary">Start Rhythm</button>
|
||||
</div>
|
||||
<canvas id="rhythmCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> Press keys when beats reach center | Perfect timing = more points</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cosmic Arena Section -->
|
||||
<section id="arena" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Cosmic Arena</h2>
|
||||
<p>Duel in the cosmic void! Defeat opponents to survive.</p>
|
||||
<div class="arena-container" id="arenaContainer">
|
||||
<div id="arenaUI">
|
||||
<div class="arena-stats">
|
||||
<div class="arena-stat">HP: <span id="arenaHP">100</span></div>
|
||||
<div class="arena-stat">Kills: <span id="arenaKills">0</span></div>
|
||||
<div class="arena-stat">Wave: <span id="arenaWave">1</span></div>
|
||||
</div>
|
||||
<div id="arenaOverlay" class="game-overlay hidden">
|
||||
<h3 id="arenaOverlayTitle">GAME OVER</h3>
|
||||
<p id="arenaOverlayScore">Enemies Defeated: <span id="finalArenaKills">0</span></p>
|
||||
<button id="restartArenaBtn" class="btn-primary">Play Again</button>
|
||||
</div>
|
||||
<button id="startArenaBtn" class="btn-primary">Enter Arena</button>
|
||||
</div>
|
||||
<canvas id="arenaCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> WASD/Arrows move | Click to attack | Dodge and counter</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tetris Section -->
|
||||
<section id="tetris" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Crystal Tetris</h2>
|
||||
<p>Stack crystals in TRAE aurora style!</p>
|
||||
<div class="neonpuzzle-container" id="tetrisContainer">
|
||||
<div id="tetrisUI">
|
||||
<div class="neonpuzzle-stats">
|
||||
<div class="neonpuzzle-stat">Score: <span id="tetrisScore">0</span></div>
|
||||
<div class="neonpuzzle-stat">Lines: <span id="tetrisLines">0</span></div>
|
||||
<div class="neonpuzzle-stat">Level: <span id="tetrisLevel">1</span></div>
|
||||
</div>
|
||||
<div id="tetrisOverlay" class="game-overlay hidden">
|
||||
<h3 id="tetrisOverlayTitle">GAME OVER</h3>
|
||||
<p id="tetrisOverlayScore">Final Score: <span id="finalTetrisScore">0</span></p>
|
||||
<button id="restartTetrisBtn" class="btn-primary">Play Again</button>
|
||||
</div>
|
||||
<button id="startTetrisBtn" class="btn-primary">Start Game</button>
|
||||
</div>
|
||||
<canvas id="tetrisCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> Arrow keys to move/rotate | Space to drop | Complete lines</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mario Platformer Section -->
|
||||
<section id="platformer" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Aurora Jumper</h2>
|
||||
<p>Jump through crystalline platforms to reach the aurora!</p>
|
||||
<div class="rhythm-container" id="platformerContainer">
|
||||
<div id="platformerUI">
|
||||
<div class="rhythm-stats">
|
||||
<div class="rhythm-stat">Coins: <span id="coinsVal">0</span></div>
|
||||
<div class="rhythm-stat">Time: <span id="platformerTime">0:00</span></div>
|
||||
</div>
|
||||
<div id="platformerOverlay" class="game-overlay hidden">
|
||||
<h3 id="platformerOverlayTitle">LEVEL COMPLETE</h3>
|
||||
<p id="platformerOverlayScore">Coins: <span id="finalCoins">0</span></p>
|
||||
<p id="platformerOverlayTime">Time: <span id="finalPlatformerTime">0:00</span></p>
|
||||
<button id="restartPlatformerBtn" class="btn-primary">Play Again</button>
|
||||
</div>
|
||||
<button id="startPlatformerBtn" class="btn-primary">Start Game</button>
|
||||
</div>
|
||||
<canvas id="platformerCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> WASD/Arrows move | Space to jump | Collect coins</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
650
style.css
650
style.css
@@ -38,6 +38,116 @@ body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-container {
|
||||
padding: 0 5px;
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
padding: 10px 15px;
|
||||
margin-top: 5px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
height: 60vh;
|
||||
min-height: 400px;
|
||||
margin-top: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.game-timer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#timerDisplay {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.time-btn {
|
||||
padding: 6px 15px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.time-selector {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.leader-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.leader-date, .leader-duration {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin: 50px 0;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.section-card h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.forge-input-group {
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.forge-input-group input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-cloud {
|
||||
max-height: 200px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.cloud-msg {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.export-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Glassmorphism Utility */
|
||||
@@ -182,6 +292,8 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 80px 20px 20px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.glitch-text {
|
||||
@@ -260,6 +372,260 @@ body {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* iPhone-style App Icons */
|
||||
.app-icons {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
margin: 40px 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.app-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.app-icon:hover .app-icon-inner {
|
||||
box-shadow: 0 20px 40px rgba(0, 242, 255, 0.3),
|
||||
inset 0 0 30px rgba(0, 242, 255, 0.2);
|
||||
}
|
||||
|
||||
.app-icon-inner {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.gift-icon {
|
||||
background: linear-gradient(135deg, #00ff66, #00cc44);
|
||||
}
|
||||
|
||||
.traoom-icon {
|
||||
background: linear-gradient(135deg, #7000ff, #4a00e0);
|
||||
}
|
||||
|
||||
.forge-icon {
|
||||
background: linear-gradient(135deg, #00f2ff, #0099cc);
|
||||
}
|
||||
|
||||
.app-icon-emoji {
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Neon Puzzle Game Styles */
|
||||
.neonpuzzle-icon {
|
||||
background: linear-gradient(135deg, #ff0066, #ff6600);
|
||||
}
|
||||
|
||||
.neonpuzzle-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
border: 2px solid #ff0066;
|
||||
}
|
||||
|
||||
#neonpuzzleCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.neonpuzzle-stats {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.neonpuzzle-stat {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 1rem;
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.neonpuzzle-stat span {
|
||||
color: #ff0066;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Rhythm Beat Game Styles */
|
||||
.rhythm-icon {
|
||||
background: linear-gradient(135deg, #ffcc00, #ff9900);
|
||||
}
|
||||
|
||||
.rhythm-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
border: 2px solid #ffcc00;
|
||||
}
|
||||
|
||||
#rhythmCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.rhythm-stats {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.rhythm-stat {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 1rem;
|
||||
color: #ff9900;
|
||||
}
|
||||
|
||||
.rhythm-stat span {
|
||||
color: #ffcc00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Cosmic Arena Game Styles */
|
||||
.arena-icon {
|
||||
background: linear-gradient(135deg, #00ffcc, #0066ff);
|
||||
}
|
||||
|
||||
.tetris-icon {
|
||||
background: linear-gradient(135deg, #ff00ff, #ff0066);
|
||||
}
|
||||
|
||||
.platformer-icon {
|
||||
background: linear-gradient(135deg, #00ff00, #00cc00);
|
||||
}
|
||||
|
||||
.arena-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
border: 2px solid #00ffcc;
|
||||
}
|
||||
|
||||
#arenaCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.arena-stats {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.arena-stat {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 1rem;
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.arena-stat span {
|
||||
color: #00ffcc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tetris Game Styles */
|
||||
.tetris-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
border: 2px solid #ff00ff;
|
||||
}
|
||||
|
||||
#tetrisCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Platformer Game Styles */
|
||||
.platformer-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
border: 2px solid #00ff00;
|
||||
}
|
||||
|
||||
#platformerCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.app-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary, .btn-secondary {
|
||||
padding: 15px 35px;
|
||||
@@ -350,11 +716,46 @@ body {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#gameCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.game-timer {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 30px rgba(0, 255, 102, 0.3);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
#timerDisplay {
|
||||
font-family: var(--font-accent);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--trae-green);
|
||||
}
|
||||
|
||||
#timerDisplay.warning {
|
||||
color: #ff3366;
|
||||
animation: pulse 0.5s infinite;
|
||||
}
|
||||
|
||||
#gameUI {
|
||||
@@ -372,6 +773,177 @@ body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Message Cloud */
|
||||
.message-cloud {
|
||||
margin-top: 40px;
|
||||
padding: 30px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message-cloud h3 {
|
||||
font-family: var(--font-accent);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--trae-green);
|
||||
}
|
||||
|
||||
#cloudContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cloud-msg {
|
||||
background: rgba(0, 255, 102, 0.1);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
animation: fadeIn 0.5s ease;
|
||||
border: 1px solid rgba(0, 255, 102, 0.2);
|
||||
}
|
||||
|
||||
/* Game Over Overlay */
|
||||
.game-overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(5, 11, 20, 0.9);
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid var(--trae-green);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.game-overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game-overlay h3 {
|
||||
font-family: var(--font-accent);
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-family: var(--font-accent);
|
||||
font-size: 0.9rem;
|
||||
color: var(--trae-green);
|
||||
}
|
||||
|
||||
.time-btn {
|
||||
background: rgba(0, 255, 102, 0.1);
|
||||
border: 1px solid var(--trae-green);
|
||||
color: var(--trae-green);
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.time-btn:hover {
|
||||
background: rgba(0, 255, 102, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 102, 0.3);
|
||||
}
|
||||
|
||||
.time-btn.active {
|
||||
background: var(--trae-green);
|
||||
color: black;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 102, 0.5);
|
||||
}
|
||||
|
||||
.export-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
background: rgba(0, 242, 255, 0.1);
|
||||
border: 1px solid var(--aurora-cyan);
|
||||
color: var(--aurora-cyan);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
background: rgba(0, 242, 255, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Leaderboard */
|
||||
.leaderboard {
|
||||
margin-top: 40px;
|
||||
padding: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.leaderboard h3 {
|
||||
font-family: var(--font-accent);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: var(--aurora-cyan);
|
||||
}
|
||||
|
||||
.leader-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
font-family: var(--font-accent);
|
||||
}
|
||||
|
||||
.leader-item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.leader-rank { color: var(--trae-green); }
|
||||
.leader-name { flex: 1; margin-left: 20px; }
|
||||
.leader-score { color: var(--aurora-cyan); }
|
||||
.leader-duration { color: #ff9900; font-size: 0.85rem; margin-left: 10px; }
|
||||
.leader-date { color: #888; font-size: 0.8rem; margin-left: 10px; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Footer Links */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 60px 40px;
|
||||
@@ -404,9 +976,87 @@ footer span, .glm-link, .author-link, .gemini-link {
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
/* Traoom Game Styles */
|
||||
.traoom-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
border: 2px solid var(--aurora-purple);
|
||||
}
|
||||
|
||||
#traoomCanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.traoom-stats {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.traoom-stat {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 1rem;
|
||||
color: var(--aurora-cyan);
|
||||
}
|
||||
|
||||
.traoom-stat span {
|
||||
color: var(--trae-green);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.traoom-controls {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: var(--glass-bg);
|
||||
border-radius: 15px;
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.traoom-controls p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.glitch-text { font-size: 3rem; }
|
||||
.countdown-container { flex-wrap: wrap; justify-content: center; }
|
||||
.forge-input-group { flex-direction: column; }
|
||||
.btn-secondary { margin-left: 0; margin-top: 15px; }
|
||||
|
||||
.traoom-container {
|
||||
height: 60vh;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.traoom-stats {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.traoom-stat {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.traoom-controls p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user