پازل


مهارت‌های لازم:

  • آشنایی با JS

در این سوال قصد داریم یک بازی مشابه puzzle-8 را با استفاده از js و بدون استفاده از کتابخانه جانبی پیاده سازی کنیم.ظاهر کلی برنامه بدین صورت است:

توضیح تصویر

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

8-puzzle
├── __tests__
│   ├── requirements.txt
│   └── sample_test.py
├── .qsampletest
├── index.html
└── style.css
Plain text
راه‌اندازی پروژه
  • ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
  • سپس فایل index.html را در مرورگر خود باز کنید.

جزئیات🔗

این بازی مشابه با بازی 8-puzzle می باشد.با این تفاوت که در این بازی فرض شده است که سطر اول و آخر و هم‌چنین ستون اول و آخر با هم مجاور هستند.برای فهم دقیق گیف قرار داده شده در ابتدا سوال را با دقت مشاهده کنید. برای پیاده سازی نکات زیر را در نظر بگیرید:

  • حالت اولیه بازی را به شکل زیر در نظر بگیرید.
init_state = [
    [2, 3, 5],
    [1, 4, ''],
    [7, 8, 6]
]
JavaScript
  • وضعیت بازی را در یک عنصر با شناسه game_status نمایش دهید.
  • تعداد حرکات صورت گرفته را در یک عنصر با شناسه moves نمایش دهید.
  • با کلیک بر روی دکمه reset بازی به حالت اول بر می گردد.

نکات🔗

  • در صورت مرتب شدن پازل پیغام You won ! را نمایش دهید در غیر اینصورت پیغام Start moving Tile ! باید نمایش داده شود.(پیغام را کپی نکنید و خودتان تایپ کنید.)
  • تغییرات را تنها در فایل app.js اعمال کنید. تغییرات در بقیه فایل ها نادیده گرفته می شوند.
  • توجه کنید که داوری خودکار بر مبنای نام کلاس های انجام می‌شود.
  • پروژه را با ساختار زیر ارسال کنید.
    [your-zip-file-name].zip
└── app.js
    Plain text

قسمت آموزشی🔗

در این قسمت راهنمایی‌های سوال، به مرور اضافه می‌شود. مشکلات‌تان در راستای حل سوال را می‌توانید از بخش "سوال بپرسید" مطرح کنید.

قسمت آموزشی🔗

در این قسمت راهنمایی‌های سوال، به مرور اضافه می‌شود. مشکلات‌تان در راستای حل سوال را می‌توانید از بخش "سوال بپرسید" مطرح کنید.

راهنمایی شماره ۱
  • برای حل این سوال می توانید یک آرایه دو بعدی داشته باشید. سپس یک تابع بنویسید که با فراخوانی آن آرایه دو بعدی ساخته شده رندر شود.
  • همچنین می توانید یک تابع بنویسید که وظیفه آن جابجا کردن سلول ها باشد.
  • برای اینکه بتوانید عملکرد کلیک کردن در بازی را پیاده سازی کنید از تابع addEventListener‍ استفاده کنید. بعد می توانید توابعی که نوشتید را در callback این تابع اجرا کنید.
  • همچنین می توانید یک عملکردی پیاده سازی کنید تا به عنوان مثال آرایه شما از a[-1] (ایندکس های منفی یا بزرگتر از اندازه لیست) را نیز پشتیبانی کند (همانند پایتون). این قابلیت با استفاده از Proxy ها در جاوا اسکریپت قابل پیاده سازی است.به عنوان مثال :
const ProxyArray = (arr) => {
    return new Proxy(arr, {
        get(target, prop) {
            if (!isNaN(prop)) {
                prop = parseInt(prop, 10);
                if (prop < 0) {
                    prop += target.length;
                }
                if (prop >= target.length) {
                    prop = prop % target.length;
                }
            }
            return target[prop];
        }
    });
};
JavaScript
راهنمایی شماره ۲

برای رندر کردن ماتریس شما باید تمامی cell ها را داشته باشید. برای دریافت تمامی cell شما می توانید از کد زیر استفاده کنید.

let cells = document.querySelectorAll('.cell');
JavaScript

در نهایت می توانید با استفاده از یک حلقه for روی این لیست یا با استفاده از forEach*، محتوای هر کدام از *cell ها را مقدار دهی کنید.به عنوان نمونه:

cells.forEach(item => {
    item.innerHTML = `<span>${matrix[y][x]}</span>`
});
JavaScript
راهنمایی شماره ۳

می توانید کد زیر را کامل کنید.

let matrix = [
    [2, 3, 5],
    [1, 4, ''],
    [7, 8, 6]
];
// Get all cells
cells.forEach(item => {
    // set click listener for each cell
    item.addEventListener('click', (e) => {
        // get position of clicked cell
        // (x, y) current position of clicked cell
        moveCell(x, y); // move the cell to a position that is empty.
        renderMatrix(); // render the matrix
    })
});
function moveCell(x, y) {
    // todo
}
function renderMatrix() {
    // todo
}
JavaScript