أهلا وسهلا بك! تحسبا لبدء دورة "Fullstack JavaScript Developer" ، قرر أحد مؤلفينا مشاركة تجربته في إنشاء جهاز محاكاة للكتابة باللمس. ونحن بدورنا نريد أن نريك هذه المواد.
مرحبا بالجميع! قررت اليوم إظهار كيفية كتابة محاكي الكتابة باللمس في JavaScript. أعتقد أن كل واحد منا في بداية المسار قام بتدريب مطبوعاته - بعد كل شيء ، هذه واحدة من أهم مهارات المطور
.
هناك العديد من المواقع والبرامج على الإنترنت التي يمكن أن تساعدك على صقل مهارات الكتابة الخاصة بك والحصول على بعض المتعة. هناك ألعاب
للأطفال ، وهناك
ألعاب يمكنك من خلالها التنافس مع شخص آخر يطبع بشكل أسرع! لكن لنفترض أننا نريد إنشاء محاكي طباعة مع التصميم والسرعة التي نريدها نحن أنفسنا. واليوم سنحاول كتابة الجزء الأول من طلبنا ، ولكن سيكون من الممكن تشغيله
الآن .
لذلك ، كإطار للتخطيط ، اخترت
Bulma.css . Bulma متنوعة تمامًا ، وبمساعدتها يمكنك الاستغناء عن كتابة css على الأقل في المرحلة الأولى.
لذلك ، لنبدأ بإنشاء الصفحة الرئيسية. لكي لا أضيع مساحة على نفس الكود للجميع ، سأقول أنني في علامة
head قمت بتوصيل ملف
javascript و
bulma و
favicon .
<body> <section class="hero is-primary is-large"> <div class="hero-head container"> <h1 class="label is-size-3 has-text-white promo"> </h1> <h3 class="label is-size-4 has-text-link has-text-centered"></h3> <progress id="prog" class="progress is-danger" value="0" max="20"></progress> <h3 class="label is-size-5 has-text-white has-text-centered begin">Press Enter to Start</h3> </div> <div class="hero-body has-background-grey-dark "> <div id="columns"> <div class="buttons columns is-half is-centered "> </div> </div> </div> </section> </body>
نحن نصنع لوحة صغيرة فيها دعوة لمستخدمنا للعب عن طريق الضغط على مفتاح Enter. في عنصر
buttons ، سنرسم الأزرار الخاصة بنا ، والتي سيتم إنشاؤها عشوائيًا بواسطة JS. من الناحية المثالية ، يجب إخفاء التقدم المحرز في الأخطاء قبل بدء اللعبة ، وربما سنصلح هذا في الجزء التالي.
حسنًا ،
index.html جاهز ، وتولت
bulma الجمال والتخطيط. الآن يمكننا الغوص في شبيبة لدينا.
ما هي المفاتيح على لوحة المفاتيح التي يتم تدريبها أولاً؟ أعتقد أن الجميع يدرك أن أصابع الفهرسة الخاصة بك يجب أن تقع على مفاتيح
j و
f (سيقوم تطبيقنا بتحليل تخطيط اللغة الإنجليزية باعتباره الأكثر فائدة (مبرمجو 1C ، سامحوني إن أمكن)). يجب أن تكون الأصابع الوسطى على
k و
d ، على التوالي ، وبالإضافة إلى ذلك ، من المهم أن نضغط أثناء التدريب أيضًا على شريط المسافة. المجموع ، في نسختنا الأصلية ، سنحتاج إلى 5 أحرف.
لم يقل قال من القيام به. نخلق مجموعة حيث توجد جميع مفاتيحنا. بالإضافة إلى ذلك ، سننشئ مجموعة من الألوان ، لأن جهاز المحاكاة ، الذي تكون فيه كل الحروف بلون واحد ، ممل للغاية وغير مريح:
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
حسنًا ، مع مجموعة من الألوان والرموز ، قررنا. بعد ذلك ، نحصل على جميع عناصر DOM اللازمة لمزيد من العمل:
let begin = document.querySelector(".begin");
عظيم ، وردت العناصر الأساسية. الآن يمكنك البدء في إنشاء منطق تطبيقنا. نخلق وظيفة أنه بمساعدة من مولد عشوائي سوف تولد رموزنا بالنسبة لنا. أولاً ، نعطي رمز دالة تُرجعنا أرقامًا عشوائية من 0 إلى أقصى عدد معين. هذه هي وظيفة إنشاء الأرقام العشوائية الكلاسيكية من وثائق MDN:
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
حسنًا ، كل شيء جاهز الآن ، لقد حان الوقت لبدء إنشاء عناصر DOM:
function drawBoard() { for (let index = 0; index < 20; index++) {
الوظيفة جاهزة ، والآن يجب استدعاؤها. أذكرك أن بداية اللعبة تتم عن طريق الضغط على مفتاح Enter ، وما زلنا نريد إخفاء النقش المدعو. ومع ذلك ، يجب استدعاء اللعبة والرسم مرة واحدة فقط ، لذلك نستخدم الوسيطة
once لـ
addEventListener :
document.addEventListener('keydown', StartGame, { once: true
وهنا هي وظيفة
StartGame :
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
في
mainGame ، نستمع إلى جميع الأزرار التي تم الضغط عليها حتى يمكننا أن نفهم ما إذا كان المستخدم يضغط على الأزرار الموجودة على لوحة المفاتيح بشكل صحيح أم لا:
function mainGame() { document.addEventListener('keyup', press);
لذلك ، مع وظائف إعادة الاتصال هذه ، وصلنا إلى اللعبة الرئيسية. دعونا نفكر في المتغيرات التي نحتاجها. نحتاج إلى متغير يقوم بحساب أخطائنا ومتغير سنضيف إليه القيم عند الضغط عليه بنجاح:
var count_right = 0; var errors_count = 0;
حسنا ، الأكثر أساسية ولذيذة في المستقبل. من أجل تعدد الاستخدامات ، بحيث لا يعتمد تطبيقنا بشكل كبير على التصميمات الروسية والإنجليزية ، يمكننا استخدام
keyCode ، لكن هذا سيعقد الكود. نحتاج إلى الحصول على جميع الأحرف التي تم إنشاؤها ، وإذا كان المفتاح الموجود على لوحة المفاتيح يطابق معرف
drawBoard() (لاحظ ، أقوم أيضًا
drawBoard() كل معرف عنصر مساوٍ للمحتوى النصي للعنصر. بدون شك ، يمكنك قراءة المحتويات من خلال
textContent ، و في المستقبل ، ربما سنفعل ذلك) ، ثم يتم حذف العنصر. في حالة أخرى ، أضف قيمة إلى متغير يأخذ في الاعتبار أخطاء المستخدم ويكتبها داخل
progress :
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
عظيم! الآن يجب أن يكون طلبنا جاهزًا ويمكن اختباره.
في الجزء الثاني من هذه المقالة ، سننهي التطبيق عن طريق إضافة توفير محلي للنتائج وموسيقى تصورها ، والنقر فوق الأصوات ، والرسوم المتحركة ، ولوحة المتصدرين ، وإصدار من التطبيق الذي تم شحذه فقط للمبرمجين ، وكذلك إصلاح الأخطاء الطفيفة. إذا كان هناك المزيد من الأفكار والتعليقات ، فأنا في انتظارك في التعليقات.
هنا هذه المواد. نذكرك أن
هذه المادة كتبها كاتب مستقل ولا علاقة لها بالعملية التعليمية. إذا كنت مهتمًا بالتعليم وترغب في معرفة المزيد عن الدورة ، فنحن ندعوك إلى يوم مفتوح ، والذي سيعقد يوم الاثنين .