فرادرسطراحی یک بازی ساده با HTML5 و جاوا اسکریپت — از صفر تا صد
توپ جادویی 8 (Magic 8 Ball) یک اسباب‌بازی مشهور است که برای مشورت مورد استفاده قرار می‌گیرد. این توپ (+) در دهه 1950 از سوی Mattel توسعه یافته و اصول آن ساده است. کاربر یک سؤال آری یا نه از توپ جادویی که به صورت یک توپ پلاستیکی بزرگ است می‌پرسد و سپس آن را به پشت باز می‌گرداند تا پاسخ نوشته شده روی سطح توپ ظاهر می‌شود. در این راهنما قصد داریم شیوه ایجاد یک بازی ساده در HTML5 به نام یک «توپ جادویی 8» را با استفاده از جاوا اسکریپت بررسی کنیم.
ایجاد ساختار صفحه
نخستین گام ایجاد ساختار صفحه برای توپ جادویی 8 است:
1<html>
2 <head>
3 <title>Magic 8 Ball</title>
4 </head>
5 <body>
6 <div id="content">
7 <h1>Magic 8 ball on SSaurel's Channel</h1>
8 <p id="info">Ask me what you want to know and click on the Magic 8 Ball</p>
9 <input type="text" id="question" />
10 <div id="eight-ball" class="eight-ball">
11 <div class="answer">
12 <p id="eight">8</p>
13 <p id="answer"></p>
14 </div>
15 </div>
16 </div>
17 </body>
18</html>در فایل فوق یک div محتوا برای قرار دادن توپ جادویی 8 به صورت مرکزی روی صفحه طراحی کردیم. سپس عنوان صفحه را در تگ h1 قرار داده‌ایم. همچنین پیامی برای کاربر نمایش می‌دهیم که شیوه بازی کردن با توپ جادویی 8 را توضیح می‌دهد. در گام بعدی یک ورودی تعریف کرده‌ایم که امکان وارد کردن سؤال از سوی کاربر را فراهم می‌سازد.
برای نمایش توپ جادویی 8 باید دو div جاسازی کنیم. div اول برای نمایش پس‌زمینه توپ جادویی 8 استفاده می‌شود. div دوم برای نمایش داخل توپ مورد استفاده قرار می‌گیرد. علاوه بر آن یک پاراگراف اول در div تو در تو برای نمایش شماره 8 پیش از کلیک کاربر روی توپ جادویی 8 برای دریافت پاسخ تعریف می‌کنیم. در نهایت پاراگراف دوم را تعریف می‌کنیم که برای نمایش پاسخ‌های ارائه شده از سوی توپ جادویی 8 استفاده می‌شوند.
نمایش توپ جادویی 8
با توجه به ساختار HTML5 فوق باید برخی قواعد CSS برای نمایش صحیح توپ جادویی 8 را تعریف کنیم:
کدهای زیر برای این منظور نوشته شده‌اند.
1<html>
2 <head>
3 <title>Magic 8 Ball</title>
4
5 <style type="text/css">
6 h1 { font-weight: 100; font-size: 2.5em;}
7
8 #content {
9 width: 600px;
10 margin: 0 auto;
11 margin-top: 50px;
12 border: 1px dotted black;
13 text-align: center;
14 font-family: 'Helvetica Neue', arial;
15 font-weight: 100;
16 }
17
18 div.eight-ball {
19 background-color: black;
20 border: 1px solid black;
21 border-radius: 50%;
22 width: 300px;
23 height: 300px;
24 margin: 0 auto;
25 margin-bottom: 30px;
26 margin-top: 30px;
27 }
28
29 div.answer {
30 background-color: #333;
31 border: 1px solid #333;
32 border-radius: 50%;
33 width: 50%;
34 height: 50%;
35 margin: 25% auto;
36 }
37
38 p#eight {
39 font-size: 5em;
40 margin: 20% auto;
41 color: white;
42 }
43
44 p#answer {
45 padding: 23px;
46 color: lightblue;
47 letter-spacing: 2px;
48 font-size:18px;
49 }
50
51 #question {
52 margin: 20px;
53 padding: 10px;
54 width: 400px;
55 font-size:22px;
56 }
57
58 #info {
59 font-size: 22px;
60 }
61
62 </style>
63
64 </head>
65 <body>
66 <div id="content">
67 <h1>Magic 8 ball on SSaurel's Channel</h1>
68 <p id="info">Ask me what you want to know and click on the Magic 8 Ball</p>
69 <input type="text" id="question" />
70 <div id="eight-ball" class="eight-ball">
71 <div class="answer">
72 <p id="eight">8</p>
73 <p id="answer"></p>
74 </div>
75 </div>
76 </div>
77 </body>
78</html>در کد فوق هیچ چیز نامعمولی وجود دارد. صرفاً مقداری CSS معمولی تعریف شده که امکان به دست آوردن رندرینگ زیر را برای توپ جادویی 8 به دست می‌دهد:
افزودن منطق به توپ جادویی 8 با جاوا اسکریپت
اینک باید مقداری منطق به توپ خود اضافه کنیم که این کار با استفاده از جاوا اسکریپت انجام می‌شود. در نخستین گام یک متغیر با 20 پاسخ تعریف می‌کنیم:
از یک آرایه ساده برای پاسخ‌ها استفاده می‌کنیم. زمانی که پنجره بارگذاری می‌شود، یک شنونده رویداد روی div توپ 8 نصب می‌کنیم. بدین ترتیب هنگامی که کاربر روی توپ جادویی 8 کلیک کند، تابع ما فراخوانی خواهد شد.
در این تابع بررسی می‌کنیم آیا سؤال وارد شده یا نه. اگر نشده باشد هشداری به کاربر نمایش می‌دهیم که سؤالی باید وارد کند. اگر وارد شده باشد، متن 8 را از پاراگراف اول div پاسخ، حذف می‌کنیم. سپس یک پاسخ تصادفی در آرایه پاسخ‌ها به دست می‌آوریم. در نهایت باید این پاسخ را در پاراگراف دوم درون div پاسخ نمایش دهیم. بدین ترتیب کد زیر به دست می‌آید:
1<html>
2 <head>
3 <title>Magic 8 Ball</title>
4
5 <script type="text/javascript">
6 // we define answers
7 var answers = ["It is certain",
8 "It is decidedly so",
9 "Without a doubt",
10 "Yes - definitely",
11 "You may rely on it",
12 "As I see it, yes",
13 "Most likely",
14 "Outlook good",
15 "Yes", "Signs point to yes",
16 "Don't count on it",
17 "My reply is no",
18 "My sources say no",
19 "Outlook not so good",
20 "Very doubtful",
21 "Reply hazy, try again",
22 "Ask again later",
23 "Better not tell you now",
24 "Cannot predict now",
25 "Concentrate and ask again"];
26
27 window.onload = function() {
28 var eight = document.getElementById("eight");
29 var answer = document.getElementById("answer");
30 var eightball = document.getElementById("eight-ball");
31 var question = document.getElementById("question");
32
33 eightball.addEventListener("click", function() {
34 if (question.value.length < 1) {
35 alert('Enter a question!');
36 } else {
37 eight.innerText = "";
38 var num = Math.floor(Math.random() * Math.floor(answers.length));
39 answer.innerText = answers[num];
40 }
41 });
42 };
43 </script>
44
45 <style type="text/css">
46 h1 { font-weight: 100; font-size: 2.5em;}
47
48 #content {
49 width: 600px;
50 margin: 0 auto;
51 margin-top: 50px;
52 border: 1px dotted black;
53 text-align: center;
54 font-family: 'Helvetica Neue', arial;
55 font-weight: 100;
56 }
57
58 div.eight-ball {
59 background-color: black;
60 border: 1px solid black;
61 border-radius: 50%;
62 width: 300px;
63 height: 300px;
64 margin: 0 auto;
65 margin-bottom: 30px;
66 margin-top: 30px;
67 }
68
69 div.answer {
70 background-color: #333;
71 border: 1px solid #333;
72 border-radius: 50%;
73 width: 50%;
74 height: 50%;
75 margin: 25% auto;
76 }
77
78 p#eight {
79 font-size: 5em;
80 margin: 20% auto;
81 color: white;
82 }
83
84 p#answer {
85 padding: 23px;
86 color: lightblue;
87 letter-spacing: 2px;
88 font-size:18px;
89 }
90
91 #question {
92 margin: 20px;
93 padding: 10px;
94 width: 400px;
95 font-size:22px;
96 }
97
98 #info {
99 font-size: 22px;
100 }
101
102 </style>
103
104 </head>
105 <body>
106 <div id="content">
107 <h1>Magic 8 ball on SSaurel's Channel</h1>
108 <p id="info">Ask me what you want to know and click on the Magic 8 Ball</p>
109 <input type="text" id="question" />
110 <div id="eight-ball" class="eight-ball">
111 <div class="answer">
112 <p id="eight">8</p>
113 <p id="answer"></p>
114 </div>
115 </div>
116 </div>
117 </body>
118</html>تست عملی توپ جادویی 8
اینک به بهترین بخش این مقاله می‌رسیم که مرحله وارد کردن یک سؤال ساده برای توپ جادویی 8 است.
سؤال ما این است که «آیا جاوا از کاتلین بهتر است؟»
پاسخ توپ برای ما چنین بوده است:
چنان که می‌بینید پاسخ کاملاً روشن است!
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
- آموزش JavaScript ES6 (جاوا اسکریپت)
- مجموعه آموزش‌های برنامه‌نویسی
- جاوا اسکریپت چیست؟ — به زبان ساده
- آموزش جاوا اسکریپت مقدماتی: ساخت بازی حدس اعداد — به زبان ساده
==
