Untitled

avatar
unknown
plain_text
9 months ago
27 kB
9
Indexable
I'll add keyboard controls with the Z key to start the game!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fishing Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to bottom, #87CEEB 0%, #4682B4 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }

        .main-container {
            display: flex;
            gap: 20px;
            max-width: 1400px;
            width: 100%;
            align-items: flex-start;
        }

        .game-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
            flex: 1;
            min-width: 400px;
        }

        .sidebar {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
            width: 350px;
            max-height: 90vh;
            overflow-y: auto;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 24px;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }

        h3 {
            color: #2c3e50;
            margin: 20px 0 10px 0;
            font-size: 18px;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .stat {
            text-align: center;
            padding: 15px;
            background: #ecf0f1;
            border-radius: 10px;
        }

        .stat-label {
            font-size: 12px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #2c3e50;
        }

        .money-display {
            background: linear-gradient(135deg, #f39c12, #f1c40f);
            color: white;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
        }

        .money-amount {
            font-size: 32px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .current-lure {
            background: #e8f5e9;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 2px solid #4caf50;
        }

        .current-lure-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .current-lure-name {
            font-size: 18px;
            color: #27ae60;
            font-weight: bold;
        }

        .fishing-area {
            background: linear-gradient(to bottom, #4682B4 0%, #1e3a5f 100%);
            height: 250px;
            border-radius: 15px;
            position: relative;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .waves {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.3;
        }

        .wave {
            position: absolute;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 25%,
                transparent 50%
            );
            animation: wave 3s linear infinite;
        }

        @keyframes wave {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .fishing-line {
            position: absolute;
            left: 50%;
            top: -10px;
            width: 3px;
            background: #34495e;
            transform: translateX(-50%);
            transform-origin: top;
            transition: height 0.5s ease;
            display: none;
        }

        .fishing-line.casting {
            display: block;
            height: 180px;
            animation: cast 0.5s ease;
        }

        @keyframes cast {
            0% { height: 0; }
            100% { height: 180px; }
        }

        .hook {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background: #e74c3c;
            border-radius: 50%;
        }

        .cast-button {
            width: 100%;
            padding: 20px;
            font-size: 20px;
            font-weight: bold;
            background: linear-gradient(to bottom, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
            position: relative;
        }

        .cast-button:hover {
            background: linear-gradient(to bottom, #2980b9, #21618c);
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(52, 152, 219, 0.6);
        }

        .cast-button:active {
            transform: translateY(0);
        }

        .cast-button:disabled {
            background: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }

        .key-hint {
            position: absolute;
            top: -25px;
            right: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: normal;
        }

        .catch-display {
            margin-top: 20px;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            min-height: 120px;
            border: 3px solid #ecf0f1;
        }

        .catch-item {
            padding: 15px;
            border-radius: 8px;
            font-size: 18px;
            text-align: center;
            animation: slideIn 0.5s ease;
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateY(-20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .rarity-common {
            background: #bdc3c7;
            color: #2c3e50;
        }

        .rarity-uncommon {
            background: #2ecc71;
            color: white;
        }

        .rarity-rare {
            background: #3498db;
            color: white;
        }

        .rarity-epic {
            background: #9b59b6;
            color: white;
        }

        .rarity-legendary {
            background: #f39c12;
            color: white;
            box-shadow: 0 0 20px rgba(243, 156, 18, 0.6);
        }

        .rarity-mythic {
            background: linear-gradient(45deg, #e74c3c, #c0392b, #e74c3c);
            color: white;
            box-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
            animation: pulse 2s infinite;
        }

        .rarity-godly {
            background: linear-gradient(45deg, #8e44ad, #9b59b6, #8e44ad);
            color: white;
            box-shadow: 0 0 35px rgba(142, 68, 173, 0.9);
            animation: pulse 2s infinite, glow 1.5s infinite alternate;
        }

        .rarity-secret {
            background: linear-gradient(45deg, #000000, #434343, #000000);
            color: #00ff00;
            box-shadow: 0 0 40px rgba(0, 255, 0, 0.8);
            animation: pulse 2s infinite, secretGlow 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes glow {
            0% { box-shadow: 0 0 35px rgba(142, 68, 173, 0.9); }
            100% { box-shadow: 0 0 50px rgba(142, 68, 173, 1); }
        }

        @keyframes secretGlow {
            0% { box-shadow: 0 0 40px rgba(0, 255, 0, 0.8); }
            50% { box-shadow: 0 0 60px rgba(0, 255, 0, 1); }
            100% { box-shadow: 0 0 40px rgba(0, 255, 0, 0.8); }
        }

        /* Sidebar Styles */
        .rarity-info {
            margin-bottom: 25px;
        }

        .rarity-item {
            padding: 10px;
            margin: 6px 0;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 14px;
        }

        .rarity-name {
            font-size: 14px;
        }

        .rarity-chance {
            font-size: 12px;
            opacity: 0.9;
        }

        .collection {
            margin-top: 25px;
        }

        .collection-item {
            padding: 10px;
            margin: 8px 0;
            background: white;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            border-left: 4px solid #3498db;
            cursor: pointer;
            transition: all 0.2s;
        }

        .collection-item:hover {
            transform: translateX(5px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .collection-item.selected {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
        }

        .collection-fish-name {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .collection-fish-emoji {
            font-size: 20px;
        }

        .collection-count {
            font-weight: bold;
            color: #3498db;
            font-size: 16px;
            margin-right: 10px;
        }

        .fish-value {
            color: #27ae60;
            font-weight: bold;
            font-size: 12px;
        }

        .empty-collection {
            text-align: center;
            color: #7f8c8d;
            padding: 20px;
            font-style: italic;
        }

        .sell-controls {
            margin-top: 15px;
            padding: 15px;
            background: #fff3cd;
            border-radius: 10px;
            border: 2px solid #ffc107;
        }

        .selected-count {
            text-align: center;
            margin-bottom: 10px;
            font-weight: bold;
            color: #2c3e50;
        }

        .sell-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .sell-button, .clear-button {
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .sell-button {
            background: linear-gradient(to bottom, #27ae60, #229954);
            color: white;
        }

        .sell-button:hover {
            background: linear-gradient(to bottom, #229954, #1e8449);
            transform: translateY(-2px);
        }

        .sell-button:disabled {
            background: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }

        .clear-button {
            background: linear-gradient(to bottom, #e74c3c, #c0392b);
            color: white;
        }

        .clear-button:hover {
            background: linear-gradient(to bottom, #c0392b, #a93226);
            transform: translateY(-2px);
        }

        .shop {
            margin-top: 25px;
        }

        .lure-item {
            padding: 15px;
            margin: 10px 0;
            background: white;
            border-radius: 10px;
            border: 2px solid #ecf0f1;
            transition: all 0.3s;
        }

        .lure-item.owned {
            border-color: #27ae60;
            background: #e8f5e9;
        }

        .lure-item.current {
            border-color: #3498db;
            background: #e3f2fd;
            box-shadow: 0 0 15px rgba(52, 152, 219, 0.4);
        }

        .lure-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .lure-name {
            font-weight: bold;
            font-size: 16px;
            color: #2c3e50;
        }

        .lure-price {
            color: #f39c12;
            font-weight: bold;
            font-size: 16px;
        }

        .lure-description {
            font-size: 12px;
            color: #7f8c8d;
            margin-bottom: 8px;
        }

        .lure-bonus {
            font-size: 11px;
            color: #27ae60;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .lure-button {
            width: 100%;
            padding: 8px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .lure-button.buy {
            background: linear-gradient(to bottom, #3498db, #2980b9);
            color: white;
        }

        .lure-button.buy:hover {
            background: linear-gradient(to bottom, #2980b9, #21618c);
        }

        .lure-button.equip {
            background: linear-gradient(to bottom, #27ae60, #229954);
            color: white;
        }

        .lure-button.equip:hover {
            background: linear-gradient(to bottom, #229954, #1e8449);
        }

        .lure-button.equipped {
            background: #95a5a6;
            color: white;
            cursor: not-allowed;
        }

        .lure-button:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* Scrollbar Styling */
        .sidebar::-webkit-scrollbar {
            width: 8px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: #ecf0f1;
            border-radius: 10px;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #3498db;
            border-radius: 10px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #2980b9;
        }

        /* Tabs */
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .tab {
            flex: 1;
            padding: 12px;
            background: #ecf0f1;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            color: #7f8c8d;
        }

        .tab.active {
            background: #3498db;
            color: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .main-container {
                flex-direction: column;
                align-items: center;
            }

            .sidebar {
                width: 100%;
                max-width: 600px;
                max-height: 600px;
            }

            .game-container {
                min-width: unset;
                width: 100%;
                max-width: 600px;
            }
        }

        /* Start Screen */
        .start-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .start-content {
            text-align: center;
            color: white;
            animation: floatIn 1s ease-out;
        }

        @keyframes floatIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .start-title {
            font-size: 72px;
            margin-bottom: 20px;
            text-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
            animation: titlePulse 2s infinite;
        }

        @keyframes titlePulse {
            0%, 100% { text-shadow: 0 0 20px rgba(52, 152, 219, 0.8); }
            50% { text-shadow: 0 0 40px rgba(52, 152, 219, 1); }
        }

        .start-subtitle {
            font-size: 32px;
            margin-bottom: 40px;
            color: #3498db;
        }

        .start-instructions {
            font-size: 24px;
            margin-bottom: 20px;
            background: rgba(52, 152, 219, 0.2);
            padding: 20px;
            border-radius: 15px;
            border: 2px solid #3498db;
        }

        .z-key {
            display: inline-block;
            background: white;
            color: #2c3e50;
            padding: 10px 25px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 32px;
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
            animation: keyBounce 1s infinite;
        }

        @keyframes keyBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .game-features {
            margin-top: 30px;
            text-align: left;
            display: inline-block;
            font-size: 18px;
        }

        .game-features div {
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="start-screen" id="startScreen">
        <div class="start-content">
            <div class="start-title">🎣 Legendary Fishing 🎣</div>
            <div class="start-subtitle">The Ultimate Fishing Adventure</div>
            <div class="start-instructions">
                Press <span class="z-key">Z</span> to Start!
            </div>
            <div class="game-features">
                <div>🐟 Catch 40+ unique fish across 8 rarities</div>
                <div>💰 Sell your catches to earn money</div>
                <div>🎣 Buy better lures to catch rarer fish</div>
                <div>✨ Hunt for Godly and Secret fish!</div>
            </div>
        </div>
    </div>

    <div class="main-container">
        <div class="game-container">
            <h1>🎣 Legendary Fishing 🎣</h1>
            
            <div class="money-display">
                <div style="font-size: 14px; margin-bottom: 5px;">💰 Money</div>
                <div class="money-amount">$<span id="money">0</span></div>
            </div>

            <div class="current-lure">
                <div class="current-lure-title">🎣 Current Lure:</div>
                <div class="current-lure-name" id="currentLureName">Basic Hook</div>
            </div>

            <div class="stats">
                <div class="stat">
                    <div class="stat-label">Casts</div>
                    <div class="stat-value" id="casts">0</div>
                </div>
                <div class="stat">
                    <div class="stat-label">Total Caught</div>
                    <div class="stat-value" id="totalCaught">0</div>
                </div>
                <div class="stat">
                    <div class="stat-label">Best Catch</div>
                    <div class="stat-value" id="bestCatch">None</div>
                </div>
                <div class="stat">
                    <div class="stat-label">Total Value</div>
                    <div class="stat-value">$<span id="totalValue">0</span></div>
                </div>
            </div>

            <div class="fishing-area">
                <div class="waves">
                    <div class="wave"></div>
                </div>
                <div class="fishing-line" id="fishingLine">
                    <div class="hook"></div>
                </div>
            </div>

            <button class="cast-button" id="castButton">
                Cast Your Line!
                <span class="key-hint">Press Z</span>
            </button>

            <div class="catch-display" id="catchDisplay">
                <p style="text-align: center; color: #7f8c8d;">Press Z or click the button to cast your line!</p>
            </div>
        </div>

        <div class="sidebar">
            <div class="tabs">
                <button class="tab active" onclick="switchTab('collection')">Collection</button>
                <button class="tab" onclick="switchTab('shop')">Shop</button>
                <button class="tab" onclick="switchTab('rarities')">Rarities</button>
            </div>

            <div id="collectionTab" class="tab-content active">
                <div class="collection">
                    <h2>📦 Your Collection</h2>
                    <div id="collectionList">
                        <div class="empty-collection">No fish caught yet. Start casting!</div>
                    </div>
                </div>

                <div class="sell-controls">
                    <div class="selected-count">Selected: <span id="selectedCount">0</span> fish ($<span id="selectedValue">0</span>)</div>
                    <div class="sell-buttons">
                        <button class="sell-button" id="sellButton" onclick="sellSelected()">Sell Selected</button>
                        <button class="clear-button" onclick="clearSelection()">Clear Selection</button>
                    </div>
                </div>
            </div>

            <div id="shopTab" class="tab-content">
                <div class="shop">
                    <h2>🏪 Lure Shop</h2>
                    <div id="lureShop"></div>
                </div>
            </div>

            <div id="raritiesTab" class="tab-content">
                <div class="rarity-info">
                    <h2>🎯 Rarity Chances</h2>
                    <div id="rarityDisplay"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const fishDatabase = {
            common: [
                { name: "Tiny Minnow", emoji: "🐟", value: 5 },
                { name: "Old Boot", emoji: "👢", value: 3 },
                { name: "Seaweed", emoji: "🌿", value: 2 },
                { name: "Small Perch", emoji: "🐟", value: 6 },
                { name: "Rusty Can", emoji: "🥫", value: 1 }
            ],
            uncommon: [
                { name: "Bass", emoji: "🐠", value: 15 },
                { name: "Trout", emoji: "🐟", value: 18 },
                { name: "Catfish", emoji: "🐱", value: 20 },
                { name: "Carp", emoji: "🐟", value: 16 }
            ],
            rare: [
                { name: "Salmon", emoji: "🐟", value: 50 },
                { name: "Tuna", emoji: "🐟", value: 55 },
                { name: "Pike", emoji: "🐊", value: 60 },
                { name: "Swordfish", emoji: "🗡️", value: 65 }
            ],
            epic: [
                { name: "Shark", emoji: "🦈", value: 150 },
                { name: "Octopus", emoji: "🐙", value: 160 },
                { name: "Giant Squid", emoji: "🦑", value: 170 },
                { name: "Marlin", emoji: "🐟", value: 180 }
            ],
            legendary: [
                { name: "Golden Fish", emoji: "⭐", value: 500 },
                { name: "Dragon Fish", emoji: "🐲", value: 550 },
                { name: "Ancient Whale", emoji: "🐋", value: 600 },
                { name: "Mermaid's Treasure", emoji: "💎", value: 650 }
            ],
            mythic: [
                { name: "Kraken", emoji: "🐙👑", value: 2000 },
                { name: "Leviathan", emoji: "🌊🐉", value: 2200 },
                { name: "Poseidon's Trident", emoji: "🔱", value: 2500 },
                { name: "Sea God's Blessing", emoji: "✨🌊", value: 2800 }
            ],
            godly: [
                { name: "Celestial Leviathan", emoji: "🌟🐉", value: 10000 },
                { name: "Divine Koi", emoji: "🎆🐟", value: 11000 },
                { name: "Heaven's Guardian", emoji: "👼🐋", value: 12000 },
                { name: "Cosmic Serpent", emoji: "🌌🐍", value: 13000 }
            ],
            secret: [
                { name: "The Void Fish", emoji: "⚫🐟", value: 50000 },
                { name: "Reality Bender", emoji: "🌀👁️", value: 60000 },
                { name: "Time's Echo", emoji: "⏰🌊", value: 75000 },
                { name: "Existence Itself", emoji: "∞", value: 100000 }
            ]
        };

        const lures = {
            basic: {
                name: "Basic Hook",
                price: 0,
                description: "A simple hook. Better than nothing!",
                bonuses: { uncommon: 0, rare: 0, epic: 0, legendary: 0, mythic: 0, godly: 0, secret: 0 }
            },
            improved: {
                name: "Shiny Lure",
                price: 100,
                description: "Attracts more uncommon fish",
                bonuses: { uncommon: 5, rare: 2, epic: 0, legendary: 0, mythic: 0, godly: 0, secret: 0 }
            },
            advanced: {
                name: "Advanced Spinner",
                price: 500,
                description: "Great for rare catches",
                bonuses: { uncommon: 10, rare: 8, epic: 5, legendary: 1, mythic: 0, godly: 0, secret: 0 }
            },
            expert: {
                name: "Expert's Choice",
                price: 2000,
                description: "For serious fishermen",
                bonuses: { uncommon: 0
Editor is loading...
Leave a Comment