🎮ArcadeLab

جادوی غول علامت‌ها

by PixelPanda95
105 lines4.2 KB
▶ Play
<!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-color: #880e4f;
            --accent-color: #c2185b;
            --pos-color: #4caf50;
            --neg-color: #f44336;
        }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { 
            font-family: Tahoma, sans-serif; text-align: center; 
            background-color: #fce4ec; margin: 0; padding: 20px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            min-height: 100vh; overflow: hidden;
        }
        h1 { color: var(--primary-color); font-size: 1.4rem; margin-bottom: 5px; }
        p { font-size: 0.85rem; color: #555; margin-bottom: 15px; }
        #board { 
            width: 260px; height: 260px; border: 8px solid var(--primary-color); 
            background: white; position: relative; border-radius: 50%; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        #arrow { 
            width: 0; height: 0; 
            border-left: 15px solid transparent; border-right: 15px solid transparent; 
            border-bottom: 40px solid var(--accent-color); 
            position: absolute; left: 50%; top: 50%;
            margin-left: -15px; margin-top: -40px;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .controls { 
            width: 100%; max-width: 320px; display: grid; 
            grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;
        }
        button { 
            padding: 15px 5px; font-size: 0.9rem; font-weight: bold;
            cursor: pointer; border-radius: 12px; border: none; 
            background: var(--primary-color); color: white; 
            box-shadow: 0 4px 0 #560a33; transition: all 0.1s;
        }
        button:active { transform: translateY(3px); box-shadow: 0 1px 0 #560a33; }
        .reset-btn { grid-column: span 2; background: #4a148c; box-shadow: 0 4px 0 #310d54; }
        #status { font-size: 1.2rem; margin-top: 20px; padding: 8px 20px; border-radius: 10px; }
        .pos { color: var(--pos-color); background: rgba(76, 175, 80, 0.1); }
        .neg { color: var(--neg-color); background: rgba(244, 67, 54, 0.1); }
    </style>
</head>
<body>

    <h1>✨ جادوی غول علامت‌ها ✨</h1>
    <p>ضرب در منفی (-) = چرخش ۱۸۰ درجه</p>
    
    <div id="board">
        <div id="arrow"></div>
    </div>

    <div class="controls">
        <button onclick="applyMagic(1)">ضرب در (+)</button>
        <button onclick="applyMagic(-1)">ضرب در (-)</button>
        <button class="reset-btn" onclick="reset()">بازگشت به اصل</button>
    </div>

    <h2 id="status" class="pos">وضعیت: مثبت (+)</h2>

    <script>
        let currentRotation = 0;
        const arrow = document.getElementById('arrow');
        const statusText = document.getElementById('status');

        function applyMagic(val) {
            if (val === -1) {
                currentRotation += 180;
            } else {
                // در ضرب مثبت، جهت عوض نمی‌شود اما برای تعامل بهتر می‌توانیم منطق خاصی اضافه کنیم
                // فعلاً طبق کد شما عمل می‌کنیم
            }
            arrow.style.transform = `rotate(${currentRotation}deg)`;
            updateText();
        }

        function reset() { 
            currentRotation = 0; 
            arrow.style.transform = `rotate(0deg)`; 
            updateText(); 
        }

        function updateText() {
            // چک می‌کنیم آیا زاویه مضربی از 360 است (یعنی وضعیت مثبت)
            let isPositive = (currentRotation % 360 === 0);
            
            if (isPositive) {
                statusText.innerText = "وضعیت: مثبت (+)";
                statusText.className = "pos";
            } else {
                statusText.innerText = "وضعیت: منفی (-)";
                statusText.className = "neg";
            }
        }
    </script>
</

Game Source: جادوی غول علامت‌ها

Creator: PixelPanda95

Libraries: none

Complexity: moderate (105 lines, 4.2 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" to link back to the original. Then publish at arcadelab.ai/publish.