Untitled drop (fork) (fork)

ببنی·Published Oct 30, 2026
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MIND ARENA | میدان ذهن</title>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Tahoma, sans-serif;
    background: #080812;
    color: white;
}

header {
    text-align: center;
    padding: 35px 15px;
    background: linear-gradient(135deg,#11112d,#171735);
    border-bottom: 2px solid #00f7ff;
}

header h1 {
    color: #00f7ff;
    font-size: 38px;
    text-shadow: 0 0 15px #00f7ff;
}

header p {
    color: #aaa;
}

nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    background: #101020;
    flex-wrap: wrap;
}

nav a {
    color: #00f7ff;
    text-decoration: none;
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
}

h2 {
    color: #00f7ff;
}

.games {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
}

.card {
    background: #151529;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #30305c;
    transition: .3s;
}

.card:hover {
    transform: translateY(-5px);
    border-color: #00f7ff;
    box-shadow: 0 0 15px #00f7ff55;
}

.card h3 {
    color: #00f7ff;
}

button {
    background: #00dce8;
    color: #080812;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
}

button:hover {
    background: #00f7ff;
}

.game-box {
    display: none;
    background: #151529;
    border: 1px solid #00f7ff;
    padding: 25px;
    border-radius: 15px;
    margin-top: 25px;
    text-align: center;
}

input {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #00f7ff;
    background: #080812;
    color: white;
    width: 180px;
    text-align: center;
}

#board {
    display: grid;
    grid-template-columns: repeat(3,80px);
    justify-content: center;
    gap: 8px;
    margin: 20px;
}

.cell {
    height: 80px;
    background: #252545;
    border: 1px solid #00f7ff;
    color: white;
    font-size: 30px;
    border-radius: 10px;
}

footer {
    text-align: center;
    padding: 25px;
    color: #888;
    margin-top: 40px;
}
</style>
</head>

<body>

<header>
    <h1>⚡ MIND ARENA ⚡</h1>
    <p>میدان نبرد ذهن‌های باهوش</p>
</header>

<nav>
    <a href="#home">خانه</a>
    <a href="#games">بازی‌ها</a>
    <a href="#about">درباره ما</a>
</nav>

<div class="container" id="home">

    <h2>🎮 به میدان ذهن خوش آمدی!</h2>
    <p>هوشت را به چالش بکش و رکورد خودت را بشکن.</p>

    <h2 id="games">🧠 بازی‌های فکری</h2>

    <div class="games">

        <div class="card">
            <h3>🔢 حدس عدد</h3>
            <p>عدد مخفی را پیدا کن!</p>
            <button onclick="showGame('guess')">شروع بازی</button>
        </div>

        <div class="card">
            <h3>❌ دوز</h3>
            <p>با کامپیوتر رقابت کن.</p>
            <button onclick="showGame('tic')">شروع بازی</button>
        </div>

        <div class="card">
            <h3>🧩 معما</h3>
            <p>ذهن خودت را آزمایش کن.</p>
            <button onclick="showGame('riddle')">شروع بازی</button>
        </div>

        <div class="card">
            <h3>➕ ریاضی سریع</h3>
            <p>سرعت محاسبه‌ات را بسنج.</p>
            <button onclick="showGame('math')">شروع بازی</button>
        </div>

    </div>

    <div class="game-box" id="guess">
        <h2>🔢 حدس عدد</h2>
        <p>یک عدد بین ۱ تا ۲۰ انتخاب شده است.</p>
        <input id="guessInput" type="number" placeholder="عدد را وارد کن">
        <button onclick="checkGuess()">بررسی</button>
        <p id="guessResult"></p>
        <button onclick="newGuess()">شروع دوباره</button>
    </div>

    <div class="game-box" id="tic">
        <h2>❌ بازی دوز</h2>
        <p>تو X هستی و کامپیوتر O</p>
        <div id="board"></div>
        <p id="ticResult"></p>
        <button onclick="resetTic()">شروع دوباره</button>
    </div>

    <div class="game-box" id="riddle">
        <h2>🧩 معما</h2>
        <p>آن چیست که هرچه از آن برداری بزرگ‌تر می‌شود؟</p>
        <input id="riddleInput" placeholder="جواب">
        <button onclick="checkRiddle()">بررسی جواب</button>
        <p id="riddleResult"></p>
    </div>

    <div class="game-box" id="math">
        <h2>➕ ریاضی سریع</h2>
        <p id="question"></p>
        <input id="mathInput" type="number" placeholder="جواب">
        <button onclick="checkMath()">بررسی</button>
        <p id="mathResult"></p>
    </div>

