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

• تسلط به hook
• کار کاردن با state و reducer
• آشنایی با قوانین بازی مار

ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

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

snake-game
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── assets
│   │   └── index.css
│   ├── components
│   │   ├── apple.js
│   │   ├── game.js
│   │   └── snake.js
│   ├── hooks
│   │   └── use-snake.js
│   ├── index.js
│   ├── initialState.js
│   └── logic.js
├── package-lock.json
└── package.json

جزئیات

در این سوال شما باید هوک useSnake که در فایل hooks/use-snake.js تعریف شده را کامل کنید. این هوک در کامپوننت game.js استفاده شده و آبجکتی شامل تمام اعضای وضعیت اولیه بازی برمیگرداند که در ابتدا برابر با آن است و سپس براساس موارد زیر تغییر میکند. شما در این سوال باید تغییرات لازم را در هر ۱۰۰ میلی‌ثانیه (سرعت بازی) و کلیک شدن دکمه‌های w s a d در کیبورد روی وضعیت بازی اعمال کنید. (وضعیت اولیه بازی را حتما از فایل initialState.js بخوانید)

• مار و غذا در ابتدا در مکان اولیه تعریف شده هستند.
• در شروع کار مار به سمت راست شروع به حرکت میکند.
• حرکت‌ها یک لیست است که در حالت اولیه یک آیتم دارد، با فشار دادن دکمه های w s a d اگر حرکت مخالف اولین حرکت تو این لیست نباشد به لیست اضافه میشود. وقتی حرکت‌ها داخل لیست بیشتر از یکی باشد به ترتیب از اولین حرکت، رفته و از لیست خارج میشوند تا به یک آیتم در لیست برسد. (مسیر حرکت مار اولین ایتم لیست حرکت‌ها است و این لیست همواره حداقل یک آیتم دارد)
• مار بعد از خوردن غذا رشد میکند.
• غذا بعد از خورده شدن تو مکان رندمی از بورد ظاهر میشود که حتما داخل بورد است.
• بازی با خوردن مار با خودش دوباره از وضعیت اولیه شروع میشود.

وضعیت اولیه بازی

{
  cols: 20,
  rows: 14,
  board: {width: 700, height: 500},
  speed: 100,
  moves: [EAST],
  snake: [{x: 2, y: 2}],
  apple: {x: 16, y: 2},
}

مختصات

مختصات‌ها در بازی مار به صورت یه ابجکت هستند. مبدا مخصات {x: 0, y: 0} گوشه بالا سمت چپ بورد بازی است.

مربع ابی نشان داده شده در مختصات {x: 2, y: 1} است.

نکات

• شما تنها مجاز به اعمال تغییرات در فایل‌هایhooks/use-snake.js و logic.js هستید.
• فایل logic.js فقط یک فایل اضافه است که بتوانید توابعی که مربوط به logic بازی است را در آن تعریف کنید. این فایل میتواند خالی باشد
• تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
• پس از اعمال تغییرات، پروژه را ZIP کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.