एक पियानोवादक के बिना एक घोड़े और ऑर्केस्ट्रा के लिए टेलीफोन। सामने के छोर पर खेल कार्यों के साथ कैसे आना है

नमस्ते! मेरा नाम दिमित्री एंड्रियानोव है, मैं यैंडेक्स में एक इंटरफ़ेस डेवलपर के रूप में काम करता हूं। पिछले साल मैंने हमारी ऑनलाइन फ्रंट एंड प्रतियोगिता की तैयारी में भाग लिया।

कुछ दिनों पहले मुझे आयोजकों से एक पत्र मिला, जिसमें पूछा गया था कि क्या मैं फिर से भाग लेना चाहूंगा - दूसरी प्रोग्रामिंग चैंपियनशिप के लिए सामने वाले कार्यों के साथ। मैं सहमत था - और सोचा कि यह लेख के लिए एक दिलचस्प विषय था। कॉफी में डालो, वापस बैठो। मैं आपको बताऊंगा कि हमने एक साल पहले कार्यों को कैसे तैयार किया।

वहाँ हम में से लगभग दस थे, उनमें से लगभग सभी यैंडेक्स सेवाओं के फ्रंट-एंड डेवलपर्स थे। हमें उन कार्यों का चयन करना था जिन्हें ऑटोटेस्ट द्वारा जांचा जाएगा।

प्रोग्रामिंग प्रतियोगिताओं के लिए, एक विशेष सेवा है - Yandex.Contest । वहां आप कार्यों को प्रकाशित कर सकते हैं, और प्रतिभागी पंजीकरण और उन्हें हल कर सकते हैं। कार्यों का परीक्षण स्वचालित रूप से होता है, प्रतिभागियों के परिणाम एक विशेष तालिका में प्रकाशित किए जाते हैं। इस प्रकार, बुनियादी ढांचा पहले से ही तैयार था। सभी की जरूरत कार्यों के साथ आने के लिए थी। लेकिन यह पता चला कि एक कैविएट है। इससे पहले, यांडेक्स ने एल्गोरिदम, मशीन लर्निंग और अन्य विषयों में प्रतियोगिताओं का आयोजन किया, लेकिन कभी भी फ्रंट-एंड प्रतियोगिताओं में नहीं। किसी को इस बात की समझ नहीं थी कि प्रतियोगिता में क्या होना चाहिए और सत्यापन को कैसे स्वचालित करना चाहिए।

हमने तय किया कि फ्रंट-एंड डेवलपर्स के लिए, लेआउट, जावास्क्रिप्ट और ब्राउज़र एपीआई के ज्ञान की आवश्यकता वाले कार्य उपयुक्त हैं। स्क्रीनशॉट की तुलना करके लेआउट की जाँच की जा सकती है। एल्गोरिदम कार्यों को Node.js में चलाया जा सकता है और सही उत्तर के साथ परिणाम की तुलना करके सत्यापित किया जा सकता है। प्रोग्राम जो ब्राउज़र एपीआई के साथ काम करते हैं, उन्हें पपेटेचर के माध्यम से लॉन्च किया जा सकता है और स्क्रिप्ट निष्पादन के बाद पृष्ठ की स्थिति की जांच कर सकता है।

प्रतियोगिताओं में दो राउंड होते हैं - योग्यता और अंतिम, प्रत्येक राउंड में 6 कार्य। योग्यता कार्य अलग-अलग होने चाहिए ताकि विभिन्न प्रतिभागियों को अलग-अलग विकल्प मिलें। हमने प्रत्येक दौर के लिए संख्या और प्रकार के कार्यों का चयन किया, दो लोगों की टीमों में विभाजित किया और टीमों के बीच कार्यों को वितरित किया। प्रत्येक समूह को योग्यता के लिए दो परिवर्तनशील समस्याओं और फाइनल के लिए दो गैर-परिवर्तनीय कार्यों के साथ आना पड़ा।

आइए DOM तत्वों पर क्लिक करें ...

यह विचार सामने आया - एक ब्राउज़र गेम देने के लिए, जिसमें आपको चर तत्वों में से एक पर क्लिक करना होगा, जैसे कि एक चर कार्य। प्रतिभागी का कार्य एक कार्यक्रम लिखना था जो इस खेल को खेलता है और जीतता है। आविष्कार किए गए 4 विकल्प:

• एक हस्तलिखित फोन नंबर डायल करें
• पियानो पर राग बजाओ
• डुप्लिकेट चित्रों पर क्लिक करें
• एक रंग पर क्लिक करें जो अलग है ।