</div>

<footer id="about">
    <p>⚡ MIND ARENA ⚡</p>
    <p>قدرت ذهن تو، قدرت توست!</p>
</footer>

<script>

function showGame(id) {
    document.querySelectorAll('.game-box').forEach(box => {
        box.style.display = 'none';
    });

    document.getElementById(id).style.display = 'block';
    document.getElementById(id).scrollIntoView({
        behavior: 'smooth'
    });
}

// حدس عدد

let secret = Math.floor(Math.random() * 20) + 1;

function checkGuess() {
    let n = Number(document.getElementById('guessInput').value);
    let result = document.getElementById('guessResult');

    if (!n || n < 1 || n > 20) {
        result.innerText = 'یک عدد بین ۱ تا ۲۰ وارد کن.';
    } else if (n === secret) {
        result.innerText = '🎉 آفرین! درست حدس زدی!';
    } else if (n < secret) {
        result.innerText = 'عدد بزرگ‌تری امتحان کن!';
    } else {
        result.innerText = 'عدد کوچک‌تری امتحان کن!';
    }
}

function newGuess() {
    secret = Math.floor(Math.random() * 20) + 1;
    document.getElementById('guessInput').value = '';
    document.getElementById('guessResult').innerText = 'بازی جدید شروع شد!';
}

// بازی دوز

let cells = Array(9).fill('');
let finished = false;

function drawBoard() {
    let board = document.getElementById('board');
    board.innerHTML = '';

    cells.forEach((value, i) => {
        let button = document.createElement('button');
        button.className = 'cell';
        button.innerText = value;

        button.onclick = () => play(i);
        board.appendChild(button);
    });
}

function winner() {
    let lines = [
        [0,1,2],[3,4,5],[6,7,8],
        [0,3,6],[1,4,7],[2,5,8],
        [0,4,8],[2,4,6]
    ];

    for (let line of lines) {
        let [a,b,c] = line;
        if (cells[a] && cells[a] === cells[b] && cells[b] === cells[c]) {
            return cells[a];
        }
    }

    return null;
}

function play(i) {
    if (finished || cells[i]) return;

    cells[i] = 'X';

    if (winner()) {
        endTic('🎉 تو برنده شدی!');
        return;
    }

    if (cells.every(Boolean)) {
        endTic('مساوی شد!');
        return;
    }

    let empty = cells.map((v,i) => v ? null : i).filter(v => v !== null);
    let computer = empty[Math.floor(Math.random() * empty.length)];

    cells[computer] = 'O';

    if (winner()) {
        endTic('کامپیوتر برنده شد!');
    } else if (cells.every(Boolean)) {
        endTic('مساوی شد!');
    }

    drawBoard();
}

function endTic(message) {
    finished = true;
    document.getElementById('ticResult').innerText = message;
    drawBoard();
}

function resetTic() {
    cells = Array(9).fill('');
    finished = false;
    document.getElementById('ticResult').innerText = '';
    drawBoard();
}

drawBoard();

// معما

function checkRiddle() {
    let answer = document.getElementById('riddleInput').value.trim();
    let result = document.getElementById('riddleResult');

    if (answer.includes('چاله') || answer.includes('گودال')) {
        result.innerText = '🎉 آفرین! جواب درست است.';
    } else {
        result.innerText = 'دوباره فکر کن!';
    }
}

// ریاضی سریع

let a, b;

function newMath() {
    a = Math.floor(Math.random() * 20) + 1;
    b = Math.floor(Math.random() * 20) + 1;

    document.getElementById('question').innerText =
        a + ' + ' + b + ' = ؟';

    document.getElementById('mathInput').value = '';
}

function checkMath() {
    let answer = Number(document.getElementById('mathInput').value);

    if (answer === a + b) {
        document.getElementById('mathResult').innerText =
            '🎉 جواب درست است!';
        newMath();
    } else {
        document.getElementById('mathResult').innerText =
            'اشتباه است، دوباره تلاش کن!';
    }
}

newMath();

</script>

</body>
</html>
Explore more drops →
Forked from zuYo7i3vKFci.