کارگاه ضرب اعداد صحیح

by PixelPanda95
264 lines10.4 KB
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>کارگاه ضرب اعداد صحیح</title>
    <style>
        :root {
            --primary: #4a148c;
            --accent: #d81b60;
            --pos-color: #2e7d32;
            --pos-bg: #e8f5e9;
            --neg-color: #c62828;
            --neg-bg: #ffebee;
            --card-bg: #ffffff;
        }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: Tahoma, system-ui, sans-serif; }
        body { 
            background: linear-gradient(135deg, #ede7f6, #d1c4e9);
            margin: 0; padding: 15px;
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh;
        }
        .container {
            background: var(--card-bg);
            width: 100%; max-width: 390px;
            border-radius: 24px;
            padding: 18px;
            box-shadow: 0 10px 25px rgba(74, 20, 140, 0.15);
            display: flex; flex-direction: column; align-items: center;
        }
        h1 { color: var(--primary); font-size: 1.25rem; margin: 0 0 5px 0; }
        .subtitle { font-size: 0.8rem; color: #666; margin-bottom: 12px; }

        /* عقربه و دایره جهت */
        .circle-box {
            position: relative; width: 130px; height: 130px;
            border: 6px solid var(--primary);
            border-radius: 50%;
            background: #fafafa;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 15px;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
        }
        .tag-top { position: absolute; top: 6px; font-weight: bold; font-size: 0.75rem; color: var(--pos-color); }
        .tag-bottom { position: absolute; bottom: 6px; font-weight: bold; font-size: 0.75rem; color: var(--neg-color); }
        #arrow { 
            width: 0; height: 0; 
            border-left: 10px solid transparent; border-right: 10px solid transparent; 
            border-bottom: 42px solid var(--accent); 
            position: absolute; left: 50%; top: 50%;
            margin-left: -10px; margin-top: -42px;
            transform-origin: 50% 100%;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* ورودی‌های اعداد با کنترل لمسی */
        .inputs-container {
            display: flex; align-items: center; justify-content: center;
            gap: 8px; width: 100%; margin-bottom: 12px;
        }
        .num-card {
            background: #f8f9fa; border: 2px solid #ce93d8;
            border-radius: 14px; padding: 8px 6px; flex: 1;
            display: flex; flex-direction: column; align-items: center; gap: 5px;
        }
        .num-card label { font-size: 0.75rem; font-weight: bold; color: var(--primary); }
        
        .main-input {
            width: 100%; text-align: center; font-size: 1.3rem; font-weight: bold;
            border: 2px solid #ab47bc; border-radius: 8px; padding: 4px 0;
            color: #333; outline: none; background: #fff;
        }
        
        .mini-btn-row {
            display: flex; gap: 4px; width: 100%; justify-content: center;
        }
        .mini-btn {
            background: #e1bee7; color: #4a148c; border: none;
            border-radius: 6px; padding: 4px 8px; font-size: 0.8rem;
            font-weight: bold; cursor: pointer; flex: 1;
        }
        .mini-btn:active { background: #ba68c8; color: white; }
        .sign-toggle-btn {
            background: #ffe0b2; color: #e65100;
        }

        .times-symbol { font-size: 1.6rem; font-weight: bold; color: var(--primary); }

        /* دکمه‌ها */
        .btn-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
            margin-bottom: 12px;
        }
        button.action-btn {
            padding: 11px 5px; font-size: 0.9rem; font-weight: bold;
            border: none; border-radius: 12px; cursor: pointer;
            transition: all 0.15s ease;
        }
        button.action-btn:active { transform: scale(0.96); }
        
        .btn-calc {
            background: var(--primary); color: white;
            box-shadow: 0 3px 0 #2a0845; grid-column: span 2;
            font-size: 1rem;
        }
        .btn-rand { background: #8e24aa; color: white; box-shadow: 0 3px 0 #5c1070; }
        .btn-reset { background: #607d8b; color: white; box-shadow: 0 3px 0 #37474f; }

        /* جعبه تحلیل مرحله به مرحله */
        .result-box {
            width: 100%; background: #fdf7ff;
            border: 2px dashed #ba68c8; border-radius: 14px;
            padding: 10px; text-align: center;
        }
        .step-text { font-size: 0.85rem; color: #333; margin: 4px 0; }
        .final-ans {
            font-size: 1.3rem; font-weight: bold; margin-top: 6px;
            padding: 6px 14px; border-radius: 8px; display: inline-block;
        }
        .pos { color: var(--pos-color); background: var(--pos-bg); }
        .neg { color: var(--neg-color); background: var(--neg-bg); }
    </style>
</head>
<body>

<div class="container">
    <h1>✨ کارگاه ضرب اعداد صحیح ✨</h1>
    <div class="subtitle">چرخش ۱۸۰ درجه با هر بار علامت منفی (-)</div>

    <!-- دایره جهت -->
    <div class="circle-box">
        <span class="tag-top">مثبت (+)</span>
        <div id="arrow"></div>
        <span class="tag-bottom">منفی (-)</span>
    </div>

    <!-- ورود و کنترل دستی اعداد -->
    <div class="inputs-container">
        <!-- عدد اول -->
        <div class="num-card">
            <label>عدد اول</label>
            <input type="number" id="num1" class="main-input" value="-3" oninput="calculate()">
            <div class="mini-btn-row">
                <button class="mini-btn" onclick="adjustValue('num1', 1)">+۱</button>
                <button class="mini-btn" onclick="adjustValue('num1', -1)">-۱</button>
                <button class="mini-btn sign-toggle-btn" onclick="toggleSign('num1')">+/-</button>
            </div>
        </div>

        <span class="times-symbol">×</span>

        <!-- عدد دوم -->
        <div class="num-card">
            <label>عدد دوم</label>
            <input type="number" id="num2" class="main-input" value="4" oninput="calculate()">
            <div class="mini-btn-row">
                <button class="mini-btn" onclick="adjustValue('num2', 1)">+۱</button>
                <button class="mini-btn" onclick="adjustValue('num2', -1)">-۱</button>
                <button class="mini-btn sign-toggle-btn" onclick="toggleSign('num2')">+/-</button>
            </div>
        </div>
    </div>

    <!-- دکمه‌ها -->
    <div class="btn-grid">
        <button class="action-btn btn-calc" onclick="calculate()">🚀 محاسبه و انیمیشن</button>
        <button class="action-btn btn-rand" onclick="randomNumbers()">🎲 سوال تصادفی</button>
        <button class="action-btn btn-reset" onclick="resetAll()">🔄 ریست</button>
    </div>

    <!-- نمایش مراحل و نتیجه نهایی -->
    <div class="result-box">
        <div id="step-sign" class="step-text">ضرب علامت‌ها: <b>(-) × (+) = (-)</b></div>
        <div id="step-val" class="step-text">ضرب مقدارها: <b>۳ × ۴ = ۱۲</b></div>
        <div id="final-res" class="final-ans neg">پاسخ نهایی: ۱۲-</div>
    </div>
</div>

<script>
    function calculate() {
        const input1 = document.getElementById('num1').value;
        const input2 = document.getElementById('num2').value;

        // در صورت خالی بودن مقدار صفر در نظر گرفته شود
        const n1 = input1 === '' ? 0 : parseInt(input1, 10);
        const n2 = input2 === '' ? 0 : parseInt(input2, 10);
        
        const product = n1 * n2;

        // مشخص کردن علامت‌ها
        const sign1 = n1 < 0 ? '-' : '+';
        const sign2 = n2 < 0 ? '-' : '+';
        const finalSign = product < 0 ? '-' : '+';

        // تعداد علامت‌های منفی برای چرخش (هر منفی ۱۸۰ درجه)
        let negativeCount = (n1 < 0 ? 1 : 0) + (n2 < 0 ? 1 : 0);
        let rotation = negativeCount * 180;
        document.getElementById('arrow').style.transform = `rotate(${rotation}deg)`;

        // نمایش ضرب علامت‌ها
        document.getElementById('step-sign').innerHTML = 
            `ضرب علامت‌ها: <b>(${sign1}) × (${sign2}) = (${finalSign})</b>`;

        // نمایش ضرب اندازه‌ها
        const abs1 = Math.abs(n1);
        const abs2 = Math.abs(n2);
        const absProd = Math.abs(product);
        document.getElementById('step-val').innerHTML = 
            `ضرب مقدارها: <b>${abs1} × ${abs2} = ${absProd}</b>`;

        // نتیجه نهایی با رنگ‌بندی
        const finalEl = document.getElementById('final-res');
        if (product > 0) {
            finalEl.className = "final-ans pos";
            finalEl.innerHTML = `پاسخ نهایی: <b>+${product}</b>`;
        } else if (product < 0) {
            finalEl.className = "final-ans neg";
            finalEl.innerHTML = `پاسخ نهایی: <b>${product}</b>`;
        } else {
            finalEl.className = "final-ans pos";
            finalEl.innerHTML = `پاسخ نهایی: <b>0</b>`;
        }
    }

    // تغییر تدریجی عدد با دکمه‌های + و -
    function adjustValue(id, amount) {
        const input = document.getElementById(id);
        let val = parseInt(input.value, 10) || 0;
        input.value = val + amount;
        calculate();
    }

    // تغییر علامت با دکمه +/-
    function toggleSign(id) {
        const input = document.getElementById(id);
        let val = parseInt(input.value, 10) || 0;
        input.value = -val;
        calculate();
    }

    function randomNumbers() {
        let r1 = 0, r2 = 0;
        while (r1 === 0) r1 = Math.floor(Math.random() * 19) - 9;
        while (r2 === 0) r2 = Math.floor(Math.random() * 19) - 9;

        document.getElementById('num1').value = r1;
        document.getElementById('num2').value = r2;
        calculate();
    }

    function resetAll() {
        document.getElementById('num1').value = 2;
        document.getElementById('num2').value = 3;
        calculate();
    }

    // اجرای خودکار در شروع
    calculate();
</script>

</body>
</html>
Game Source: کارگاه ضرب اعداد صحیح

Creator: PixelPanda95
Libraries: none
Complexity: complex (264 lines, 10.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: game-pixelpanda95-mtbwmv8i" to link back to the original. Then publish at arcadelab.ai/publish.