آموزش زمان بازی ۲۰۲۴ – ساخت بازی با جاوااسکریپت و ترتیب تصادفی - آخرین آپدیت

راه‌اندازی کد پروژه Setting up the project code

• معرفی دوره Course Intro

• نوشتن HTML Writing the HTML

• نوشتن CSS و توضیح تفاوت REM و EM Writing CSS, and explaining REM vs EM

• استفاده از سیستم CSS Grid برای نمایش کارت‌ها Using the CSS grid system to display the cards

• تعریف متغیرهای root در CSS Defining CSS root variables

• بیشتر درباره CSS root و قراردادهای نام‌گذاری More about CSS root and naming conventions

پر کردن شبکه CSS با کارت‌ها Populate our CSS grid with cards

• ایجاد فایل JSON حاوی آرایه‌ای از اشیاء کارت Create a JSON file that contains an array with card objects

• نحوه ارجاع به فایل JSON از طریق فایل اصلی جاوااسکریپت How to reference a JSON file from our main JavaScript file

• استفاده از async/await همراه با Fetch Using async/await with Fetch

• بررسی CORS، پروتکل فایل و دسترسی‌های سرور توسعه محلی CORS, File Protocol, and what files a local development server can access

• استفاده از Fetch سنتی و متد Array.map() Traditional Fetch and the Array.map() method

• استفاده از تابع flatmap() برای ایجاد آرایه کارت‌ها Using the flatmap() function to create our cards array

• استفاده از spread syntax برای ایجاد آرایه Using the spread syntax to create an array

• افزودن خودکار المان‌ها به چیدمان CSS Grid Elements are automatically added to the CSS grid layout

• نحوه ارجاع به کارت‌ها در کد How cards will be referenced in our code

• افزودن مستقیم کارت‌ها به DOM Directly adding cards to the DOM

• استفاده از appendChild() برای افزودن کارت‌ها به DOM Using appendChild() to add our cards to the DOM

• مشکلات افزودن مستقیم آیتم‌ها به DOM زنده در هر حلقه What are the problems with adding items directly to the live DOM on each loop

• داکیومنت فرگمنت (Document Fragment) چیست؟ What is a document fragment?

• استفاده از فرگمنت‌ها برای افزودن کارت‌ها به DOM زنده Using fragments to add cards to the live DOM

• تست کد و دسترسی به ویژگی childElementCount Testing code and accessing the childElementCount property

• استایل‌دهی به پشت کارت با CSS Styling back of the card with CSS

• استایل‌دهی به روی کارت با CSS Styling front of the card with CSS

افزودن افکت چرخش و استفاده از شافل Fisher-Yates Adding flip effect, and using the Fisher-Yates shuffle

• افزودن داینامیک شنونده رویداد کلیک (Click Event Listener) Adding the click event listener dynamically

• استفاده از تبدیل‌های سه بعدی CSS برای چرخش ۱۸۰ درجه کارت روی محور Y Using CSS 3D transformations to rotate our card 180 degrees on the Y-axis

• راه‌اندازی تابع شافل (ترتیب تصادفی) Setting up the shuffle function

• الگوریتم شافل Fisher-Yates (یا Knuth) Fisher-Yates (or Knuth) shuffle algorithm

• اعمال شافل Fisher-Yates روی آرایه کارت‌ها Applying the Fisher-Yates shuffle to our cards array

• بررسی لاگ مستقیم آرایه در کنسول و ارجاع حافظه‌ای Logging an array directly in the console, logs a reference to it in memory

• حل مشکل با ایجاد یک کپی کم‌عمق از آرایه با spread syntax Solving the issue by creating a shallow copy of the array using spread syntax

• استفاده از destructuring assignment برای بهبود کد Using the destructuring assignment to improve our code

افزودن منطق کارت‌های مشابه و غیرمشابه و شمارنده‌ها Adding logic for matched and unmatched cards, and counters

• استفاده از کلمه کلیدی THIS برای تعریف کارت اول و دوم Using THIS keyword to define the first and second card

• افزودن فلگ برای جلوگیری از کلیک همزمان روی بیش از ۲ کارت Adding a flag to disallow the user to click on more than 2 cards at once

• استفاده از ویژگی Dataset و عملگر Ternary برای پیاده‌سازی منطق تطبیق Dataset property, and ternary operator in JavaScript to implement matching logic

• استفاده از تابع setTimeout() برای تعریف تابع unflipCard Using the setTimeout() function to define the unflipCard function

• بازنشانی متغیرها و کارت‌ها Resetting our variables and cards

• استفاده از متد removeEventListener() و افزودن رنگ پس‌زمینه Using removeEventListener() method, and adding a background color

• جلوگیری از کلیک مجدد کاربر روی یک کارت و بازنشانی فلگ‌ها Precluding the user from clicking on the same card twice, and resetting flags

کدنویسی ستاره‌های ریزان و افزودن لایه تصویر باخت Coding falling stars, and adding a losing image overlay

• افزودن شمارنده برای تعداد تلاش‌های باقی‌مانده Adding a counter for tries remaining

• استفاده از عملگر کاهش (decrement) و بررسی ساده با IF Using the decrement operator and performing a simple IF check

• ایجاد ساختار HTML برای نمایش تصویر باخت Creating the HTML structure to contain our losing image

• استفاده از position در CSS و متد requestAnimationFrame() Using CSS position and also using the request Animation Frame() method

• ایجاد ستاره ریزان با استفاده از جاوااسکریپت Creating a falling star using JavaScript

• اعمال انیمیشن‌های CSS و keyframes Applying CSS animations and CSS keyframes

• تست کد و استفاده از متد remove() برای حذف ستاره‌ها از DOM Testing code, and using the remove() method to remove stars from the DOM

• استفاده از شمارنده‌ها، setInterval و clearInterval Using counters, setInterval and clearInterval

• تست کد نهایی Testing final code

• اعمال transition در CSS برای رنگ پس‌زمینه پشت کارت Applying a CSS transition to the background color of our back card

بخش پایانی Outro

• بخش پایانی Outro