| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>بازی منچ - Mensch</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="style.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| </head> |
| <body class="bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 min-h-screen flex items-center justify-center p-4 font-[Vazirmatn]"> |
|
|
| <div class="w-full max-w-4xl mx-auto"> |
| |
| |
| <div class="text-center mb-4"> |
| <h1 class="text-3xl md:text-4xl font-bold text-amber-200 mb-1 drop-shadow-lg tracking-wide"> |
| 🎲 منچ 🎲 |
| </h1> |
| <p class="text-amber-300 text-lg font-medium" id="game-status">نوبت بازیکن قرمز - تاس بریزید</p> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-b from-slate-800 to-slate-900 rounded-3xl shadow-2xl p-4 md:p-6 border-4 border-slate-600/50"> |
| |
| |
| <div class="relative" id="board-container"> |
| <canvas id="mensch-board" class="w-full h-auto rounded-xl shadow-lg" width="800" height="800"></canvas> |
| </div> |
|
|
| |
| <div class="mt-4 flex flex-col md:flex-row items-center justify-between gap-3"> |
| |
| |
| <div class="flex items-center gap-3"> |
| <div class="w-16 h-16 md:w-20 md:h-20 bg-white rounded-2xl shadow-xl flex items-center justify-center border-4 border-slate-300 transition-all duration-300" id="dice-display"> |
| <div class="dice-dots" id="dice-dots"></div> |
| </div> |
| <div class="text-amber-200 text-sm hidden" id="extra-turn-indicator">🎯 تاس ۶! یه نوبت دیگه</div> |
| </div> |
|
|
| |
| <div class="flex items-center gap-2"> |
| <button id="roll-btn" class="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-400 hover:to-emerald-500 text-white font-bold text-lg rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 border-2 border-green-300 active:scale-95"> |
| 🎲 تاس بریز |
| </button> |
| <button id="new-game-btn" class="px-5 py-3 bg-gradient-to-r from-stone-500 to-stone-600 hover:from-stone-400 hover:to-stone-500 text-white font-bold text-lg rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 border-2 border-stone-400 active:scale-95"> |
| 🔄 بازی جدید |
| </button> |
| </div> |
|
|
| |
| <div class="flex items-center gap-3 text-amber-200"> |
| <div class="text-center bg-slate-700/50 rounded-xl px-3 py-2 border border-slate-600/30"> |
| <div class="text-xs opacity-70">بازیکن فعلی</div> |
| <div class="text-lg font-bold" id="current-player-display">🔴</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="text-center mt-2" id="moves-info"> |
| <span class="text-amber-300 text-sm font-medium hidden" id="moves-remaining"></span> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-4 text-center"> |
| <details class="text-amber-200/70 text-sm cursor-pointer"> |
| <summary class="hover:text-amber-100 transition-colors">📋 قوانین منچ</summary> |
| <div class="mt-2 bg-slate-800/40 rounded-lg p-3 text-xs md:text-sm leading-relaxed max-w-2xl mx-auto text-right"> |
| <p>🎲 برای ورود مهره به بازی باید تاس ۶ بیاورید.</p> |
| <p>🛤️ مهره‌ها در مسیر ۴۰ خانه‌ای حرکت می‌کنند و وارد خانه‌های پایانی می‌شوند.</p> |
| <p>👊 اگر روی خانه مهره حریف بروید، آن را می‌زنید و به خانه شروع برمی‌گردد.</p> |
| <p>⭐ خانه‌های ستاره (امن): هیچکس نمی‌تواند مهره شما را بزند.</p> |
| <p>🎯 تاس ۶ = یک نوبت اضافه + ورود مهره جدید.</p> |
| <p>⚠️ سه بار تاس ۶ پشت سر هم = آخرین مهره شما جریمه می‌شود!</p> |
| <p>🏆 برنده: کسی که زودتر هر ۴ مهره را به خانه پایانی برساند.</p> |
| </div> |
| </details> |
| </div> |
| </div> |
|
|
| |
| <div id="win-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden"> |
| <div class="bg-gradient-to-b from-slate-700 to-slate-800 rounded-3xl p-8 text-center shadow-2xl border-4 border-amber-400 transform scale-0 transition-transform duration-300" id="win-modal-content"> |
| <div class="text-6xl mb-4">🏆</div> |
| <h2 class="text-3xl font-bold text-amber-200 mb-2" id="win-message">برنده شدی!</h2> |
| <p class="text-amber-300 mb-6" id="win-detail"></p> |
| <button id="win-new-game" class="px-8 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold text-lg rounded-xl shadow-lg hover:scale-105 transition-transform active:scale-95"> |
| 🎲 بازی جدید |
| </button> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
