ArcadeVerse – Quest & Arcade Edition

by BlazeKoala99
789 lines42.4 KB
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcadeVerse – Quest & Arcade Edition</title>
    <style>
        :root {
            --bg-color: #0b0c10;
            --card-bg: #151821;
            --card-hover: #1f2433;
            --accent-primary: #ff0055;
            --accent-secondary: #00f0ff;
            --accent-glow: rgba(0, 240, 255, 0.25);
            --text-color: #b0b8c8;
            --header-text: #ffffff;
            --border-color: #232838;
            
            --editor-bg: #07080b;
            --editor-text: #00f0ff;
            --profile-banner: #07080b;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
            background-color: var(--card-bg);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .header-left { display: flex; align-items: center; gap: 25px; }

        .logo {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--header-text);
            text-transform: uppercase;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo span {
            color: var(--accent-secondary);
            text-shadow: 0 0 15px var(--accent-glow);
        }

        .player-stats {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #07080b;
            padding: 6px 16px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
        }

        .profile-wrapper-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 2px 8px;
            border-radius: 8px;
            background: var(--profile-banner);
        }

        .player-name-click {
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            border-bottom: 1px dashed var(--accent-secondary);
            transition: color 0.2s;
        }
        .player-name-click:hover { color: var(--accent-secondary); }

        .title-badge {
            background: rgba(255, 0, 85, 0.1);
            color: var(--accent-primary);
            font-size: 0.75rem;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid rgba(255, 0, 85, 0.3);
            text-transform: uppercase;
        }

        .level-badge { color: var(--accent-secondary); font-weight: 900; font-size: 0.9rem; text-transform: uppercase; }
        .xp-bar-container { width: 120px; height: 8px; background: #232838; border-radius: 4px; overflow: hidden; }
        .xp-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); transition: width 0.3s ease; }

        .nav-links { display: flex; gap: 15px; }

        .nav-btn {
            background-color: transparent;
            color: var(--text-color);
            border: 2px solid var(--border-color);
            padding: 10px 22px;
            font-weight: 700;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-btn:hover, .nav-btn.active {
            background-color: var(--accent-secondary);
            color: var(--bg-color);
            border-color: var(--accent-secondary);
            box-shadow: 0 0 20px var(--accent-glow);
            transform: translateY(-2px);
        }

        .main-container {
            flex: 1;
            max-width: 1500px;
            width: 92%;
            margin: 35px auto;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .arcade-layout { display: flex; gap: 30px; }

        @media (max-width: 1100px) {
            .arcade-layout { flex-direction: column; }
            .side-panel { width: 100% !important; }
        }

        .arcade-content { flex: 3; display: flex; flex-direction: column; gap: 20px; }

        .side-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 25px;
            max-width: 400px;
        }

        @media (max-width: 1100px) { .side-panel { max-width: 100%; } }

        .leaderboard-section, .creator-section, .shop-section, .quest-section {
            background-color: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 18px;
            padding: 22px;
            display: flex;
            flex-direction: column;
        }

        .creator-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
        .creator-input {
            background: #07080b; border: 1px solid var(--border-color);
            color: #fff; padding: 10px; border-radius: 8px; outline: none; font-size: 0.9rem;
        }
        .creator-input:focus { border-color: var(--accent-secondary); }
        .creator-row { display: flex; gap: 10px; }

        .leaderboard-title, .creator-title, .shop-title, .quest-title {
            font-size: 1.2rem;
            color: var(--header-text);
            margin: 0 0 15px 0;
            font-weight: 800;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .leaderboard-list { display: flex; flex-direction: column; gap: 10px; max-height: 200px; overflow-y: auto; }
        
        .leaderboard-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #07080b;
            padding: 10px 15px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            font-size: 0.9rem;
        }

        .leaderboard-item.player-row {
            border-color: var(--accent-secondary);
            box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
            background: var(--profile-banner) !important;
        }

        .rank-name { display: flex; flex-direction: column; font-weight: bold; color: #fff; gap: 2px; }
        .rank-meta { display: flex; gap: 10px; align-items: center; }
        .rank-num { color: var(--accent-primary); width: 20px; font-weight: 900; }
        .rank-title { font-size: 0.7rem; color: #aaa; text-transform: uppercase; font-weight: 600; }
        .rank-lvl { color: var(--accent-secondary); font-weight: 800; }

        .shop-list { display: flex; flex-direction: column; gap: 10px; max-height: 220px; overflow-y: auto; }
        .shop-item {
            display: flex; justify-content: space-between; align-items: center;
            background: #07080b; padding: 10px 12px; border-radius: 10px;
            border: 1px solid var(--border-color); font-size: 0.88rem;
        }
        .shop-btn-style {
            background: var(--border-color); color: #fff; border: none;
            padding: 6px 12px; font-weight: bold; border-radius: 6px; cursor: pointer; font-size: 0.8rem;
        }
        .shop-btn-style:hover { background: #3d455c; }
        .shop-btn-style.active-theme { background: var(--accent-secondary); color: #000; }

        /* NEU: Quest-Log Styling */
        .quest-list { display: flex; flex-direction: column; gap: 10px; }
        .quest-item {
            display: flex; justify-content: space-between; align-items: center;
            background: #07080b; padding: 10px 12px; border-radius: 10px;
            border: 1px solid var(--border-color); font-size: 0.85rem;
        }
        .quest-item.completed { border-color: rgba(0, 240, 255, 0.4); background: rgba(0, 240, 255, 0.02); }
        .quest-txt { display: flex; flex-direction: column; gap: 2px; }
        .quest-reward { color: var(--accent-secondary); font-weight: bold; font-size: 0.75rem; }
        .quest-check { font-size: 1.1rem; }

        .hub-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
        .search-bar { background-color: var(--card-bg); border: 2px solid var(--border-color); padding: 14px 22px; border-radius: 30px; color: #fff; width: 320px; outline: none; transition: all 0.3s ease; }
        .search-bar:focus { border-color: var(--accent-secondary); box-shadow: 0 0 15px var(--accent-glow); }

        #arcade-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
        .game-card { background-color: var(--card-bg); border-radius: 18px; overflow: hidden; border: 2px solid var(--border-color); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; position: relative; }
        .game-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 35px rgba(0, 240, 255, 0.12); border-color: var(--accent-secondary); background-color: var(--card-hover); }
        .game-thumbnail { height: 180px; background: linear-gradient(135deg, #1b2030, #0f1016); display: flex; align-items: center; justify-content: center; font-size: 4rem; position: relative; }
        .game-badge { position: absolute; top: 12px; right: 12px; background-color: var(--accent-primary); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 5px 12px; border-radius: 20px; text-transform: uppercase; }
Verwende Code mit Vorsicht.
.game-info { padding: 22px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 15px; }
.game-title { font-size: 1.25rem; color: var(--header-text); margin: 0 0 8px 0; font-weight: 700; }
.game-desc { font-size: 0.88rem; color: var(--text-color); margin: 0; line-height: 1.5; }
.card-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.like-btn { background: #1b2030; border: 1px solid var(--border-color); color: #ff477e; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
.like-btn:hover { background: #252d44; }
.play-btn { flex: 1; background: linear-gradient(135deg, var(--accent-secondary), #0088ff); color: var(--bg-color); border: none; padding: 12px; font-weight: 800; border-radius: 12px; cursor: pointer; text-align: center; transition: opacity 0.2s, transform 0.2s; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; }
.play-btn:hover { opacity: 0.9; transform: scale(1.02); }
#studio-view { display: none; flex-direction: row; gap: 25px; min-height: 78vh; }
@media (max-width: 950px) { #studio-view { flex-direction: column; } }
.editor-section, .output-section { flex: 1; background-color: var(--card-bg); padding: 22px; border-radius: 18px; border: 2px solid var(--border-color); display: flex; flex-direction: column; position: relative; }
.section-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 14px; margin-bottom: 15px; z-index: 5; }
h2 { margin: 0; font-size: 1.1rem; color: var(--header-text); display: flex; align-items: center; gap: 8px; }
textarea { flex: 1; background-color: var(--editor-bg); color: var(--editor-text); font-family: 'Fira Code', 'Courier New', monospace; font-size: 0.95rem; padding: 18px; border: 1px solid var(--border-color); border-radius: 12px; resize: none; outline: none; line-height: 1.6; min-height: 250px; transition: background 0.3s, color 0.3s; }
.controls { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
button.action-btn { background-color: var(--border-color); color: #fff; border: none; padding: 12px 24px; font-weight: 700; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; }
button.action-btn:hover { background-color: #2e354a; }
#run-btn { background: linear-gradient(135deg, var(--accent-secondary), #0088ff); color: var(--bg-color); }
#update-btn { background: linear-gradient(135deg, var(--accent-primary), #ff00c8); color: #fff; }
#share-btn { background: #252538; color: #fff; border: 1px solid #3d3d5c; }
#random-btn { background: #1f1f2e; color: #e0e0ff; border: 1px solid #4d4d70; }
#random-btn:hover { background: #2d2d44; }
#export-btn { background: #1b2a1c; color: #a2ffa6; border: 1px solid #2e4d30; }
#import-label-btn { background: #2e231b; color: #ffca94; border: 1px solid #4d3a2b; display: inline-block; padding: 12px 24px; font-weight: 700; border-radius: 10px; cursor: pointer; text-align: center; }
#import-file-input { display: none; }
/* NEU: Snake Game Controller Knopf im Studio Header */
#play-snake-btn { background: linear-gradient(135deg, #39ff14, #00aa00); color: #000; font-weight: 900; padding: 6px 14px; font-size: 0.85rem; border-radius: 8px; border: none; cursor: pointer; display: none; }
.terminal-container { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 200px; margin-bottom: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); }
#matrix-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* NEU: Unsichtbares Spiele Canvas über dem Terminal */
#game-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; display: none; background: #000; }
#output { flex: 1; background-color: rgba(7, 8, 11, 0.85); padding: 18px; font-family: 'Courier New', monospace; color: #ffffff; white-space: pre-wrap; overflow-y: auto; z-index: 2; }
.input-area { display: flex; gap: 10px; margin-bottom: 20px; z-index: 3; }
#game-input { flex: 1; background-color: #07080b; border: 1px solid var(--border-color); color: #fff; padding: 12px; border-radius: 10px; font-family: monospace; outline: none; }
#game-input:focus { border-color: var(--accent-secondary); }
#send-input-btn { background-color: #232838; padding: 0 20px; }
.social-zone { border-top: 1px solid var(--border-color); padding-top: 15px; z-index: 3; }
.social-zone h3 { font-size: 1rem; color: var(--header-text); margin: 0 0 10px 0; }
.comment-input-wrap { display: flex; gap: 10px; margin-bottom: 12px; }
.comment-box { flex: 1; background: #07080b; border: 1px solid var(--border-color); color: #fff; padding: 10px; border-radius: 8px; outline: none; font-size: 0.9rem; }
.comments-list { max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.comment-item { background: #1b2030; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; line-height: 1.4; }
.comment-item span { color: var(--accent-secondary); font-weight: bold; }
.output-section.fullscreen-mode { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; box-sizing: border-box; border-radius: 0; background-color: #050508; padding: 40px; border: none; }


Entdecke hochgeladene Games



🏆 Quest-Log (Erfolge)

🏆 Hall of Fame (Top-Devs)

💎 Cyber-Cosmetics Shop

🛠️ Eigenes Spiel verlegen
Veröffentliche den aktuellen Editor-Code als neue Karte im Hub!







Karte erstellen (+150 XP)



⚙️ Python Code-Editor





System bereit!

📦 Backup .json
📥 Import .json
🎲 Zufalls-Code
🔗 Link kopieren
Speichern
Spiel starten


🖥️ Live-Ausgabe
🐍 Snake spielen
🖵 Vollbild

Wähle ein Spiel oder klicke auf 'Spiel starten'!
Senden
💬 Community Feedback


Posten





let currentInputCallback = null;
let variables = {};
let matrixSpeedMultiplier = 1;
// Speicher-Zustände
let socialData = JSON.parse(localStorage.getItem('arcade_social')) || {
game1: { likes: 42, comments: ["Krasses Konzept!", "Macht mega Bock!"] },
adventure: { likes: 18, comments: ["Der Baumwipfel-Pfad war wild.", "Spannendes Abenteuer!"] },
clicker: { likes: 5, comments: ["Nützlich für Code-Einsteiger."] },
ninja: { likes: 89, comments: ["EPISCH! Cyber-Ninja rasiert komplett 🔥", "Der Vulkan-Krater-Kampf ist schwer!"] }
};
let playerData = JSON.parse(localStorage.getItem('arcade_player')) || { xp: 0, level: 1, name: "Player 1" };
let unlockedThemes = JSON.parse(localStorage.getItem('arcade_themes')) || ['cyberpunk'];
let activeTheme = localStorage.getItem('arcade_active_theme') || 'cyberpunk';
let unlockedAvatars = JSON.parse(localStorage.getItem('arcade_avatars')) || ['🎮'];
let activeAvatar = localStorage.getItem('arcade_active_avatar') || '🎮';
let unlockedBanners = JSON.parse(localStorage.getItem('arcade_banners')) || ['default'];
let activeBanner = localStorage.getItem('arcade_active_banner') || 'default';
// NEU: Tracker für erfüllte Quests im localStorage
let completedQuests = JSON.parse(localStorage.getItem('arcade_quests')) || [];
const highscoreBots = [
{ name: "CyberNinja99", level: 12, title: "Cyber-Master", avatar: "🥷", banner: "linear-gradient(90deg, #ff0055, #330011)" },
{ name: "CodeGuru", level: 9, title: "Code-Söldner", avatar: "🤖", banner: "#111" },
{ name: "ScriptKiddie", level: 5, title: "Code-Söldner", avatar: "🤖", banner: "#111" },
{ name: "PythonPrincess", level: 3, title: "Script-Anfänger", avatar: "👑", banner: "#111" }
];
let defaultGames = JSON.parse(localStorage.getItem('arcade_codes')) || {
game1: print("Willkommen beim globalen Hauptspiel!")\nprint("Hier kannst du deinen eigenen Code reinschreiben.")\nzahl = 5\nprint(f"Die Zahl ist: {zahl}"),
adventure: print("--- DER GEHEIME WALD ---")\nprint("Du stehst vor einer Weggabelung.")\nrichtung = input("Wohin gehst du? (links/rechts): ")\n\nif richtung == "links":\n print("[GEWONNEN] Du findest eine Truhe voller Gold!")\nelse:\n print("[GAME OVER] Ein Monster hat dich erwischt."),
clicker: print("--- RECHNER START ---")\nfor i in range(1, 4):\n print(f"Schleifendurchlauf {i} läuft...")\nprint("Fertig!"),
ninja: print("=== NINJA MASTER ARENA ===")\nprint("Wähle deine Klasse:")\nprint("1: Klassischer Shinobi")\nprint("2: Schatten-Ninja")\nprint("3: Cyber-Ninja")\nklasse = input("Wähle 1, 2 oder 3: ")\n\nskin = "Shinobi"\nif klasse == "2":\n skin = "Schatten-Ninja"\nif klasse == "3":\n skin = "Cyber-Ninja"\n\nprint(f"\\nDu betrittst das Turnier als {skin}!")\nprint("Wähle das Schlachtfeld:")\nprint("A: Bambuswald\\nB: Cyber-Dojo\\nC: Vulkan-Krater")\nmap_choice = input("Wähle A, B oder C: ")\n\narena = "Bambuswald"\nif map_choice.lower() == "b":\n arena = "Cyber-Dojo"\nif map_choice.lower() == "c":\n arena = "Vulkan-Krater"\n\nprint(f"\\n--- KAMPF START IM {arena.upper()} ---")\nprint("Ein feindlicher Ronin stürmt auf dich zu!")\naktion = input("Was tust du? (angriff / konter): ")\n\nif aktion.lower() == "konter":\n print(f"\\n[SIEG] Perfekt! Als {skin} weichst du aus und landest den finalen Treffer! Du bist der Champion des {arena}s!")\nelse:\n print("\\n[NIEDERLAGE] Der Ronin war zu schnell. Trainiere härter, junger Ninja!")
};
let gamesMetadata = JSON.parse(localStorage.getItem('arcade_meta')) || [
{ id: 'game1', title: 'Globales Live-Spiel', desc: 'Das von der Community modifizierbare Hauptspiel im Live-Slot.', icon: '🌐', badge: 'Live' },
{ id: 'adventure', title: 'Der geheime Wald', desc: 'Ein interaktives Text-Abenteuer mit folgenschweren Entscheidungen.', icon: '🌲', badge: 'Adventure' },
{ id: 'clicker', title: 'Zahlen-Zähler', desc: 'Ein strukturierter Schleifen-Rechner zur Code-Demonstration.', icon: '🔢', badge: 'Utility' },
{ id: 'ninja', title: 'Ninja Master Arena', desc: 'Action Kampf mit Klassen-Wahl, verschiedenen Maps und rundenbasiertem Duell-System.', icon: '🥷', badge: 'Action' }
];
const themesPool = [
{ type: 'theme', id: 'cyberpunk', name: '🎨 Editor: Cyberpunk Neon', cost: 0, bg: '#07080b', text: '#00f0ff' },
{ type: 'theme', id: 'whiteout', name: '🎨 Editor: Hacker Whiteout', cost: 200, bg: '#f4f5f7', text: '#111116' },
{ type: 'theme', id: 'matrix', name: '🎨 Editor: Matrix Overload', cost: 500, bg: '#020d04', text: '#39ff14' },
{ type: 'theme', id: 'gold', name: '🎨 Editor: Arcade Gold', cost: 1000, bg: '#100c00', text: '#ffd700' },
{ type: 'avatar', id: '👾', name: '👾 Avatar: Alien Invader', cost: 150 },
{ type: 'avatar', id: '🥷', name: '🥷 Avatar: Elite Shinobi', cost: 300 },
{ type: 'avatar', id: '👑', name: '👑 Avatar: Gold-Krone', cost: 600 },
{ type: 'banner', id: 'glitch', name: '✨ Banner: Neon-Glitch', cost: 250, value: 'linear-gradient(90deg, #ff0055, #00f0ff)' },
{ type: 'banner', id: 'royal', name: '✨ Banner: Goldener Glanz', cost: 500, value: 'linear-gradient(90deg, #ffd700, #b8860b)' },
// NEU: Das Minigame-Ticket im Shop-Pool hinterlegt
{ type: 'ticket', id: 'snake_ticket', name: '🎮 Arcade-Ticket: Snake-Game', cost: 150 }
];
// NEU: Quests-Definitionen
const questsPool = [
{ id: 'compile', title: 'Erster Code-Compile', desc: 'Führe erfolgreich ein beliebiges Python-Skript aus.', reward: 50 },
{ id: 'feedback', title: 'Community-Feedbacker', desc: 'Hinterlasse einen Live-Kommentar unter einem Spiel.', reward: 50 },
{ id: 'publish', title: 'Plattform-Verleger', desc: 'Veröffentliche eine eigene Spielekarte im Hub.', reward: 150 }
];
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playSound(type) {
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain); gain.connect(audioCtx.destination);
if (type === 'coin') {
osc.type = 'square'; osc.frequency.setValueAtTime(587.33, audioCtx.currentTime); osc.frequency.setValueAtTime(880, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.1, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
}
else if (type === 'laser') {
osc.type = 'sawtooth'; osc.frequency.setValueAtTime(800, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(150, audioCtx.currentTime + 0.4);
gain.gain.setValueAtTime(0.1, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.4);
osc.start(); osc.stop(audioCtx.currentTime + 0.4);
}
else if (type === 'levelup') {
osc.type = 'triangle'; const notes = [261.63, 329.63, 392.00, 523.25];
notes.forEach((freq, idx) => { osc.frequency.setValueAtTime(freq, audioCtx.currentTime + idx * 0.1); });
gain.gain.setValueAtTime(0.15, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.6);
osc.start(); osc.stop(audioCtx.currentTime + 0.6);
}
}
function getRankTitle(lvl) {
if (lvl >= 15) return "Arcade-Gott";
if (lvl >= 10) return "Cyber-Master";
if (lvl >= 5) return "Code-Söldner";
return "Script-Anfänger";
}
function changeProfileName() {
let newName = prompt("Gib deinen neuen Profilnamen ein:", playerData.name);
if (newName && newName.trim() !== "") {
playerData.name = newName.trim().substring(0, 16);
localStorage.setItem('arcade_player', JSON.stringify(playerData));
playSound('coin');
updateStatsUI();
}
}
function addXP(amount) {
playerData.xp += amount;
let xpNeeded = playerData.level * 200;
if (playerData.xp >= xpNeeded) {
playerData.xp -= xpNeeded;
playerData.level++;
setTimeout(() => playSound('levelup'), 300);
alert(🎉 LEVEL UP! Du bist jetzt Level ${playerData.level}!);
}
localStorage.setItem('arcade_player', JSON.stringify(playerData));
updateStatsUI();
}
// NEU: Überprüft und triggert Erfolge im Questlog
function triggerQuest(id) {
if (completedQuests.includes(id)) return;
const quest = questsPool.find(q => q.id === id);
if (quest) {
completedQuests.push(id);
localStorage.setItem('arcade_quests', JSON.stringify(completedQuests));
addXP(quest.reward);
renderQuests();
document.getElementById('status').innerText = 🏆 Quest gelöst: ${quest.title}!;
}
}
function updateStatsUI() {
document.getElementById('profile-name').innerText = playerData.name;
document.getElementById('profile-avatar-header').innerText = activeAvatar;
document.getElementById('title-display').innerText = getRankTitle(playerData.level);
document.getElementById('level-display').innerText = LVL ${playerData.level};
let xpNeeded = playerData.level * 200;
let percent = (playerData.xp / xpNeeded) * 100;
document.getElementById('xp-fill').style.width = ${percent}%;
// Kontrolliert Sichtbarkeit des Snake-Game Buttons bei Ticket-Kauf
if (unlockedThemes.includes('snake_ticket')) {
document.getElementById('play-snake-btn').style.display = 'block';
}
applyCosmeticsConfig();
renderLeaderboard();
populateDropdown();
renderShop();
renderQuests();
}
// NEU: Rendert Quests live in die Seitenleiste
function renderQuests() {
const container = document.getElementById('quest-container');
if(!container) return;
container.innerHTML = "";
questsPool.forEach(quest => {
const isDone = completedQuests.includes(quest.id);
const div = document.createElement('div');
div.className = isDone ? 'quest-item completed' : 'quest-item';
div.innerHTML = <div class="quest-txt"> <span style="font-weight:bold; color:${isDone ? '#00f0ff' : '#fff'};">${quest.title}</span> <span style="font-size:0.75rem; color:#888;">${quest.desc}</span> <span class="quest-reward">+${quest.reward} XP</span> </div> <span class="quest-check">${isDone ? '✅' : '🔒'}</span>;
container.appendChild(div);
});
}
function applyCosmeticsConfig() {
const currentTheme = themesPool.find(t => t.id === activeTheme);
if (currentTheme) {
document.documentElement.style.setProperty('--editor-bg', currentTheme.bg);
document.documentElement.style.setProperty('--editor-text', currentTheme.text);
}
const currentBanner = themesPool.find(b => b.id === activeBanner);
document.documentElement.style.setProperty('--profile-banner', currentBanner ? currentBanner.value : "#07080b");
}
function renderLeaderboard() {
const container = document.getElementById('leaderboard-container');
if(!container) return; container.innerHTML = "";
let bannerStyleValue = themesPool.find(b => b.id === activeBanner)?.value || "#07080b";
let allDevs = [...highscoreBots, { name: playerData.name, level: playerData.level, title: getRankTitle(playerData.level), avatar: activeAvatar, banner: bannerStyleValue, isPlayer: true }];
allDevs.sort((a, b) => b.level - a.level);
allDevs.forEach((dev, index) => {
const item = document.createElement('div');
item.className = dev.isPlayer ? 'leaderboard-item player-row' : 'leaderboard-item';
if (dev.isPlayer) item.style.background = dev.banner;
item.innerHTML = <div class="rank-name"> <div class="rank-meta"> <span class="rank-num">#${index + 1}</span> <span style="font-size:1.1rem; margin-right:4px;">${dev.avatar}</span> <span>${dev.name}</span> </div> <span class="rank-title">${dev.title}</span> </div> <span class="rank-lvl">LVL ${dev.level}</span>;
container.appendChild(item);
});
}
function renderShop() {
const container = document.getElementById('shop-container');
if(!container) return; container.innerHTML = "";
themesPool.forEach(itemConfig => {
let isUnlocked = false;
let isActive = false;
if(itemConfig.type === 'theme' || itemConfig.type === 'ticket') {
isUnlocked = unlockedThemes.includes(itemConfig.id);
isActive = activeTheme === itemConfig.id;
} else if(itemConfig.type === 'avatar') {
isUnlocked = unlockedAvatars.includes(itemConfig.id);
isActive = activeAvatar === itemConfig.id;
} else if(itemConfig.type === 'banner') {
isUnlocked = unlockedBanners.includes(itemConfig.id);
isActive = activeBanner === itemConfig.id;
}
let btnText = Kaufen (${itemConfig.cost} XP);
let btnClass = "shop-btn-style";
if (isUnlocked) {
btnText = (itemConfig.type === 'ticket') ? "Freigeschaltet" : (isActive ? "Ausrüstung" : "Ausrüsten");
if(isActive) btnClass += " active-theme";
}
const row = document.createElement('div');
row.className = 'shop-item';
row.innerHTML = <span style="font-weight: bold;">${itemConfig.name}</span> <button class="${btnClass}" onclick="handleShopPurchase('${itemConfig.type}', '${itemConfig.id}', ${itemConfig.cost})">${btnText}</button>;
container.appendChild(row);
});
}
function handleShopPurchase(type, id, cost) {
let inventory = [];
if(type === 'theme' || type === 'ticket') inventory = unlockedThemes;
if(type === 'avatar') inventory = unlockedAvatars;
if(type === 'banner') inventory = unlockedBanners;
if (inventory.includes(id)) {
if(type === 'theme') activeTheme = id;
if(type === 'avatar') activeAvatar = id;
if(type === 'banner') activeBanner = id;
localStorage.setItem('arcade_active_theme', activeTheme);
localStorage.setItem('arcade_active_avatar', activeAvatar);
localStorage.setItem('arcade_active_banner', activeBanner);
playSound('coin');
} else {
if (playerData.level * 150 >= cost || playerData.xp >= cost) {
playerData.xp = Math.max(0, playerData.xp - cost);
inventory.push(id);
if(type === 'theme' || type === 'ticket') { localStorage.setItem('arcade_themes', JSON.stringify(unlockedThemes)); if(type === 'theme') activeTheme = id; }
if(type === 'avatar') { activeAvatar = id; localStorage.setItem('arcade_avatars', JSON.stringify(unlockedAvatars)); localStorage.setItem('arcade_active_avatar', activeAvatar); }
if(type === 'banner') { activeBanner = id; localStorage.setItem('arcade_banners', JSON.stringify(unlockedBanners)); localStorage.setItem('arcade_active_banner', activeBanner); }
playSound('levelup');
alert(💎 Freigeschaltet!);
} else {
alert("⚠️ Zu wenig XP!");
return;
}
}
updateStatsUI();
}
function exportDataJSON() {
const backupPayload = { social: socialData, player: playerData, codes: defaultGames, meta: gamesMetadata, themes: unlockedThemes, activeTheme: activeTheme, avatars: unlockedAvatars, activeAvatar: activeAvatar, banners: unlockedBanners, activeBanner: activeBanner, quests: completedQuests };
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(backupPayload));
const dlAnchor = document.createElement('a');
dlAnchor.setAttribute("href", dataStr); dlAnchor.setAttribute("download", "arcadeverse_backup.json");
document.body.appendChild(dlAnchor); dlAnchor.click(); dlAnchor.remove();
playSound('levelup');
}
function importDataJSON(event) {
const fileReader = new FileReader();
fileReader.onload = function(e) {
try {
const parsed = JSON.parse(e.target.result);
if (parsed.player && parsed.codes) {
socialData = parsed.social || socialData; playerData = parsed.player; defaultGames = parsed.codes; gamesMetadata = parsed.meta; unlockedThemes = parsed.themes || unlockedThemes; activeTheme = parsed.activeTheme || activeTheme; unlockedAvatars = parsed.avatars || unlockedAvatars; activeAvatar = parsed.activeAvatar || activeAvatar; unlockedBanners = parsed.banners || unlockedBanners; activeBanner = parsed.activeBanner || activeBanner; completedQuests = parsed.quests || completedQuests;
localStorage.setItem('arcade_social', JSON.stringify(socialData)); localStorage.setItem('arcade_player', JSON.stringify(playerData)); localStorage.setItem('arcade_codes', JSON.stringify(defaultGames)); localStorage.setItem('arcade_meta', JSON.stringify(gamesMetadata)); localStorage.setItem('arcade_themes', JSON.stringify(unlockedThemes)); localStorage.setItem('arcade_active_theme', activeTheme); localStorage.setItem('arcade_avatars', JSON.stringify(unlockedAvatars)); localStorage.setItem('arcade_active_avatar', activeAvatar); localStorage.setItem('arcade_banners', JSON.stringify(unlockedBanners)); localStorage.setItem('arcade_active_banner', activeBanner); localStorage.setItem('arcade_quests', JSON.stringify(completedQuests));
playSound('levelup'); alert("Backup eingespielt!"); location.reload();
}
} catch(err) { alert("Fehler beim Einlesen."); }
};
fileReader.readAsText(event.target.files);
}
function publishCustomGame() {
const titleInput = document.getElementById('new-game-title');
const descInput = document.getElementById('new-game-desc');
const iconInput = document.getElementById('new-game-icon');
const badgeInput = document.getElementById('new-game-badge');
const title = titleInput.value.trim(); const desc = descInput.value.trim(); const icon = iconInput.value.trim() || "🚀"; const badge = badgeInput.value.trim() || "User";
const currentCode = document.getElementById('code-editor').value;
if (title === "" || desc === "") { alert("Bitte gib Daten ein!"); return; }
const gameId = 'custom_' + Date.now();
defaultGames[gameId] = currentCode; gamesMetadata.push({ id: gameId, title: title, desc: desc, icon: icon, badge: badge }); socialData[gameId] = { likes: 0, comments: ["Frisch verlegt!"] };
localStorage.setItem('arcade_codes', JSON.stringify(defaultGames)); localStorage.setItem('arcade_meta', JSON.stringify(gamesMetadata)); localStorage.setItem('arcade_social', JSON.stringify(socialData));
titleInput.value = ""; descInput.value = ""; iconInput.value = ""; badgeInput.value = "";
playSound('levelup'); addXP(150); triggerQuest('publish'); // Triggert die Publish-Quest
renderArcadeGrid(); populateDropdown();
}
function populateDropdown() {
const select = document.getElementById('games-select'); if(!select) return;
const currentVal = select.value || "game1"; select.innerHTML = "";
gamesMetadata.forEach(game => {
select.innerHTML += <option value="${game.id}">${game.id.startsWith('custom_') ? '🛠️ ' : ''}${game.title}</option>;
});
select.value = currentVal;
}
function generateRandomCode() {
const randomIndex = Math.floor(Math.random() * randomScripts.length);
const script = randomScripts[randomIndex];
document.getElementById('code-editor').value = script.code;
document.getElementById('output').innerText = Code für '${script.title}' geladen!;
playSound('coin');
}
function switchView(view) {
const arcadeWrapper = document.getElementById('arcade-wrapper');
const studioView = document.getElementById('studio-view');
const navArcade = document.getElementById('nav-arcade');
const navStudio = document.getElementById('nav-studio');
if (view === 'arcade') {
arcadeWrapper.style.display = 'flex'; studioView.style.display = 'none';
navArcade.classList.add('active'); navStudio.classList.remove('active');
} else {
arcadeWrapper.style.display = 'none'; studioView.style.display = 'flex';
navArcade.classList.remove('active'); navStudio.classList.add('active');
loadComments(); resizeCanvas();
}
}
function renderArcadeGrid() {
const grid = document.getElementById('arcade-view'); grid.innerHTML = "";
gamesMetadata.forEach(game => {
const likes = socialData[game.id] ? socialData[game.id].likes : 0;
grid.innerHTML += <div class="game-card" onclick="openStudioGame('${game.id}')"> <div class="game-thumbnail">${game.icon}<span class="game-badge">${game.badge}</span></div> <div class="game-info"> <div><h3 class="game-title">${game.title}</h3><p class="game-desc">${game.desc}</p></div> <div class="card-footer-actions"> <button class="like-btn" onclick="addLike(event, '${game.id}')">❤️ <span>${likes}</span></button> <button class="play-btn">Code & Start</button> </div> </div> </div>;
});
}
function openStudioGame(id) {
document.getElementById('games-select').value = id;
loadSelectedGame(); switchView('studio');
}
function filterGames() {
const query = document.getElementById('search-games').value.toLowerCase();
document.querySelectorAll('.game-card').forEach((card, index) => {
const meta = gamesMetadata[index];
card.style.display = (meta.title.toLowerCase().includes(query) || meta.desc.toLowerCase().includes(query)) ? 'flex' : 'none';
});
}
function toggleFullscreen() {
document.getElementById('output-box').classList.toggle('fullscreen-mode');
setTimeout(resizeCanvas, 50);
}
function loadSelectedGame() {
const selection = document.getElementById('games-select').value;
if (defaultGames[selection]) {
document.getElementById('code-editor').value = defaultGames[selection];
document.getElementById('output').innerText = "Spiel geladen. Klicke auf 'Spiel starten'!";
loadComments();
// Blendet das Canvas aus, falls noch ein aktives Snake-Game lief
document.getElementById('game-canvas').style.display = 'none';
}
}
function loadComments() {
const selection = document.getElementById('games-select').value;
const container = document.getElementById('comments-container'); container.innerHTML = "";
if (socialData[selection] && socialData[selection].comments) {
socialData[selection].comments.forEach(comment => {
container.innerHTML += <div class="comment-item"><span>Gamer:</span> ${comment}</div>;
});
}
container.scrollTop = container.scrollHeight;
}
function addComment() {
const selection = document.getElementById('games-select').value;
const input = document.getElementById('new-comment'); const text = input.value.trim(); if (text === "") return;
socialData[selection].comments.push(text); localStorage.setItem('arcade_social', JSON.stringify(socialData));
playSound('coin'); input.value = ""; loadComments(); addXP(25); triggerQuest('feedback'); // Quest triggern
}
function shareGame() {
const currentCode = document.getElementById('code-editor').value;
const encodedCode = btoa(unescape(encodeURIComponent(currentCode)));
navigator.clipboard.writeText(${window.location.origin}${window.location.pathname}?code=${encodedCode}).then(() => {
document.getElementById('status').innerText = "Link kopiert!"; setTimeout(() => { document.getElementById('status').innerText = "System bereit!"; }, 2000);
});
}
// Python Interpreter
function runPythonGame() {
playSound('laser'); addXP(50); triggerQuest('compile'); // Quest triggern
const code = document.getElementById('code-editor').value; const outputDiv = document.getElementById('output');
outputDiv.innerHTML = ""; variables = {}; const lines = code.split('\n'); let i = 0; let skipElse = false; let conditionMet = true;
function executeLines() {
while (i < lines.length) {
let line = lines[i]; let trimmed = line.trim(); i++;
if (trimmed === "" || trimmed.startsWith("#")) continue;
let indent = line.length - line.trimStart().length;
if (!conditionMet && indent > 0) continue;
if (trimmed.includes('=') && !trimmed.startsWith('if ') && !trimmed.includes('==')) {
let parts = trimmed.split('='); let varName = parts[0].trim(); let varVal = parts[1].trim();
if (varVal.startsWith('input(')) {
outputDiv.innerHTML += varVal.substring(varVal.indexOf('(') + 1, varVal.lastIndexOf(')')).replace(/['"]/g, '').replace(/\n/g, '\n');
document.getElementById('game-input').disabled = false; document.getElementById('send-input-btn').disabled = false; document.getElementById('game-input').focus();
currentInputCallback = (inputValue) => { variables[varName] = inputValue.trim().toLowerCase(); executeLines(); }; return;
} else { variables[varName] = varVal.replace(/['"]/g, '').trim(); continue; }
}
if (trimmed.startsWith('print(')) {
let content = trimmed.substring(trimmed.indexOf('(') + 1, trimmed.lastIndexOf(')')); let isFString = content.startsWith('f"') || content.startsWith("f'"); let text = content.replace(/^f?['"]|['"]$/g, '');
if (isFString) { for (let key in variables) { text = text.replace('{' + key + '}', variables[key]); } }
outputDiv.innerHTML += text.replace(/\n/g, '\n') + '\n'; outputDiv.scrollTop = outputDiv.scrollHeight;
}
if (trimmed.startsWith('for ') && trimmed.includes('range')) {
let rangeParts = trimmed.substring(trimmed.indexOf('(') + 1, trimmed.indexOf(')')).split(',');
for (let val = parseInt(rangeParts[0]); val < parseInt(rangeParts[1]); val++) { outputDiv.innerHTML += Schleifendurchlauf ${val} läuft...\n; }
while (i < lines.length && (lines[i].length - lines[i].trimStart().length) > 0) { i++; } continue;
}
if (trimmed.startsWith('if ')) {
let condition = trimmed.substring(3, trimmed.lastIndexOf(':')).trim(); let parts = condition.split('==');
if (variables[parts[0].trim()] === parts[1].trim().replace(/['"]/g, '')) { conditionMet = true; skipElse = true; }
else { conditionMet = false; skipElse = false; }
}
if (trimmed.startsWith('else:')) { conditionMet = !skipElse; }
}
}
executeLines();
}
function sendInputToGame() {
const inputField = document.getElementById('game-input'); const value = inputField.value.trim(); if (value === "") return;
if(value.toLowerCase() === 'godmode') { document.getElementById('output').innerHTML += "[CHEAT] GODMODE AKTIVIERT! +1000 XP!\n"; inputField.value = ""; addXP(1000); return; }
if(value.toLowerCase() === 'matrix') { matrixSpeedMultiplier = matrixSpeedMultiplier === 1 ? 4 : 1; document.getElementById('output').innerHTML += <span style='color:#39ff14;'>[CHEAT] Matrix x${matrixSpeedMultiplier}</span>\n; inputField.value = ""; playSound('coin'); return; }
document.getElementById('output').innerHTML += "" + value + "\n"; inputField.disabled = true; document.getElementById('send-input-btn').disabled = true; inputField.value = "";
if (currentInputCallback) { let callback = currentInputCallback; currentInputCallback = null; callback(value); }
}
function updateGlobalGame() { document.getElementById('status').innerText = "Gesichert!"; addXP(100); setTimeout(() => { document.getElementById('status').innerText = "System bereit!"; }, 2000); }
// Canvas Matrix Regen
const canvas = document.getElementById('matrix-bg'); const ctx = canvas.getContext('2d'); let columns = []; const fontSize = 14;
function resizeCanvas() {
const container = canvas.parentElement; if(!container) return; canvas.width = container.clientWidth; canvas.height = container.clientHeight;
columns = Array(Math.floor(canvas.width / fontSize) + 1).fill(0).map(() => Math.random() * -100);
}
function drawMatrix() {
ctx.fillStyle = 'rgba(7, 8, 11, 0.06)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = activeTheme === 'matrix' ? '#39ff14' : 'rgba(0, 240, 255, 0.15)'; ctx.font = fontSize + 'px monospace';
columns.forEach((y, x) => {
ctx.fillText(String.fromCharCode(33 + Math.random() * 93), x * fontSize, y);
if (y > canvas.height && Math.random() > 0.975) columns[x] = 0; else columns[x] = y + (fontSize * 0.6 * matrixSpeedMultiplier);
});
}
window.addEventListener('resize', resizeCanvas); setInterval(drawMatrix, 40);
// NEU: Vollwertiges 2D Canvas-Spiele Framework (Snake Game)
const gameCanvas = document.getElementById('game-canvas');
const gCtx = gameCanvas.getContext('2d');
let snake, food, dx, dy, score, gameInterval;
function startSnakeMinigame() {
playSound('laser');
gameCanvas.style.display = 'block';
gameCanvas.width = gameCanvas.parentElement.clientWidth;
gameCanvas.height = gameCanvas.parentElement.clientHeight;
// Startwerte initialisieren
snake = [{x: 160, y: 160}, {x: 140, y: 160}, {x: 120, y: 160}];
dx = 20; dy = 0; score = 0;
generateFood();
if (gameInterval) clearInterval(gameInterval);
gameInterval = setInterval(updateSnakeFrame, 100);
// Tastatur-Listener für die Pfeiltasten injizieren
document.addEventListener('keydown', handleSnakeControls);
}
function handleSnakeControls(e) {
if (e.key === 'ArrowLeft' && dx === 0) { dx = -20; dy = 0; }
if (e.key === 'ArrowUp' && dy === 0) { dx = 0; dy = -20; }
if (e.key === 'ArrowRight' && dx === 0) { dx = 20; dy = 0; }
if (e.key === 'ArrowDown' && dy === 0) { dx = 0; dy = 20; }
}
function generateFood() {
food = {
x: Math.floor(Math.random() * (gameCanvas.width / 20)) * 20,
Game Source: ArcadeVerse – Quest & Arcade Edition

Creator: BlazeKoala99
Libraries: none
Complexity: complex (789 lines, 42.4 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: arcadeverse-quest-arcade-edition-blazekoala99" to link back to the original. Then publish at arcadelab.ai/publish.