آموزش پروژه جاوا اسکریپت: ساخت یک بازی حافظه کارت تصادفی - 2024

سرفصل ها و درس ها

تنظیم کد پروژه Setting up the project code

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

• معرفی بخش Section intro

• ساختار دوره و کد شروع Course structure and starting code

• نوشتن HTML Writing the HTML

• نوشتن CSS و توضیح REM در مقابل EM Writing CSS, and explaining REM vs EM

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

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

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

• فایل های پروژه Project Files

• آشنایی با REM و EM Understanding REM and EM

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

• معرفی بخش Section intro

• یک فایل 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/wait با Fetch Using async/await with Fetch

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

• سرور توسعه محلی Local Development Server

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

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

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

• عناصر به طور خودکار به طرح شبکه CSS اضافه می شوند 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

• قطعه سند چیست؟ 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

• فایل های پروژه Project files

• آزمون بخش Section Quiz

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

• معرفی بخش Section intro

• افزودن شنونده رویداد کلیک به صورت پویا Adding the click event listener dynamically

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

• تنظیم عملکرد زدن Setting up the shuffle function

• الگوریتم زدن فیشر-یتس (یا کنوت). Fisher-Yates (or Knuth) shuffle algorithm

• اعمال زدن فیشر-ییتس به آرایه کارت های ما Applying the Fisher-Yates shuffle to our cards array

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

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

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

• فایل های پروژه Project files

• آزمون بخش Section Quiz

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

• معرفی بخش Section intro

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

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

• ویژگی مجموعه داده و عملگر سه تایی در جاوا اسکریپت برای پیاده سازی منطق تطبیق 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

• فایل های پروژه Project Files

• آزمون بخش Section Quiz

کدگذاری ستارگان در حال سقوط، و اضافه کردن یک پوشش تصویر از دست رفته Coding falling stars, and adding a losing image overlay

• معرفی بخش Section intro

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

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

• ایجاد ساختار HTML برای حاوی تصویر از دست رفته ما Creating the HTML structure to contain our losing image

• با استفاده از CSS position:fixed و همچنین با استفاده از متد () requestAnimationFrame Using CSS position:fixed and also using the requestAnimationFrame() method

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

• استفاده از انیمیشن های CSS و فریم های کلیدی CSS 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

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

• کد پروژه Project Code

• آزمون بخش Section Quiz

آزمون دوره Course Test

• جاوا اسکریپت، CSS و موارد دیگر! JavaScript, CSS, and more!

Outro Outro

• Outro Outro