این یک متن ترجمه شده ماشینی است که ممکن است حاوی خطا باشد!
Warning!
این وظیفه بسیار چالشبرانگیز است.
درجه سختی: 
در این تکلیف باید یک کپی از بازی Minesweeper 💣 بسازید. اگر قبلاً بازی Minesweeper را انجام ندادهاید، میتوانید یک نسخه آنلاین برای بازی کردن در اینجا پیدا کنید: Minesweeper Online.
درباره منطق بازی
🧩 Minesweeper اساساً یک بازی کاملاً ساده است. در اینجا نحوه عملکرد منطق آن آمده است:
2️⃣ هر “سلول”، یعنی خانه در بازی، در یکی از دو حالت ممکن است.
یا:
- ⭕ یک سلول خالی
- 💣 یک “نارنجک”
اعدادی که در یک سلول ظاهر میشوند، تعداد نارنجکهایی است که در اطراف آن سلول وجود دارد.
مثالهایی از دلیل اینکه اعداد به این شکل هستند:
چه اتفاقی میافتد؟
- در مثال اول، یک نارنجک در وسط وجود دارد. سلولهای اطراف همه 8 سلول اطراف خود را بررسی میکنند، عدد تعداد نارنجکهای اطراف است.
- در مثال دوم میتوانید اعداد بیشتری را ببینید. اگر اطراف هر عدد را بشمارید، متوجه میشوید که عدد با تعداد نارنجکها مطابقت دارد.
وقتی روی یک سلول کلیک میشود، باید “باز” شود و عدد تعداد نارنجکهای اطراف آن نمایش داده شود.
اگر سلول عدد 0 را نشان دهد، به این معنی است که هیچ نارنجکی در نزدیکی آن وجود ندارد. در این صورت، بازی باید به طور خودکار همه سلولهای اطراف را باز کند. این اغلب به عنوان یک اثر “cascade” یا “flood fill” شناخته میشود. این باعث میشود که مناطق بزرگ خالی به یکباره باز شوند، درست مانند آنچه در Minesweeper واقعی میبینید. معمولاً 0 نارنجک به صورت هیچ متنی نمایش داده نمیشود، اما این به شما بستگی دارد که این کار را انجام دهید یا نه.
اگر سلول حاوی یک نارنجک باشد، بازیکن بلافاصله بازنده میشود و همه نارنجکها آشکار میشوند.
بازی زمانی برنده میشود که همه سلولهای بدون نارنجک باز شوند، مهم نیست که آیا بازیکنان همه نارنجکها را به درستی علامتگذاری کردهاند یا نه.
برای کمک به خود، بازیکن میتواند روی سلولها راستکلیک کند تا یک پرچم 🚩 در جایی که فکر میکند یک نارنجک وجود دارد، قرار دهد. این به طور مستقیم بر منطق تأثیر نمیگذارد، اما به بازیکن کمک میکند تا نظارت داشته باشد.
صفحه:
منطق ایجاد صفحه به این صورت کار میکند:
- 🏁 بازی با یک شبکه (به عنوان مثال 10x10) شروع میشود.
- 💣 تعداد مشخصی نارنجک به طور تصادفی قرار میگیرند.
- 🟰 سپس تعداد نارنجکهای اطراف هر سلول با بررسی همه سلولهای همسایه (بالا، پایین، چپ، راست و مورب) محاسبه میشود.
به این ترتیب، خود صفحه بازی ساخته میشود - بقیه فقط مربوط به واکنش صحیح هنگام باز شدن سلولها است.
چگونه این ساخته شود؟
HTML
- 🗒️ یک منوی کشویی که در آن میتوانید درجه سختی را انتخاب کنید. در اینجا درجههای سختی معمول در Minesweeper آمده است:
| درجه سختی | اندازه صفحه | تعداد مینها |
|---|---|---|
| Beginner | 9x9 | 10 مین |
| Intermediate | 16x16 | 25 مین |
| Expert | 16x30 | 99 مین |
- یک دکمه که بازی را شروع میکند.
- یک
<div>خالی که باید برای ذخیره صفحه بازی استفاده شود. به این یکidمانندboardبدهید.
بقیه صفحه باید از JavaScript تولید شود زیرا ما نمیدانیم صفحه چقدر بزرگ خواهد شد. در اینجا از دستکاری DOM استفاده خواهد شد.
اما در اینجا کمی در مورد نحوه عملکرد صفحه آمده است.
- صفحه باید در یک
<div>باشد. در داخل این عنصر، میتوانید ردیفهایی از عناصر<div>ایجاد کنید که هر کدام یک سلول هستند. - سلولها نیازی به نگهداری اطلاعاتی مبنی بر اینکه یک مین هستند یا نه، ندارند.
- به هر سلول با استفاده از JavaScript یک
idمانندc-x-yبدهید، مثلاً:c-0-0،c-0-1،c-1-2و غیره.xوyمختصات سلول هستند.- دلیل چنین ساختاری این است که استخراج یک سلول خاص در یک مختصات خاص آسان شود.
- هر سلول باید یک
onClick()و یکonContextMenu()برای مدیریت کلیک چپ و راست داشته باشد.
CSS
- 👍 تا حدودی این به عهده شماست که آیا میخواهید آن را دقیقاً به Minesweeper واقعی تبدیل کنید یا نه.
- 🎨 در زیر میتوانید رنگهایی را که در یک بازی دقیق Minesweeper استفاده میشود، ببینید:
| Element | Farger |
|---|---|
| Celle-Ramme | (top, bottom, left, right): (#ffffff, #808080, #ffffff, #808080) |
| Celle-Bakgrunn | #c0c0c0 |
| Tall | 1: #0100fe, 2: #017f01, 3: #fe0000, 4: #00007f 5: #810102, 6: #008081, 7: #000000, 8: #808080 |
JavaScript
شما به منطق زیادی در اینجا نیاز خواهید داشت.
ابتدا، من به کلاسهایی که ممکن است به آنها نیاز داشته باشید فکر میکردم (کلاسهای JavaScript).
در اینجا در مورد کلاسها بخوانید JavaScript Classes.
شما میتوانید موارد زیر را داشته باشید:
- کلاسی برای پیگیری صفحه بازی.
- این صفحه میتواند یک لیست 2 بعدی از کلاسهای “Cell” باشد. سلولها میتوانند پیگیری کنند که آیا یک مین هستند یا باز شدهاند. از مقادیر
booleanبرای پیگیری این موضوع استفاده کنید: (booleans).- یک لیست 2 بعدی در واقع فقط لیستی از لیستها است. میتوانید منطق آن را در اینجا ببینید: 2D-Lister.
بر اساس محتوای این کلاسها، میتوانید تابعی به نام drawBoard() داشته باشید که تمام عناصر HTML (بر اساس کلاس صفحه) را برای نمایش کل بازی Minesweeper تولید میکند.
هنگام شروع بازی، تعداد مینها به طور تصادفی در سراسر صفحه قرار میگیرند. مراقب باشید که دو مین را در یک خانه قرار ندهید، اگر این اتفاق افتاد، آن را جابجا کنید.
شما فقط تعداد محدودی پرچم دارید. وقتی پرچمهایتان تمام شد، نمیتوانید پرچمهای بیشتری قرار دهید. میتوانید پرچمها را بردارید تا پرچمها را برای قرار دادن دوباره پس بگیرید. تعداد پرچمهایی که دارید برابر با تعداد مینی است که وجود دارد.
- از دکمه چپ ماوس برای “نمایش” سلولها استفاده کنید.
- از دکمه راست ماوس برای قرار دادن یا برداشتن پرچم استفاده کنید. 🚩
Tips til algoritmer
Nabo-celler
For å hente ut antall miner i en celle må du hente ut de 8 nabo-cellene i en sirkel.
Pseudokode for dette:
var mineCount = 0;
for (var xi = x - 1; xi <= x + 1; xi++) {
for (var yi = y - 1; y1 <= y + 1; yi++) {
// her legger du inn logikken for telling
}
}
Pass! Du må huske å sjekke om cellen du henter ut er utenfor brettet eller ikke. (mindre enn 0 eller større enn bredden/høyden).
Reveale tomme nabo-celler
Her må en rekursiv algoritme til. Her er det tekniske om rekursive algoritmer: Recursion Wikipedia.
Du sjekker naboer på samme måte som for Nabo-celler, også tar du rekursivt å åpner disse til du når en ende.
Rutene som skal bli “revealed” rekursivt må ikke være i følgende status:
- Ikke aktive (altså revealed)
- Ikke et flagg 🚩
- Ikke en mine 💣
- Må ikke være “utenfor” brettet
- Må ikke ha noen nabominer
Sjekke om du har vunnet
- Her sjekker du alle cellene på hele brettet.
- Hvis en celle som ikke er en mine ikke er “revealed” ennå så har du ikke vunnet.
- Kun når alle “ikke-mine”-celler er “revealed” vinner du.
Sjekke om du har tapt
Dersom du trykker direkte på en mine, sprenger den og du taper ummidelbart. Etterpå “reveales” hele brettet.
البته: موفق باشید! این وظیفه بسیار دشوار است که به آن دست یابید.
چیزهای اضافی که میتوانید در صورت تمایل اضافه کنید!
- یک کرونومتر اضافه کنید که زمان شما را ثبت کند.
- یک شمارنده اضافه کنید که نشان دهد چند پرچم باقی مانده است.
- “محافظت از حرکت اول” را اضافه کنید که حرکت اول شما را هرگز روی یک مین قرار ندهد.
- در اینجا میتوانید کاری کنید که حداقل کلیک اول یک منطقه امن 3x3 ایجاد کند.
- سیستم امتیاز بالا.
سایر انواع Minesweeper!
- شما میتوانید دو نوع مین، مثبت و منفی را اضافه کنید. مینهای مثبت مقدار مین یک سلول را
+1افزایش میدهند، و مینهای منفی آن را-1کاهش میدهند. - شما میتوانید منطق بررسی مین را تغییر دهید تا از حرکت “Knight” (اسب) در شطرنج استفاده کند، به طوری که تعداد مینها بر اساس یک سلول در فاصله L از سلول مورد نظر باشد.