🎮ArcadeLab

ArcadeVerse – Snake & Create Game

by StealthOtter57
672 lines19.6 KB
▶ Play
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcadeVerse – Snake & Create Game</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;
        }

        * {
            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 & Navigation */
        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);
        }

        .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);
        }

        .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 */
        .main-container {
            flex: 1;
            max-width: 1500px;
            width: 92%;
            margin: 35px auto;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        /* Hub Header & Suchleiste */
        .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 Grid */
        #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;
            cursor: pointer;
            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;
        }

        .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;
        }

        .play-btn {
            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 / Editor View */
        #studio-view {
            display: none;
            flex-direction: row;
            gap: 25px;
            height: 78vh;
        }

        @media (max-width: 950px) {
            #studio-view {
                flex-direction: column;
                height: auto;
            }
            .editor-section, .output-section {
                height: 500px;
            }
        }

        .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;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 14px;
            margin-bottom: 15px;
        }

        h2 { 
            margin: 0; 
            font-size: 1.1rem; 
            color: var(--header-text); 
            display: flex; 
            align-items: center; 
            gap: 8px;
        }
        
        textarea {
            flex: 1;
            background-color: #07080b;
            color: var(--accent-secondary);
            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;
        }

        textarea:focus {
            border-color: var(--accent-secondary);
            box-shadow: 0 0 10px var(--accent-glow);
        }

        .controls {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        button.action-btn {
            background-color: var(--border-color);
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-weight: 700;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        button.action-btn:hover {
            background-color: var(--accent-secondary);
            color: var(--bg-color);
        }

        #run-btn { 
            background: linear-gradient(135deg, #00b09b, #96c93d); 
            color: #fff; 
        }
        #run-btn:hover { 
            opacity: 0.9;
            transform: scale(1.02);
        }

        #output {
            flex: 1;
            background-color: #07080b;
            padding: 18px;
            border-radius: 12px;
            font-family: 'Fira Code', monospace;
            overflow: hidden;
            border: 1px solid var(--border-color);
            margin-bottom: 15px;
            color: #e2e8f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .fullscreen-btn { 
            background-color: var(--border-color); 
            color: #fff; 
            padding: 7px 14px; 
            font-size: 0.85rem; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer; 
            transition: background 0.2s;
        }
        .fullscreen-btn:hover { background-color: var(--accent-secondary); color: var(--bg-color); }
        
        .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: var(--bg-color); padding: 35px;
        }
    </style>
