پرش روی محور اعداد

by PixelPanda95
127 lines5.3 KB
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>پرش روی محور اعداد</title>
    <style>
        body { font-family: Tahoma, sans-serif; background: #f3e5f5; text-align: center; padding: 15px; margin: 0; }
        .q-box { font-size: 1.6rem; font-weight: bold; color: #4a148c; margin: 20px 0; text-align: right; background: white; padding: 10px 20px; border-radius: 15px; }
        
        /* کانتینر محور */
        .line-container {
            position: relative; width: 95%; height: 120px; margin: 40px auto 20px auto;
            border-bottom: 4px solid #455a64; display: flex; justify-content: space-between;
            direction: ltr; /* برای حفظ ترتیب ریاضی اعداد */
        }
        .marker { font-size: 0.7rem; color: #546e7a; position: relative; }
        .marker::before { content: ""; position: absolute; bottom: -10px; left: 50%; width: 2px; height: 10px; background: #455a64; }
        
        /* غول */
        #giant { position: absolute; bottom: 0; left: 50%; width: 35px; font-size: 25px; transition: all 1s ease-in-out; z-index: 20; }
        
        /* لایه کمان‌ها */
        #arc-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        
        .options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 50px; }
        button { padding: 15px; border-radius: 12px; border: none; background: #6a1b9a; color: white; font-weight: bold; }
        #feedback { font-size: 1.2rem; margin-top: 15px; font-weight: bold; }
    </style>
</head>
<body>

    <div class="q-box" id="question">-- = ( ؟ )</div>

    <div class="line-container" id="line">
        <svg id="arc-layer"></svg>
        <div id="giant">👹</div>
    </div>

    <div class="options">
        <button onclick="checkAns(0)" id="opt0">-</button>
        <button onclick="checkAns(1)" id="opt1">-</button>
        <button onclick="checkAns(2)" id="opt2">-</button>
    </div>

    <div id="feedback"></div>

    <script>
        const rangeMin = -10, rangeMax = 10;
        let n1, n2, op, currentAnswer;
        const lineEl = document.getElementById('line');
        const giantEl = document.getElementById('giant');
        const arcLayer = document.getElementById('arc-layer');

        function setupLine() {
            lineEl.querySelectorAll('.marker').forEach(m => m.remove());
            for (let i = rangeMin; i <= rangeMax; i++) {
                let div = document.createElement('div');
                div.className = 'marker';
                div.innerText = i;
                lineEl.appendChild(div);
            }
        }

        function getX(val) {
            return ((val - rangeMin) / (rangeMax - rangeMin)) * 100;
        }

        function drawArc(start, end, color, delay) {
            setTimeout(() => {
                const x1 = getX(start);
                const x2 = getX(end);
                const midX = (x1 + x2) / 2;
                const height = Math.abs(end - start) * 10; 
                
                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                path.setAttribute("d", `M ${x1}%,100 Q ${midX}%,${100 - height} ${x2}%,100`);
                path.setAttribute("stroke", color);
                path.setAttribute("stroke-width", "4");
                path.setAttribute("fill", "none");
                arcLayer.appendChild(path);
                
                // حرکت غول به مقصد
                giantEl.style.left = `calc(${x2}% - 18px)`;
            }, delay);
        }

        function nextQuestion() {
            arcLayer.innerHTML = ""; // پاک کردن کمان‌های قبلی
            n1 = Math.floor(Math.random() * 8) - 4;
            op = Math.random() > 0.5 ? '+' : '-';
            n2 = Math.floor(Math.random() * 6) - 3;
            if(n2 === 0) n2 = 1;

            currentAnswer = (op === '+') ? (n1 + n2) : (n1 - n2);
            document.getElementById('question').innerText = ` = ( ؟ ) ${n2} ${op} ${n1}`;

            let options = [currentAnswer, currentAnswer + 2, currentAnswer - 2].sort(() => Math.random() - 0.5);
            options.forEach((opt, i) => document.getElementById('opt' + i).innerText = opt);
            window.correctIdx = options.indexOf(currentAnswer);
            
            // تنظیم غول به صفر
            giantEl.style.left = `calc(${getX(0)}% - 18px)`;
        }

        function checkAns(idx) {
            if (idx === window.correctIdx) {
                document.getElementById('feedback').innerText = "✅ عالی!";
                document.getElementById('feedback').style.color = "green";
                
                // شروع انیمیشن پرش‌ها
                drawArc(0, n1, "blue", 500); // پرش اول
                drawArc(n1, currentAnswer, "red", 2000); // پرش دوم
                
                setTimeout(nextQuestion, 4000);
            } else {
                document.getElementById('feedback').innerText = "❌ دوباره امتحان کن!";
                document.getElementById('feedback').style.color = "red";
            }
        }

        setupLine();
        nextQuestion();
    </script>
</body>
</html>
Game Source: پرش روی محور اعداد

Creator: PixelPanda95
Libraries: none
Complexity: moderate (127 lines, 5.3 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-mtbxn99r" to link back to the original. Then publish at arcadelab.ai/publish.