ورود / ثبت نام
سنگ کاغذ قیچی در جاوا اسکریپت!
همتون حداقل یک بار بازی سنگ کاغذ قیچی رو انجام دادی و فکر کنم دیگه نیازی به توضیح قوانین بازی نباشه، اما اگربلد نیستید قوانین سنگ کاغذ قیچی در ویکی پدیا رو ببینید.
توی این آموزش میخواهیم این بازی رو با هم پیاده کنیم و با یه تغییر کوچیک میخواهیم بازی رو جذاب تر طراحی کنیم. چه جوری؟ ما دو تا وضعیت برای بازی در نظر میگیریم که با بکگراند سبز و قرمز نمایش میدیم. اگر بک گراند سبز بود شما باید دستی رو انتخاب کنید که منجر به برد شما بشه و اگر بکگراند قرمز بود باید دستی رو انتخاب کنید که کامپیوتر برنده بشه. در ادامه این پست کدهای این بازی رو میبینید و در نظر داشته باشید که آموزش کدنویسی این بازی رو در یوتیوب من میتونید ببینید. کدهایی که در ادامه میبینید رو با این ذهنیت که شما آموزش یوتیوب من رو دیدید براتون آماده کردم و توضیح زیادی در مورد کدها ندادم. پس اگر کدها رو خوندید و خوب متوجه نشدید فیلترشکنتون رو روشن کنید و آموزش رو در یوتیوب ببینید:
در ادامه قراره با هم این موارد رو با هم پیاده سازی کنیم:
1- پیاده سازی بازی سنگ کاغذ قیچی به صورت ساده
2- کدهای آماده html و css بازی
3-تکمیل کدهای آماده با استفاده از جاوا اسکیپت
4- تمرینهای این جلسه (خیلی مهمه!)
پیاده سازی بازی سنگ کاغذ قیچی
نکته مهم اینه که اگر کاربر به جای sang بیاد و Sang یا SANG وارد کنه الگوریتم ما درست کار نمیکنه. تمرین این جلسه رو با دقت دنبال کنی میتونی این مشکل رو حل کنی.
کدهای html و css سنگ کاغذ قیچی
در ادامه میتونید کدهای آماده html و css این بازی رو دانلود کنید. فایلی که دانلود میکنید شامل فایلهای مورد نیاز این پروژه است: عکسها، صوت، فایل اچ تی ام و سی اس اس. در پوشه ای که در اختیارتون قرار میگیره فونت استعداد هم وجود داره که متفاوت با فونتیه که من در ویدیو استفاده میکنم و این تفاوت رو در فارسی و انگلیسی شدن اعداد مشاهده میکنید. یعنی من در آموزشم اعداد فارسی رو دارم و شما با فونت استعداد اعدادتون انگلیسیه. فونتی که من استفاده میکنم فونت ایرانسنسه که اگه دوست دارید از این فونت استفاده کنید باید لایسنس این فونت رو خریداری کنید. برای خرید فونت ایرانسنس از سایت فونتیران کلیک کنید
در فایل دانلودی بالا کدهای مربوط به html ، css و جاوا اسکریپت را میتوانید پیدا کنید:
فایل main-before.js فایلی است که شامل توابع آماده مثل پخش صدا، تغییر رتگ بکگراند و … است و باید کدهای مربوط به بازی سنگ گاغذ قیچی را به این فایل اضافه کنید تا بازی تکمیل شود. کدها را در قسمت بعدی ببینید
حمایتهای شما یه دلگرمیه برای من که بتونم همچنان آموزشهای با کیفیت و رایگان تولید کنم
تکمیل پروژه
2- کدهای آماده به شکلی در اختیار شما قرار گرفته است که با کلیک بر روی دستهای سطر پایین تابع check فراخوانی میشود. خط 21 تا 23 index.html را ببینید:
و حالا میتوانیم به این صورت کدهایمان را تکمیل کنیم:
و حالا بازی رو تست کنید و از کدی که نوشتید لذت ببرید 🙂
تمرینهای این جلسه نکات خیلی خوبی داره، حتما انجامش بدید، مخصوصا تمرین آخری که قراره بازی این جلسه رو قشنگ تر هم کنه
تمرین
1- به نظرتون کد زیر چه کاری انجام میده؟ به ازای ورودی های 5 و 10 تست کنید ولی قبل از اینکه تو vscode تست کنید حدس بزنید تو خروجی چند چاپ میشه.
2- تمرین قبلی رو با کد زیر تکرار کنید. اگر در تمرین قبلی اون چیزی که حدس میزدید با چیزی که در خروجی چاپ شد متفاوت بود با این کد مشکلتون حل میشه:
نکته های تمرین 1 و 2 رو فهمیدید؟ اگه دوست داشتید در قسمت نظرات این پست توضیح بدید.
3- کد زیر چه کاری انجام میده؟ میتونید چندین بار اجراش کنید که دقیقتر بفهمید:
4- کدی بنویسید که یک عدد تصادفی در بازه 150 تا 300 تولید کنه
5- و تمرین آخر یه تمرین خیلی قشنگ!
بازی قبلی رو تا جایی ادامه دادیم که من به عنوان کاربر باید دستی رو انتخاب کنم که کامپیوتر برنده بشه. اما الان میخواهیم بازی رو سخت ترش کنیم و اونم اینه که تو هر مرحله بازی بکگراند بازی میتونه سبز یا قرمز باشه. اگه سبز بود کاربر باید دستی انتخاب کنه که برنده شه و اگه قرمز بود باید دستی انتخاب کنه کامپیوتر برنده شه. راهنمایی در مورد این تمرین رو هم در لابلای ویدیوی یوتیوب و به صورت ویژه در انتهای آموزش گفتم.
شما سیزدهمین جلسه از آموزشهای رایگان جاواسکریپت من رو به پایان رسوندید. اگر دوست دارید میتونید همه آموزشهای رایگان من رو در سایت و یا یوتیوب از اینجا دنبال کنید:
این مطلب برات مفید بود؟
من یک دوره آموزشی جامع جاوا اسکریپت آماده کردم که با شرکت در این دوره شما رو آماده ورود به بازار کار میکنم. مزیت این دوره پشتیبانی دائمی دوره است که من همراه شما خواهم بود که جاوا اسکریپت رو یاد بگیرید و قدم در راه ورود به بازار کار بردارید. پیشنهاد میکنم سرفصلهای دوره و پروژه هایی که در دوره پیاده سازی شده رو ببینید:
ممنون که تا اینجا همراه من بودید. اگر از آموزش این پست خوشتون اومد و یا سوالی داشتید حتما در قسمت نظرات با من درمیون بذارید. اگر هم به یوتیوب و یا اینستاگرام دسترسی دارید من رو در این دو پلتفرم دنبال کنید و با لایک ها و کامنتاتون به من انرژی بدید. در کانال تلگرام هم میتونید بیشتر با من در ارتباط باشید