ساخت یک بازی ساده با جاوا اسکریپت + ویدئو

سلام و عرض ادب خدمت همه دوستان و همراهان سایت سبزلرن ، در این مقاله قصد دارم ساخت یک بازی ساده با جاوا اسکریپت رو بهتون یاد بدم.

بازی مدنظرمون تو این مقاله یک آزمون آنلاین هست که چند سوال را طراحی کرده و به ترتیب به کاربر نمایش میدهیم.

در انتهای آزمون امتیاز(نمره) کاربر را با توجه به تعداد پاسخ های صحیح انجام داده شده نمایش می دهیم.

ضمنا، برای پیاده سازی این بازی ساده با جاوا اسکریپت، شما باید آشنایی نسبتا خوبی با جاوا اسکریپت داشته باشید.

مراحل ساخت یک بازی ساده با جاوا اسکریپت

اگر جاوا اسکریپت بلد نیستید، ابتدا دوره جاوا اسکریپت سبزلرن رو بگذرونین و سپس بیاید سراغ این مینی پروژه آزمون آنلاین.

خب بدون تلف وقت بریم سراغ اصل کار…

کد های Html و Css در ساخت بازی بازی ساده

در این مینی پروژه همان طور که از اسمش معلوم است هدفمون یادگیری جاوا اسکریپت است؛ پس هیچ کد Html و Css نمی نویسیم.

اما شما می توانید برای زیبایی کار خودتان ظاهر چشم نوازی نیز طراحی کنید.

اگر هم با html و css آشنا نیستید ولی می خواهید یاد بگیرید ، در سبز لرن محتوا های آموزشی رایگان بسیاری قرار دارد

کد های جاوا اسکریپت در بازی

اصل کار همین جاست 🙂

اگر شما بخواهید پروژه ای تحت عنوان آزمون آنلاین پیاده سازی بکنید گام اول ذخیره سازی سوالات همراه با جواب ها داخل متغیر ها است. پس در گام اول سعی می کنیم پرسش ها و پاسخ های آزمون مورد نظرمون رو داخل متغیر ذخیره بکنیم. اما چه نوع متغیری؟!

به دلیل تعداد بالای سوالات باید از آرایه استفاده کنیم.

اما علاوه بر آرایه نیاز داریم که پاسخ هر پرسش در کنار خود اون پرسش نگهداری شود.

به این شکل که هر پرسش و پاسخ در کنار هم دیگر باشند.

برای این منظور می توانیم داخل جاوا اسکریپت از آبجکت ها استفاده کنیم.

همان طور که می دانید، آبجکت ها می توانند مقدار(Property) های مختلفی داشته باشند.

می توانیم یک مقدار داخل آبجکت را پرسش و یک مقدار دیگر را پاسخ در نظر بگیریم.

قطعه کد 1

در کد زیر پرسش و پاسخ های لازم برای آزمون را پیاده سازی کردیم:

var allQuestions = [
  {question: "2 + 2 ?", answer: 4},
  {question: "2 * 12 ?", answer: 24},
  {question: "3 - 1 ?", answer: 2},
  {question: "12 / 12 ?", answer: 1},
  {question: "22 / 2 ?", answer: 11}
]

همانطور که می بینید یک آرایه به اسم allQuestions داریم که داخل 5 آبجکت وجود دارد.

هر آبجکت دو مقدار داخل خود دارد که یکی از آن ها question و آن یکی answer می باشد.

به این معنی که هر آبجکت مشخصات یک پرسش و آزمون را در خود نگه میدارد.

پس ما تا اینجا تونستیم سوالات آزمون رو داخل متغیر allQuestions ذخیره کنیم.

الان هر ایندکس هر آرایه allQuestions یک نمونه از سوال آزمون را در بر می گیرد.

به کد زیر توجه کنین:

console.log(allQuestions[0]) // {question: "2 + 2 ?", answer: 4}
console.log(allQuestions[1]) // {question: "2 * 12 ?", answer: 24},
console.log(allQuestions[4]) // {question: "22 / 2 ?", answer: 11}

همان طور که مشاهده می کنید ایندکس 0 برای سوال اول، ایندکس 1 برای سوال دووم و … ایندکس 4 برای سوال آخر آرایه استفاده می شود و می توانیم با ایندکس های هر مقدار به سوال مورد نظر خودمان دسترسی داشته باشیم.

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

نمایش سوالات به کاربر

در این قسمت قصد داریم سوالات مرحله قبل را به کاربر نمایش بدهیم تا کاربر پاسخ های لازم را وارد کند.

همان طور که در مرحله قبل مشاهده کردید، 5 پرسش داریم و باید 5 پرسش را به کاربر نمایش بدهیم.

در این قسمت باید عمل “نمایش پرسش” را 5 بار تکرار کنیم.

چون که این عمل باید 5 بار تکرار شود، برای راحتی و اصولی بودن کار از حلقه استفاده می کنیم.

قطعه کد 2

به کد زیر دقت کنید:

for(var i = 0 ; i < allQuestions.length ; i++) {
    prompt(allQuestions[i].question);
}

خب یک حلقه for ایجاد کردیم و گفتیم از 0 شروع کن و تا زمانی که به تعداد آیتم های آرایه allQuestions برسی، کد های لازم داخل بلوک را انجام بده و در هر مرحله که کدهای داخل بلوک را انجام دادی، یک واحد به مقدار i اضافه کن.

در اولین اجرا مقدار i برابر با 0 است. چون شرط حلقه برقرار است برای اجرای کدهای لازم وارد حلقه میشود.

می خواهیم به کمک تابع prompt سوال اول را به کاربر نمایش بدهیم. همان طور که گفته شد مقدار i برابر با 0 است.