यदि आप चाहें, तो आप लिंक का अनुसरण कर सकते हैं और खेल सकते हैं। यदि आप "फोन" या "पियानो" खेलते हैं, तो ध्वनि चालू करना न भूलें।

सभी विकल्पों के लिए एक सामान्य भाग लिखा। इसमें क्लिक करने योग्य तत्वों को प्रदर्शित करने के लिए तर्क, साथ ही उन तत्वों की जानकारी होती है, जहां क्लिक करने के लिए (नोट्स, हस्तलिखित संख्या, चित्रों और रंगों के साथ कार्ड)। जानकारी और क्लिक करने योग्य तत्वों के समूह मापदंडों के माध्यम से निर्धारित किए जाते हैं।

//   —   div    // targetClasses —      // keyClasses —    ,     function initGame(targetClasses, keyClasses) { //    for(let i = 0; i < targetClasses.length; i++) { document.body.insertAdjacentHTML('afterbegin', `<div class="${targetClasses[i]}" />`); } //    for(let i = 0; i < keyClasses.length; i++) { document.body.insertAdjacentHTML('beforeend', // data-index     `<div class="key ${keyClasses[i]}" data-index="${i}" />`); } //       ,     } 

सीएसएस के माध्यम से उपस्थिति को नियंत्रित किया गया था। यह csszengarden.com के समान था - विभिन्न शैलियों वाला एक लेआउट अलग दिखता है।