</head>
<body>

    <header>
        <div class="logo">🕹️ Arcade<span>Verse</span></div>
        <div class="nav-links">
            <button class="nav-btn active" id="nav-arcade" onclick="switchView('arcade')">Spiele-Hub</button>
            <button class="nav-btn" id="nav-studio" onclick="switchView('studio')">Code Studio</button>
        </div>
    </header>

    <div class="main-container">
        <div class="hub-header" id="hub-header-section">
            <h2 style="font-size: 1.5rem; color: #fff;">Beliebte Spiele</h2>
            <input type="text" class="search-bar" id="search-input" placeholder="Spiele durchsuchen..." oninput="filterGames()">
        </div>

        <div id="arcade-view">
            <div class="game-card" onclick="launchGame('snake')">
                <div class="game-thumbnail">
                    🐍
                    <div class="game-badge">Klassiker</div>
                </div>
                <div class="game-info">
                    <div>
                        <h3 class="game-title">Snake</h3>
                        <p class="game-desc">Steuere die Schlange, sammle Futter ein und wachse, ohne gegen die Wand oder dich selbst zu prallen!</p>
                    </div>
                    <button class="play-btn">Jetzt spielen</button>
                </div>
            </div>
        </div>

        <div id="studio-view">
            <div class="editor-section">
                <div class="section-header">
                    <h2>📝 Code-Editor</h2>
                    <select id="games-select" class="nav-btn" style="padding: 6px 14px; font-size: 0.85rem;" onchange="loadSelectedGame()">
                        <option value="snake">Spiel: Snake</option>
                        <option value="create">Create Game (Eigene Idee)</option>
                    </select>
                </div>
                <textarea id="code-editor" placeholder="Schreibe deinen Code..."></textarea>
                <div class="controls">
                    <span id="status" style="font-size: 0.85rem; color: var(--accent-secondary);">Status: Bereit</span>
                    <button id="run-btn" class="action-btn" onclick="runGameCode()">▶ Spiel starten</button>
                </div>
            </div>

            <div id="output-box" class="output-section">
                <div class="section-header">
                    <h2>📺 Live Spiel-Ausgabe</h2>
                    <button class="fullscreen-btn" onclick="toggleFullscreen()">🖵 Vollbild</button>
                </div>
                <div id="output">Klicke im Studio auf 'Spiel starten', um zu zocken!</div>
            </div>
        </div>
    </div>

    <script>
        const defaultGames = {
            snake: `// Snake Spiel Code
const scoreDiv = document.createElement('div');
scoreDiv.id = 'score';
scoreDiv.style.fontSize = '20px';
scoreDiv.style.marginBottom = '10px';
scoreDiv.style.fontWeight = 'bold';
scoreDiv.innerText = 'Score: 0';
output.appendChild(scoreDiv);

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
canvas.setAttribute('tabindex', '0'); // Macht das Canvas fokussierbar für Tasten
const ctx = canvas.getContext('2d');
output.appendChild(canvas);
canvas.focus(); // Fokus sofort setzen

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake = [
    { x: 10, y: 10 },
    { x: 9, y: 10 },
    { x: 8, y: 10 }
];
let food = { x: 5, y: 5 };
let dx = 1;
let dy = 0;
let score = 0;
let gameInterval;

// Tastatursteuerung lauschen
canvas.addEventListener("keydown", changeDirection);

function startGame() {
    generateFood();
    gameInterval = setInterval(main, 100);
}

function main() {
    if (hasGameEnded()) {
        clearInterval(gameInterval);
        alert("Game Over! Dein Score: " + score);
        return;
    }

    clearCanvas();
    drawFood();
    moveSnake();
    drawSnake();
}

function clearCanvas() {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach((part, index) => {
        ctx.fillStyle = index === 0 ? "#4CAF50" : "#8BC34A"; // Kopf ist dunkler
        ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize - 2, gridSize - 2);
    });
}

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);

    // Prüfen, ob Futter gegessen wurde
    if (head.x === food.x && head.y === food.y) {
        score += 10;
        scoreDiv.innerText = "Score: " + score;
        generateFood();
    } else {
        snake.pop(); // Entfernt das letzte Element, wenn kein Futter gegessen wurde
    }
}

function generateFood() {
    food.x = Math.floor(Math.random() * tileCount);
    food.y = Math.floor(Math.random() * tileCount);

    // Verhindern, dass Futter auf der Schlange spawnt
    snake.forEach(part => {
        if (part.x === food.x && part.y === food.y) {
            generateFood();
        }
    });
}

function drawFood() {
    ctx.fillStyle = "#FF5722";
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}

function changeDirection(event) {
    const keyPressed = event.keyCode;
    const LEFT = 37;
    const UP = 38;
    const RIGHT = 39;
    const DOWN = 40;

    const goingUp = dy === -1;
    const goingDown = dy === 1;
    const goingRight = dx === 1;
    const goingLeft = dx === -1;

    if (keyPressed === LEFT && !goingRight) {
        dx = -1;
        dy = 0;
    }
    if (keyPressed === UP && !goingDown) {
        dx = 0;
        dy = -1;
    }
    if (keyPressed === RIGHT && !goingLeft) {
        dx = 1;
        dy = 0;
    }
    if (keyPressed === DOWN && !goingUp) {
        dx = 0;
        dy = 1;
    }
}

function hasGameEnded() {
    const head = snake[0];

    // Wandkollision
    const hitLeftWall = head.x < 0;
    const hitRightWall = head.x >= tileCount;
    const hitToptWall = head.y < 0;
    const hitBottomWall = head.y >= tileCount;

    if (hitLeftWall || hitRightWall || hitToptWall || hitBottomWall) {
        return true;
    }

    // Selbstkollision
    for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
        }
    }
    return false;
}

// Spiel starten
startGame();`,

            create: `// Create Game - Dein eigener Bereich für neue Spiel-Ideen!
const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
canvas.setAttribute('tabindex', '0');
const ctx = canvas.getContext('2d');
output.innerHTML = '';
output.appendChild(canvas);
canvas.focus();

let x = 200;
let y = 200;

function draw() {
    ctx.fillStyle = "#07080b";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = "#00f0ff";
    ctx.beginPath();
    ctx.arc(x, y, 15, 0, Math.PI * 2);
    ctx.fill();
}

draw();

canvas.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp') y -= 10;
    if (e.key === 'ArrowDown') y += 10;
    if (e.key === 'ArrowLeft') x -= 10;
    if (e.key === 'ArrowRight') x += 10;
    draw();
});`
        };

        document.getElementById('code-editor').value = defaultGames.snake;

        function switchView(viewName) {
            const arcadeView = document.getElementById('arcade-view');
            const hubHeader = document.getElementById('hub-header-section');
            const studioView = document.getElementById('studio-view');
            const navArcade = document.getElementById('nav-arcade');
            const navStudio = document.getElementById('nav-studio');

            if (viewName === 'arcade') {
                arcadeView.style.display = 'grid';
                hubHeader.style.display = 'flex';
                studioView.style.display = 'none';
                navArcade.classList.add('active');
                navStudio.classList.remove('active');
            } else {
                arcadeView.style.display = 'none';
                hubHeader.style.display = 'none';
                studioView.style.display = 'flex';
                navStudio.classList.add('active');
                navArcade.classList.remove('active');
            }
        }

        function launchGame(gameKey) {
            document.getElementById('games-select').value = gameKey;
            loadSelectedGame();
            switchView('studio');
            runGameCode();
        }

        function toggleFullscreen() {
            document.getElementById('output-box').classList.toggle('fullscreen-mode');
        }

        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'!";
            }
        }

        function filterGames() {
            const query = document.getElementById('search-input').value.toLowerCase();
            const cards = document.querySelectorAll('.game-card');
            
            cards.forEach(card => {
                const title = card.querySelector('.game-title').innerText.toLowerCase();
                const desc = card.querySelector('.game-desc').innerText.toLowerCase();
                if (title.includes(query) || desc.includes(query)) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        function runGameCode() {
            const code = document.getElementById('code-editor').value;
            const output = document.getElementById('output');
            output.innerHTML = "";
            
            try {
                let runScript = new Function('output', code);
                runScript(output);
            } catch (err) {
                output.innerHTML = `<span style="color: #ff0055;">Fehler im Code: ${err.message}</span>`;
            }
        }

        // Snake direkt beim Seitenstart automatisch im Hintergrund laden und starten!
        window.addEventListener('DOMContentLoaded', () => {
            runGameCode();
        });
    </script>
</body>
</html>

Game Source: ArcadeVerse – Snake & Create Game

Creator: StealthOtter57

Libraries: none

Complexity: complex (672 lines, 19.6 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: create-your-game-global-network-stealthotter57" to link back to the original. Then publish at arcadelab.ai/publish.