داخل حلقه ایندکس i (صفرم) را از آرایه واکشی کرده و از آن مقدار question(پرسش) را به کاربر نمایش می دهیم.

تا به الان یک بار کدهای داخل حلقه را اجرا کرده و سوال اول را به کاربر نمایش دادیم. دفعه بعد برای اجرای دوباره کد های داخل حلقه باید شرط حلقه برقرار باشد، یعنی متغیر i از تعداد سوالات داخل آرایه کمتر باشه. آیا این شرط برقرار است؟

بله، مقدار 0 (متغیر i) از 5 (تعداد سوالات داخل آرایه) کمتر است. پس یک واحد به i اضافه شده و مقدار آن برابر با 1 می شود و سپس سوال بعدی به کاربر نمایش داده شده و … به همین ترتیب تا آخرین پرسش موجود در آرایه پیش رفته و تمامی سوالات را به کاربر نمایش می دهد.

اما مقداری که کاربر برای هر پرسش وارد می کند، جایی ذخیره نشده و ما به آن ها دسترسی نداریم!

برای این موضوع سراغ قسمت بعد می رویم.

دریافت پاسخ از کاربر

در این مرحله می خواهیم پاسخ هایی را که کاربر برای هر پرسش وارد کرده است دریافت کنیم.

همان طور که در قسمت قبل متوجه شدید، کاربر از طریق تابع prompt پاسخ مورد نظر خود را وارد می کند.

پس ما باید مقدار خروجی تابع prompt را داخل متغیری ذخیره کنیم.

قطعه کد 3

خب به کد دقت کنین:

for(var i = 0 ; i < allQuestions.length ; i++) {  
  var questionPrompt = prompt(allQuestions[i].question);
}

همان طور که مشاهده می کنید مقدار خروجی تابع prompt را داخل متغیر questionPrompt ذخیره کردیم تا بعدا بتوانیم به کمک آن درست یا نادرست بودن پاسخ را بررسی کرده و امتیاز کاربر را تعیین کنیم.

تعیین امتیاز

در این قسمت برای تعیین امتیاز کاربر باید تعداد پاسخ های صحیح کاربر را حساب کنیم. به عنوان مثال اگر 3 سوال را درست پاسخ دهد امتیاز 3 را کسب می کند، اگر 4 سوال را درست پاسخ دهد امتیاز 4 را کسب می کند و ….

پس با این تعریف یک متغیری به اسم userScore تعریف کرده و مقدار آن را 0 قرار می دهیم و با هر پاسخی که از کاربر یک واحد به مقدار متغیر userScore اضافه می کنیم.

با این کار در نهایت مقدار userScore برابر با تعداد پاسخ های صحیح کاربر شده و آن را به عنوان امتیاز کاربر نمایش می دهیم.

قطعه کد 4

به کد زیر دقت کنین:

var userScore = 0;

for(var i = 0 ; i < allQuestions.length ; i++) {  
  var questionPrompt = prompt(allQuestions[i].question);
}

console.log("شما " + userScore + " سوال از 5 سوال رو درست جواب دادید");

خب بنا به کد نوشته شده یک متغیر به اسم userScore تعریف کردیم و مقدار آن را برابر با 0 قرار دادیم.

داخل حلقه وقتی سوالات را به کاربر نمایش می دهیم، پاسخ های دریافتی را به کمک if بررسی می کنیم و در صورت صحیح بودن پاسخ سوال، یک واحد به امتیاز کاربر (متغیر userScore) اضافه می کنیم.

اما از کجا باید صحیح بودن پاسخ هر سوال را متوجه بشویم؟!

اگر یادتان باشد در اولین قسمت از پیاده سازی پروژه هر سوال را داخل یک آبجکت و پاسخ آن سوال را نیز در کنار همان سوال ذخیره کردیم.

الان زمانی که داخل حلقه یک سوال را به کاربر نمایش می دهیم در همان قسمت به پاسخ آن سوال نیز دسترسی داریم و به راحتی می توانیم با یک if بررسی کنیم که پاسخ وارد شده با پاسخ سوال نمایش داده شده برابر است یا نه. 

در صورت برقرار بودن شرط یک واحد به امتیاز کاربر اضافه می شود و در غیر این صورت هیچ کاری انجام نمی شود.

تا به الان توانستیم امتیاز کاربر را نیز محاسبه کنیم.

بعد از این که تمام سوالات آزمون را به کاربر نمایش دادیم و امتیاز را نیز محاسبه کردیم، شرط حلقه false (نادرست) می شود و بنابراین از حلقه خارج می شود.
خارج از حلقه کد زیر را نوشتیم:

console.log("شما " + userScore + " سوال از 5 سوال رو درست جواب دادید");

این خط هم که خیلی ساده است.
به کمک تابع alert یک پیغامی به کاربر نمایش می دهیم و در پیغام مربوطه امتیاز نهایی را به کاربر نمایش می دهیم.
به همین راحتی تونستیم یک آزمون آنلاین پیاده سازی کنیم 🙂

سخنان پایانی

در این مقاله سعی کردم ساخت یک مینی پروژه آزمون آنلاین رو به شما آموزش بدم.

به دلیل این که ممکن است برخی از دوستان در جاوا اسکریپت خیلی مبتدی باشند، در این مینی پروژه از مطالب مربوط به Dom استفاده نکردم.

برای درک بهتر و عمیق تر کد های این مینی پروژه حتما حتما ویدئوی مربوط به این مقاله را مشاهده کنید.

اگر هر سوال، انتقاد یا پیشنهادی در مورد این مقاله داشتید، حتما در بخش نظرات همین مقاله بیان کنید.

امیدوارم این آموزش برای شما مفید بوده باشه.

تا مقاله بعدی خدانگهدار.