प्रतिभागी के कार्यक्रम का परिणाम तत्वों पर क्लिक का एक लॉग है। एक हैंडलर जोड़ा गया जो क्लिक किए गए आइटमों के बारे में एक वैश्विक चर पर जानकारी लिखता है। ताकि प्रतिभागी, ईमानदार क्लिक के बजाय, इस चर का परिणाम तुरंत नहीं लिख सके, हम इसके नाम को बाहर की तरफ पास करते हैं।

 function initGame(targetClasses, keyClasses, resultName) { // ... const log = []; document.body.addEventListener('click', (e) => { if (e.target.classList.contains('key')) { //     , //       log.push(e.target.data.index); //    ,    //  ,       if (log.length === targetClasses.length) { window[resultName] = log; } } }); } 

प्रतिभागी कार्यक्रम चलाने के लिए स्क्रिप्ट कुछ इस तरह थी:

 //     ,    , //     Node.js. //   Chrome  headless-,    //       . const puppeteer = require('puppeteer'); const { writeFileSync } = require('fs'); const htmlFilePath = require.resolve('./game.html'); //    const solutionJsPath = resolve(process.argv[2]); //   const data = require('input.json'); //    const resName = `RESULT${Date.now()}`; //     (async () => { const browser = await puppeteer.launch(); //   const page = await browser.newPage(); //    await page.goto(`file://${htmlFilePath}`); //       await page.evaluate(resName => initGame( //   data.target, data.keys, resName), resName); await page.addScriptTag({ path: solutionJsPath }); //    await page.waitForFunction(`!!window[${resName}]`) // ,     resName const result = await page.evaluate(`window[${resName}]`); //   writeFileSync('output.json', JSON.stringify(result)); //       await browser.close(); })(); 

ध्वनि जोड़ें

हमने फैसला किया कि हमें फोन के साथ गेम को थोड़ा पुनर्जीवित करने और कीस्ट्रोक्स की आवाज जोड़ने की जरूरत है। ऐसी ध्वनियों को DTMF टोन कहा जाता है। उन्हें उत्पन्न करने के तरीके पर एक लेख मिला। संक्षेप में, विभिन्न आवृत्तियों के साथ दो ध्वनियों को एक साथ बजाना आवश्यक है। किसी दिए गए फ़्रीक्वेंसी की आवाज़ को वेब ऑडियो एपीआई का उपयोग करके खेला जा सकता है । परिणाम कुछ इस तरह है:

 function playSound(num) { //  audioContext const context = this.audioContext; const g = context.createGain() //     const o = context.createOscillator(); o.connect(g); o.type='sine'; o.frequency.value = [697, 697, 697, 770, 770, 770, 852, 852, 852, 941, 941][num]; g.connect(context.destination); //     const o2 = context.createOscillator(); o2.connect(g); o2.type='sine'; o2.frequency.value = [1209, 1336, 1477, 1209, 1336, 1477, 1209, 1336, 1477, 1209, 1336][num]; g.connect(context.destination); //   —      // .    //   o.start(0); o2.start(0); //   240  g.gain.value = 1; setTimeout(() => g.gain.value = 0, 240); } 

पियानो बजाने के लिए ध्वनियों को भी जोड़ा गया है। यदि किसी भी प्रतिभागी ने पृष्ठ पर लिखे नोट्स को खेलने की कोशिश की, तो उसने स्टार वार्स का शाही मार्च सुना होगा।

आइए कार्य को जटिल करते हैं

हमने इस बात पर खुशी जताई कि हमने जो अच्छा काम किया, वह अच्छा था, लेकिन आनंद लंबे समय तक नहीं रहा। खेल के परीक्षण के दौरान, यह पता चला कि कार्यक्रम बहुत तेज़ी से बटनों पर क्लिक करता है और हमारी सभी शांत ध्वनियाँ एक सामान्य गड़बड़ी में विलीन हो जाती हैं। हमने कीस्ट्रोक्स के बीच 50 एमएस की देरी को जोड़ने का फैसला किया, ताकि ध्वनियों को बारी-बारी से खेला जाए। इसी समय, यह कार्य को थोड़ा जटिल करता है।

 function initGame(targetClasses, keyClasses, resultName) { //      //    let lastClick = 0; // ... document.body.addEventListener('click', (e) => { const now = Date.now(); //      //    50 ,    if (lastClick + 50 < now) { // ... //     lastClick = now; } }); } 

लेकिन यह सब नहीं है। हमने सोचा कि प्रतिभागी आसानी से स्रोत कोड देख सकते हैं और देरी को तुरंत देख सकते हैं। उनके कार्य को जटिल बनाने के लिए, हमने UglifyJS का उपयोग करते हुए पृष्ठ पर सभी JS कोड को छोटा किया । लेकिन यह पुस्तकालय कक्षाओं के सार्वजनिक एपीआई को नहीं बदलता है। इसलिए, उगलिजेएसएस (पुर्जे, तरीकों और वर्ग क्षेत्रों के नाम) को एक ही जगह छोड़ दिया, हमने प्रतिस्थापित किया।

खेल के आगे बढ़ने की पटकथा कुछ इस तरह दिखती थी:

 const minified = uglifyjs.minify(lines.join('\n')); const replaced = minified.code .replaceAll('this.window', 'this.') .replaceAll('this.document', 'this.') .replaceAll('this.log', 'this.') .replaceAll('this.lastClick', 'this.') .replaceAll('this.target', 'this.') .replaceAll('this.resName', 'this.') .replaceAll('this.audioContext', 'this.') .replaceAll('this.keyCount', 'this.') .replaceAll('this.classMap', 'this.') .replaceAll('_createDiv', '_') .replaceAll('_renderTarget', '_') .replaceAll('_renderKeys', '_') .replaceAll('_updateLog', '_') .replaceAll('_generateAnswer', '') .replaceAll('_createKeyElement', '') .replaceAll('_getMessage', '') .replaceAll('_next', '_____') .replaceAll('_pos', '__') .replaceAll('PhoneGame', '') .replaceAll('MusicGame', '') .replaceAll('BaseGame', 'xyz'); 

आइए एक रचनात्मक स्थिति लिखें

हमने खेल का तकनीकी हिस्सा तैयार किया, लेकिन हमें हालत के एक रचनात्मक पाठ की आवश्यकता थी - न केवल उन आवश्यकताओं के साथ जिन्हें पूरा करने की आवश्यकता है, बल्कि कुछ प्रकार की कहानी के साथ।

मेरा पसंदीदा किस्म का हास्य बेतुका है। यह तब होता है जब एक गंभीर रूप के साथ आप कुछ हास्यास्पद बकवास कहते हैं। बकवास आमतौर पर अप्रत्याशित लगता है और हँसी का कारण बनता है। मैं प्रतिभागियों को खुश करने के लिए कार्यों की शर्तों को बेतुका बनाना चाहता था। तो एडोल्फ के घोड़े के बारे में एक कहानी थी, जो एक दोस्त को नहीं बुला सकता है, क्योंकि उसे फोन की चाबी पर अपने बड़े खुर नहीं मिलते हैं।

तब एक लड़की के बारे में एक कहानी थी जो पियानो में लगी हुई है और इसे स्वचालित करना चाहती है, ताकि कक्षाओं के बजाय वह टहलने जाए। वाक्यांश था "अगर कोई लड़की खेलना बंद कर देती है, तो माँ कमरे से बाहर आती है और चेहरे पर एक थप्पड़ देती है।" हमें बताया गया कि यह बाल शोषण का प्रचार है और हमें एक और पाठ लिखने की आवश्यकता है। फिर हम एक ऑर्केस्ट्रा के बारे में एक कहानी लेकर आए, जिसमें एक पियानोवादक एक संगीत कार्यक्रम से पहले बीमार पड़ गया, और संगीतकारों में से एक ने जेएस पर एक कार्यक्रम लिखा जो उसका हिस्सा होगा।

सामान्य तौर पर, हम ग्रंथों के वांछित प्रभाव को प्राप्त करने में कामयाब रहे। आप चाहें तो इन्हें यहां पढ़ सकते हैं ।

प्रतियोगिता में कार्य निर्धारित करना

इसलिए, हमारे पास तैयार कार्य शर्तें, समाधानों और संदर्भ समाधानों की जांच के लिए स्क्रिप्ट थीं। तब प्रतियोगिता में यह सब कॉन्फ़िगर करना आवश्यक था। किसी भी कार्य के लिए, कई परीक्षण होते हैं, जिनमें से प्रत्येक में इनपुट डेटा का एक सेट और सही उत्तर होता है। नीचे दिए गए चित्र प्रतियोगिता के चरणों को दर्शाते हैं। पहला चरण कार्यक्रम का निष्पादन है, दूसरा परिणाम का सत्यापन है:

पहले चरण के इनपुट पर, परीक्षण डेटा का एक सेट और एक प्रतिभागी कार्यक्रम प्राप्त होता है। अंदर, run.js स्क्रिप्ट काम करती है, जिसका कोड हमने ऊपर लिखा था। वह प्रतिभागी के कार्यक्रम को चलाने, उसके काम के परिणाम को फाइल में लिखने और लिखने के लिए जिम्मेदार है। कार्यक्रम एक अलग वर्चुअल मशीन में चलता है, जो चलने से पहले डॉकर छवि से उगता है। यह वर्चुअल मशीन संसाधनों में सीमित है, इसमें नेटवर्क तक पहुंच नहीं है।

दूसरा चरण (परिणाम की जाँच) एक और आभासी मशीन में किया जाता है। इस प्रकार, प्रतिभागी के कार्यक्रम का भौतिक रूप से उस वातावरण तक पहुंच नहीं है जहां सत्यापन होता है। दूसरे चरण का इनपुट प्रतिभागी के कार्यक्रम (पहले चरण में प्राप्त) और सही उत्तर वाली फ़ाइल के कार्य का परिणाम है। आउटपुट सत्यापन स्क्रिप्ट का निकास कोड है, जिसके अनुसार प्रतियोगिता समझती है कि सत्यापन कैसे समाप्त हुआ:

- OK = 0,
- PE (प्रस्तुति त्रुटि - गलत परिणाम स्वरूप) = 4
- WA (गलत उत्तर) = 5
- CF (सत्यापन के दौरान त्रुटि) = 6

प्रतियोगिता को खराब अंत में Node.js. हमने Node.js और node_modules के साथ pkg का उपयोग करके सत्यापन स्क्रिप्ट को एक बाइनरी फ़ाइल में पैक करके समस्या हल की। अब हमें प्रतियोगिता के बारे में गुप्त ज्ञान है और वर्तमान चैम्पियनशिप को तैयार करने में बहुत कम कठिनाइयों का अनुभव है।

इसलिए, हमने कार्य तैयार किए हैं। उसके बाद, बहुत अधिक था: प्रतियोगिता के दौरान जटिलता, कार्यों के प्रकाशन, तकनीकी सहायता शुल्क और यैंडेक्स कार्यालय में विजेताओं को पुरस्कृत करने के लिए सार्वजनिक परीक्षण। लेकिन ये पूरी तरह से अलग कहानियां हैं।

अब, कुछ क्षेत्रों में प्रतिस्पर्धा करने के बजाय, हम एकीकृत प्रोग्रामिंग चैंपियनशिप धारण कर रहे हैं, जहाँ सीमांत सहित बस समानांतर ट्रैक हैं।

कार्यों को तैयार करने में लगने वाले समय के बारे में मुझे जरा भी अफसोस नहीं है। यह दिलचस्प और मजेदार था, अपरंपरागत। हैबे पर एक टिप्पणी में लिखा है कि स्थितियों को व्यवसाय के उत्साही लोगों द्वारा सोचा गया था। प्रतियोगिता के दौरान, यह महसूस करने के लिए अच्छा था कि प्रतिभागी उन कार्यों को हल कर रहे हैं जो आप के साथ आए थे।

संदर्भ:
- पिछले साल के फ्रंटएंड असाइनमेंट का विश्लेषण, जिसे हमने तैयार किया था
- इस साल की पहली चैंपियनशिप में फ्रंटएंड पर ट्रैक का विश्लेषण