🎯 لعبة التخمين

by BraveMeteor17
124 lines4.0 KB
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎯 لعبة التخمين</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #1a1a2e;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 10px;
        }
        .box {
            background: #16213e;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            width: 350px;
            max-width: 100%;
            box-shadow: 0 0 30px #0f3460;
        }
        input {
            padding: 12px;
            width: 80%;
            border: none;
            border-radius: 30px;
            text-align: center;
            font-size: 20px;
            margin: 15px 0;
            outline: none;
        }
        button {
            background: #e94560;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 18px;
            cursor: pointer;
            margin: 5px;
            transition: 0.3s;
        }
        button:hover { background: #c73652; transform: scale(1.05); }
        #msg {
            background: #0f3460;
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            min-height: 50px;
        }
        #attempts { color: #f5c842; }
        .hint { font-size: 14px; color: #aaa; }
    </style>
</head>
<body>

<div class="box">
    <h1>🔢 خمن الرقم</h1>
    <p class="hint">بين 1 و 20</p>
    
    <input type="number" id="guessInput" placeholder="أدخل رقمك..." min="1" max="20">
    <br>
    <!-- ✅ تم إضافة id="guessBtn" و id="resetBtn" هنا -->
    <button id="guessBtn" onclick="checkGuess()">✅ تأكد</button>
    <button id="resetBtn" onclick="resetGame()">🔄 لعبة جديدة</button>
    
    <div id="msg">💡 ابدأ التخمين...</div>
    <p>🔄 المحاولات: <span id="attempts">0</span></p>
</div>

<script>
    let secretNumber = Math.floor(Math.random() * 20) + 1;
    let attempts = 0;

    function checkGuess() {
        let input = document.getElementById('guessInput');
        let msgDiv = document.getElementById('msg');
        let attemptsSpan = document.getElementById('attempts');
        let guess = Number(input.value);

        if (!guess || guess < 1 || guess > 20) {
            msgDiv.innerHTML = '⚠️ أدخل رقماً صحيحاً بين 1 و 20';
            return;
        }

        attempts++;
        attemptsSpan.textContent = attempts;

        if (guess < secretNumber) {
            msgDiv.innerHTML = '⬆️ الرقم أكبر من هذا، زدّه!';
        } else if (guess > secretNumber) {
            msgDiv.innerHTML = '⬇️ الرقم أصغر من هذا، نقّصه!';
        } else {
            msgDiv.innerHTML = `🎉 أصبت! الرقم هو ${secretNumber} في ${attempts} محاولات 🎉`;
            // ✅ التعديل المهم: استخدمنا id المحدد بدلاً من querySelector
            document.getElementById('guessBtn').disabled = true;
        }
        input.value = '';
        input.focus();
    }

    document.getElementById('guessInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') checkGuess();
    });

    function resetGame() {
        secretNumber = Math.floor(Math.random() * 20) + 1;
        attempts = 0;
        document.getElementById('attempts').textContent = 0;
        document.getElementById('msg').innerHTML = '🔄 رقم جديد، خمن!';
        // ✅ التعديل المهم هنا أيضاً
        document.getElementById('guessBtn').disabled = false;
        document.getElementById('guessInput').value = '';
        document.getElementById('guessInput').focus();
    }
</script>
</body>
</html>
Game Source: 🎯 لعبة التخمين

Creator: BraveMeteor17
Libraries: none
Complexity: moderate (124 lines, 4.0 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: game-bravemeteor17" to link back to the original. Then publish at arcadelab.ai/publish.