सगाई नियमित रूप से आईटी सम्मेलनों की प्रदर्शनियों में एक बूथ के साथ भाग लेती है। इसलिए, प्रत्येक वर्ष, हम, सहकर्मियों के साथ - इंजीनियरों और भक्तों - के साथ कुछ ऐसा करने के लिए आते हैं ताकि रिपोर्ट के बीच में ऊब न हो।

मेरा नाम इवान है, मैं एक फ्रंटेंड डेवलपर हूं। इस लेख में, हमारे लिलेक सहयोगी और DIY उत्साही यूरी लिलेकोव के साथ, हम आपको बताएंगे कि कैसे, एक आईटी विषय के लिए दो लाल बटन, एक माइक्रोकंट्रोलर, एक रिएक्ट कोड और 250 शब्दों का उपयोग करते हुए, हमने खेल "आईटी अनुमान गेम" बनाया और साथ में हाईलोड ++ पर एक आरामदायक पार्टी रखी। और हाइजेनबग।

सामग्री:

नॉनट्रिविअल टीके
खेल यांत्रिकी और स्कोरिंग
एनीमेशन
दृश्यपटल
हार्डवेयर: दो लाल बटन
परिणाम

नॉनट्रिविअल टीके

आईटी सम्मेलनों का अपना माहौल है: बहुत सारे लोग हैं, स्टैंड पर अपना ध्यान आकर्षित करना और रखना आसान नहीं है। रिपोर्ट के बीच टूटने के लिए उनके पास हमारे पास ठीक से आने के लिए, हमें उन्हें एक दिलचस्प लेकिन सरल पाठ की पेशकश करने की आवश्यकता है।

पिछले साल के आईटी उर्फ ​​की सफलता से प्रेरित होकर, हमने नए गेम के लिए निम्नलिखित आवश्यकताओं की रूपरेखा तैयार की:

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

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

क्या सार है:

• दो प्रतिभागी एक साथ खेलते हैं।
• कार्य प्रतिद्वंद्वी से बटन को तेजी से दबाने और स्क्रीन पर दिखाए गए एन्क्रिप्ट किए गए शब्द का अनुमान लगाना है।
• दो चरण: सरल ("शॉर्टकट"), जहां शब्द वापस सामने लिखे जाते हैं, और कठिन ("स्ट्राइकर"), जिसमें शब्दों के सभी अक्षर मिश्रित होते हैं।
• यदि उत्तर सही है, तो एक बिंदु उत्तरदाता को गिना जाता है। गलत - स्कोर प्रतिद्वंद्वी को जाता है।
• जिन लोगों ने कम से कम एन अंक अर्जित किए, वे शांत शोर-रद्द करने वाले हेडफ़ोन के ड्रा में भाग ले सकते हैं।

ऐसा लगता है कि सब कुछ काफी आसान और सरल है, लेकिन मुश्किलें आगे थीं।

खेल यांत्रिकी और स्कोरिंग

इस gif से, यह स्पष्ट है कि गोल प्रक्रिया क्या दिखती है:

1. एक एन्क्रिप्टेड शब्द दिखाई देता है।
2. टाइमर 10 सेकंड के लिए शुरू होता है।
3. यदि कोई खिलाड़ी बटन दबाता है, तो यह टाइमर बंद हो जाता है, और दूसरा इसके बजाय शुरू होता है - 3 सेकंड के लिए। इस समय के दौरान, खिलाड़ी को एक जवाब दिया जाना चाहिए, अन्यथा स्कोर का श्रेय प्रतिद्वंद्वी को दिया जाता है।
4. यदि किसी ने बटन नहीं दबाया, तो शब्द स्वचालित रूप से बदल जाता है, और पूरी प्रक्रिया फिर से दोहराई जाती है।

मुख्य समस्या जो हम सामना कर रहे हैं, वह यह है कि स्कोर और रिकॉर्ड खिलाड़ियों को कैसे रखा जाए। हम खेल को जितना संभव हो उतना तेज बनाना चाहते थे और प्रतिभागियों को कहीं भी पंजीकृत करने के लिए मजबूर नहीं करते थे। लेकिन यह समझना आवश्यक था कि उनमें से किसने निश्चित संख्या में अंक अर्जित किए और मुख्य पुरस्कार प्राप्त कर सकते थे।

हम पहली बार गणना यांत्रिकी के साथ नहीं आए। कई परीक्षणों के बाद ही यह स्पष्ट हो गया कि खेल को सुविधाजनक और सरल कैसे बनाया जाए - दोनों प्रतिभागियों और मेजबान के लिए।

असफल और शानदार विचार

आइडिया # 1: एक बिंदु = एक छोटी चॉकलेट बार

प्रत्येक सही उत्तर के लिए, पहले हमने एक चॉकलेट बार देने का फैसला किया। अंत में, प्रतिभागी चॉकलेट (या कम से कम कैंडी रैपर खाए गए "पॉइंट्स") से लाता है, और यह बात है! हम ट्राफियां गिनते हैं, हम विजेता को पहचानते हैं।

लेकिन कुछ बिंदु हैं।

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

दूसरा बिंदु - मेरी चॉकलेट को अन्य लोगों की चॉकलेट से कैसे अलग किया जाए? खिलाड़ी सहयोग कर सकते हैं और चॉकलेट या कैंडी रैपर को ढेर कर सकते हैं। तो, सर्किट काम नहीं करता है! इसके अलावा, सम्मेलन दो दिवसीय हैं, और आप चॉकलेट को अंतहीन रूप से एकत्र कर सकते हैं।

तीसरा बिंदु: आपको बहुत अधिक चॉकलेट की आवश्यकता है। हमने प्रयोगात्मक रूप से जाँच की कि कितने अंक एक औसत खिलाड़ी स्कोर है, और महसूस किया कि कम से कम एक वैगन को चॉकलेट की आवश्यकता होती है। और हमारे पास केवल एक छोटी गाड़ी थी।

विचार # 2: स्टैंडिंग

जबकि कुछ खेल रहे हैं, अन्य खुद को स्टैंडिंग में रिकॉर्ड करेंगे। इस मामले में, हम सभी संभावित समस्याओं का सामना करेंगे: नाम, नाम, गलतियाँ, लिखने में त्रुटि, अवैध लेखन (या इनपुट के लिए एक और बड़ा मॉनिटर और लैपटॉप लगाने की आवश्यकता), आपके संपर्कों को छोड़ने के लिए अनिच्छा और बहुत कुछ।

इसलिए, हमने खोज जारी रखी।

आइडिया # 3: प्रतिभागियों के बैज पर निशान

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

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

बेशक, कर्मचारियों के कर्मचारियों ने सस्ता मार्ग में भाग नहीं लिया।

योजना इस प्रकार है:

1. एक अतिथि को एक भागीदारी चिह्न के साथ बैज पर चिह्नित किया जाता है: 20 अंक तक पहुंचने के लिए काला या केवल खेलने के लिए बैंगनी। एक दिन में तीन प्रयास किए जा सकते थे और तीन दिल प्राप्त किए जा सकते थे।
2. काले निशान वाले सभी विजेता स्टैंड पर एक निश्चित समय पर इकट्ठा होते हैं, और एक गर्म ट्यूब लॉटरी ड्रम की मदद से हम उनके बीच हेडफ़ोन खेलते हैं।

जीवित लोगों पर खेल का परीक्षण करने के बाद, हमने थ्रेशोल्ड मार्क की गणना की: खेल में 20 अंक हासिल करना आसान नहीं था। लेकिन Highload ++ के प्रत्येक दो दिनों में, लगभग 15 लोग विजेता थे!

सच है, शब्दों की सूची में काफी कुछ शब्द थे जो डेवलपर द्वारा सबसे पहले समझे गए थे, इसलिए हेइज़ेनबग क्यूए सम्मेलन के लिए हम 15 बिंदुओं की सीमा पर सहमत हुए। शायद व्यर्थ में: सेमीफाइनलिस्ट कई गुना अधिक निकले, जिसका मतलब है कि हेडफ़ोन जीतने की संभावना कम है।

PS प्रारंभिक चरण में, हमने तय किया कि गलत उत्तर के साथ, प्रतिभागी चॉकलेट बार स्कोर खो देगा। लेकिन किसी को कुछ लूटना पसंद नहीं है। "यह मेरी चॉकलेट बार है, मैंने इसे अर्जित किया!" - पहला गेम परीक्षक नाराज थे। इसलिए, एक दंड के रूप में, हमने एक प्रतिद्वंद्वी को एक बिंदु देना शुरू किया।

एनीमेशन

एक अनुमान लगाने वाला शब्द किसी तरह के एनीमेशन के साथ दिखाई देना चाहिए। इससे हमें दो फायदे मिलते हैं:

1. शब्दों के बीच एक प्रकार की "पिटाई"। खिलाड़ियों के लिए एक शब्द से दूसरे शब्द पर स्विच करना बहुत आसान है अगर उनके बीच कोई कार्रवाई हो। पुराने लड़ाई के खेल याद रखें। प्रत्येक नया दौर "3..2..1..FIGHT!" के साथ शुरू हुआ। मैं यहां एक और टाइमर नहीं बनाना चाहता था - हम पहले से ही थोक में हैं।
2. दृश्य विविधता। हमने खेल को यथासंभव सरल बनाने की कोशिश की, हमारे पास स्तरों के बीच एनिमेटेड पृष्ठभूमि और बदलाव नहीं थे। हम ध्वनि का उपयोग भी नहीं कर सकते, ताकि अन्य सम्मेलन प्रतिभागियों के साथ हस्तक्षेप न करें। इसलिए, एनीमेशन आवश्यक था।

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

यदि आप समय से पहले बटन पर क्लिक करते हैं तो यह शब्द कैसा दिखता है:

दूसरा मुश्किल क्षण एनीमेशन की अवधि है। यह हमेशा एक ही समय तक चला - 1.5 सेकंड। यदि आप "लय पकड़ते हैं", तो आप प्रतिद्वंद्वी की तुलना में तेजी से एक बटन दबाने की फांसी प्राप्त कर सकते हैं। समस्या को हल करने के लिए, हमने एक यादृच्छिक चर जोड़ा जो 0 से 500 एमएस तक था। इस मामले में, ताल को समायोजित करना बहुत अधिक कठिन हो गया है।

दृश्यपटल

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

खेल के यांत्रिकी काफी सरल निकले, और मैं पहिया को सुदृढ़ नहीं करना चाहता था। क्लाइंट साइड के लिए create-react-app लिया। लेकिन चुनौती अभी भी जरूरत थी।

तो हुक! हुक लंबे समय तक क्षितिज पर दिखाई दिए, लेकिन मुख्य ब्रेट उत्पादों में उनके आवेदन को विकास प्रक्रिया के बजाय गंभीर पुनर्विचार की आवश्यकता थी। एक छोटा सा पक्ष परियोजना उनके उपयोग के लिए एक महान स्प्रिंगबोर्ड था।

कोई redux नहीं! Redux एक बेहतरीन चीज है, और हम इसे हर दिन अपने काम में इस्तेमाल करते हैं। लेकिन इस तरह के एक छोटे से आवेदन के लिए, रिडक्स का उपयोग करना उचित नहीं था। इसके अलावा, एक नया उपयोग है useContext हुक।

 const { score, changeScore } = useContext(SessionContext); const { next } = useContext(QuestionsContext); const steps = useContext(StepsContext); 

हां, एक वैश्विक कहानी के बजाय, हमें तीन संदर्भ मिले जो बिल्कुल भी अंतर नहीं हुए।

SessionContext ने स्कोर किया।
StepsContext एप्लीकेशन स्क्रीन स्विच करने के लिए जिम्मेदार था: इंट्रो, लूप, आउट्रो ...
QuestionsContext को सभी QuestionsContext बारे में पता था: किन सवालों के जवाब दिए गए, कौन सा सवाल आगे होगा, कितना बाकी है

प्रदाता

प्रत्येक संदर्भ को एक प्रदाता की आवश्यकता होती है जो अंतिम घटकों को डेटा वितरित करेगा। एक उदाहरण के रूप में, हम स्कोरिंग के लिए एक सरल प्रदाता का उपयोग करेंगे।

 const increment = score => score + 1; const SessionProvider = props => { const [leftPlayerScore, changeLeftPlayerScore] = useState(0); const [rightPlayerScore, changeRightPlayerScore] = useState(0); const resetScore = useCallback(() => { changeLeftPlayerScore(0); changeRightPlayerScore(0); }, []); const changeScore = useCallback(player => { player === 'left' ? changeLeftPlayerScore(increment) : changeRightPlayerScore(increment); }, []); const score = { left: leftPlayerScore, right: rightPlayerScore }; return ( <SessionContext.Provider value={{ score, changeScore, resetScore }}> {props.children} </SessionContext.Provider> ); }; 

जैसा कि आप कोड से देख सकते हैं, हम स्वतंत्र रूप से बिंदुओं का ट्रैक रखते हैं। "बाएँ" और "दाएँ" खिलाड़ियों के लिए एक अलग राज्य है। साथ ही खाते के प्रबंधन के लिए कार्य: खाता रीसेट करें और बदलें।

परिणामी प्रदाता API बहुत सरल है। सामान्य तौर पर, प्रदाताओं से जुड़े लगभग सभी तर्क बहुत सरल थे, इसलिए हम इस पर ध्यान केंद्रित नहीं करेंगे।

टाइमर

खेल के मुख्य दौर का घटक दिलचस्प निकला: इसमें अस्पष्ट क्षण थे। घटक दोनों मोड (रिवर्स और फेरबदल - "शॉर्टकट" और "मिक्सर") के लिए समान है।

दौर के विवरण से, यह स्पष्ट है कि समय के साथ बहुत अधिक बातचीत होती है।

सबसे पहले, एक टाइमर है जो स्क्रीन पर शब्द की अवधि के लिए जिम्मेदार है: एक बटन दबाने के लिए 10 सेकंड। यदि किसी ने बटन नहीं दबाया है, तो अगला शब्द स्वचालित रूप से प्रकट होता है।

दूसरे, एक टाइमर जो एक बटन पर क्लिक करने पर शुरू होता है। तब उसके पास शब्द का अनुमान लगाने के लिए 3 सेकंड का समय होता है।

ऐसा लगता है कि इसमें कुछ भी जटिल नहीं है, इसलिए हम ऐसा प्रतीत होता है कि स्पष्ट कोड लिखते हैं:

 const [time, nextTick] = useState(0); useEffect(() => { let id = setInterval(() => { nextTick(time + 1); }, 1000); return () => clearInterval(id); }, []); 

लेकिन, जैसा कि आप अनुमान लगा सकते हैं, यह काम नहीं किया। यह बिल्कुल काम नहीं आया!

टाइमर 1 तक पहुंच गया और उस पर रुक गया। तथ्य यह है कि पुराने time मूल्य को हैंडलर के कार्य के अंदर "लॉक" किया गया था। इसलिए, प्रत्येक टिक के साथ, setInterval ने पहले रेंडर से time मान को संदर्भित किया।

प्रत्यक्ष मान के बजाय किसी फ़ंक्शन का उपयोग करने की समस्या का समाधान था:

 nextTick(currentTime => currentTime + 1); 

हाँ, इस तरह हम हमेशा टाइमर के लिए एक "ताजा" मूल्य था। लेकिन हम उदाहरण के लिए, "ताजा" props नहीं पा सकते हैं।

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

अधिकतर इसका उपयोग DOM तत्वों के साथ काम करने के लिए किया जाता है, लेकिन यह इसका एकमात्र अनुप्रयोग नहीं है। हम current संपत्ति में किसी भी चर को "याद" कर सकते हैं और प्रत्येक रेंडर के साथ इसे अपडेट कर सकते हैं।

 function callback() { setCount(count + 1); } useEffect(() => { savedCallback.current = callback; }); useEffect(() => { function tick() { savedCallback.current(); } let id = setInterval(tick, 1000); return () => clearInterval(id); }, []); 

setInterval और रिएक्ट हुक के साथ काम करने के बारे में डैन अब्रामोव का एक अच्छा लेख है: रिएक्ट हुक के साथ सेटइंटरवल डिक्लेरेटिव बनाना । उन्होंने पूरी तरह से उपयोग किए जाने वाले सभी नुकसानों और वर्णन के सभी चरणों का उपयोग करते हुए useInterval हुक के बारे में बताया, जिसे हमने अपनी समस्या के समाधान के रूप में लिया।

चूंकि पूरे सम्मेलन में बूथ खुला था, इसलिए खेल का उपयोग करने वाला एक निरंतर सत्र बहुत बड़ा था। पृष्ठ को सभी (F5) में अपडेट नहीं किया गया था, इसलिए विकास के स्तर पर मेमोरी की निगरानी करना बहुत महत्वपूर्ण था। जैसा कि आप जानते हैं, लीक समय-समय पर हाथ से जाता है, और अगर यह सब प्रतिक्रिया के पुन: प्रतिपादन के साथ होता है, तो कोड लिखना बहुत आसान होगा जो बहुत खाता है, बहुत स्मृति।

Countdown शुरू, बंद, रीसेट, और एक खेल सत्र में कई बार दर्जनों (या शायद सैकड़ों) को पुनरारंभ किया। चेकों से परेशान न होने के लिए, जो कि बहुत होना चाहिए था, हमने एक सरल "ट्रिक" का उपयोग किया - हमने इस घटक के लिए key प्रॉप्स को जोड़ा।

 <QuestionCountdown key={question.text} onComplete={nextQuestion} /> 

हम इस पर विस्तार से ध्यान नहीं देंगे, प्रतिक्रिया के सामंजस्य की प्रक्रिया का एक विस्तृत विवरण अभी भी उसी दान अब्रामोव के साथ है: एक यूआई रनटाइम के रूप में प्रतिक्रिया ।

हार्डवेयर: दो लाल बटन

इसलिए, हमने पहले ही खेल के लिए कुछ आवश्यकताओं को पूरा कर लिया है: यह मल्टीप्लेयर, तेज और सरल यांत्रिकी के साथ था। यह उसके मनोरंजन को जोड़ने के लिए बनी हुई है। कहानी का अनुसरण यूरा लिलेकोव लिलेक द्वारा किया जाएगा - हमारे DIY उत्साही, समुदाय के एक निरंतर वक्ता, फ्लाइंग विंग के निर्माता और अन्य do-it-खुद के उपकरण।

हम वास्तव में दो बड़े यांत्रिक बटन ढूंढना चाहते थे। और यह सुनिश्चित करने के लिए कि लाल वाले - जैसा कि अगुटिन के साथ उस मेम में है।

दुर्भाग्य से, ऑनलाइन स्टोर में पाया जाने वाला सब कुछ बहुत छोटा था (5 सेंटीमीटर व्यास) या बिल्कुल भी बटन नहीं थे। बेशक, एक अच्छा पुराना AliExpress था, लेकिन डिलीवरी के लिए इंतजार करने का समय नहीं था।

नतीजतन, हमें एक रचनात्मक एजेंसी की साइट पर सही बटन मिले। बटन कहीं उपनगरों में अलेक्जेंडर (जाहिर है, रेडियो इलेक्ट्रॉनिक्स के संकाय के एक स्नातक)। हमने फोन किया, पूछा कि किस माइक्रोकंट्रोलर को बॉक्स में सीवन किया गया है, और इसे एक्सेस करने के लिए कहा गया है, क्योंकि हमें इसे फिर से शुरू करने की आवश्यकता है।

अलेक्जेंडर, इसे हल्के ढंग से रखने के लिए, इस तरह के सवालों पर आश्चर्यचकित था। जब हमने पूछा कि क्या बटन उत्साही प्रोग्रामर के दबाव का सामना करेंगे, तो उन्होंने हमें आश्वासन दिया कि ऐसे बटन "कॉस्मिक" में स्लॉट मशीनों में हैं और बच्चों के प्रवाह के साथ पूरी तरह से सामना करते हैं। आगे देखते हुए, मैं कहता हूँ कि गर्म इंजीनियरों ने बटन भी रखे थे (केवल बैटरी को एक बार बदलना पड़ा था)।

भरने

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

बिना किसी तामझाम के समाधान - पुराने यूएसबी-कीबोर्ड को लेने और कीबोर्ड से डिवाइस तक अतिरिक्त तारों के साथ कुछ बटन लाने के लिए - तुरंत "सामूहिक खेत" के रूप में खारिज कर दिया। और DIY की शक्ति से जुड़ा।

कुछ विचार-विमर्श के बाद, हमने आवश्यक बाध्यता के साथ एमेल से एवीमेल परिवार के एटीमेगा 32 यू 4 माइक्रोकंट्रोलर पर आधारित अरुडिनो प्रो माइक्रो बोर्ड का उपयोग करने का निर्णय लिया। इस बोर्ड पर, अन्य चीजों के बीच, I / O और माइक्रोयूएसबी पोर्ट अलग हो जाते हैं। और सबसे महत्वपूर्ण बात - ATmega32u4 माइक्रोकंट्रोलर एक छिपाई डिवाइस के रूप में कार्य कर सकता है, अर्थात, हमारे मामले में, कुछ शर्तों के तहत कीस्ट्रोक्स का अनुकरण करता है।

इस माइक्रोकंट्रोलर को प्रोग्राम करने के लिए, आपको केवल माइक्रोयूएसबी वायर और अरुडिनो आईडीई विकास वातावरण की आवश्यकता होती है।

विकास के वातावरण को स्थापित करने के बाद, सबसे सरल कोड उदाहरण तुरंत उपलब्ध होंगे।

उदाहरण के लिए, एक प्रोग्राम जो बटन दबाए जाने पर कीबोर्ड पर टाइप करने का अनुकरण करता है (इनपुट / आउटपुट पोर्ट से जुड़ा) यहां स्थित है:

फ़ाइल-> उदाहरण-> USB-> कीबोर्ड-> कीबोर्डमैसेज

कीस्ट्रोक्स का अनुकरण बहुत सरलता से प्राप्त किया जाता है:

 #include "Keyboard.h" //      void setup() { Keyboard.begin(); //   } void loop() { Keyboard.print("Test"); //   4  delay(1000); //   1  } 

इनपुट पोर्ट स्थिति पढ़ना भी कोई तामझाम नहीं है:

 int button_pin = 7; //  ,     void setup() { pinMode(button_pin, INPUT); //     } void loop() { if (digitalRead(button_pin)) { //   } else { //    } } 

चूंकि पोर्ट वोल्टेज द्वारा खोला जाता है, और वर्तमान द्वारा नहीं, बटन से पोर्ट तक जाने वाले तारों में सबसे छोटी प्रेरित धाराएं झूठी सकारात्मकता दे सकती हैं। इसलिए, हम उच्च-प्रतिरोध वाले प्रतिरोधों के साथ इनपुट बंदरगाहों को "खींचने" की सलाह देते हैं: प्रेरित धारा तुरंत "ग्राउंड" में बहती है, इनपुट और "ग्राउंड" के बीच उच्च वोल्टेज अंतर को उत्पन्न होने से रोकती है, और इस प्रकार, कोई गलत ट्रिगर नहीं होगा। इन उद्देश्यों के लिए, एक 5-10 k 5-10 अवरोधक पर्याप्त है, जो कि माइक्रोकंट्रोलर और इसके "ग्राउंड" के इनपुट के बीच जुड़ा हुआ है।

इस प्रकार, हम निम्नलिखित योजना प्राप्त करते हैं:

MicroUSB के माध्यम से Arduino प्रो माइक्रो बोर्ड गेम के सॉफ़्टवेयर भाग के साथ एक लैपटॉप से ​​जुड़ता है, दो बटन बोर्ड के दो इनपुट और सामान्य बिजली आपूर्ति से जुड़ते हैं। इसके अलावा, इन दो आदानों को दो प्रतिरोधों द्वारा जमीन पर खींचा जाता है।

जब किसी एक बटन को दबाया जाता है, तो बटन के माध्यम से बोर्ड की बिजली आपूर्ति आउटपुट से वर्तमान बोर्ड के संबंधित इनपुट पर जाती है - इस प्रकार हम इनपुट पर एक तार्किक "यूनिट" देखेंगे।

सॉफ़्टवेयर के भाग में, हमने कीस्ट्रोक्स "बाएँ तीर" और "दाएँ तीर" का अनुकरण करने का निर्णय लिया, और साथ ही दबाव को निर्धारित करने के बाद 4 सेकंड की देरी दी, ताकि प्रतिभागियों द्वारा बार-बार क्लिक करने या बटनों में संपर्कों के झुनझुने से बचने के लिए।

 #include <Keyboard.h> char leftKey = KEY_LEFT_ARROW; char rightKey = KEY_RIGHT_ARROW; int btn1pin = 7; int btn1value = 0; int btn2pin = 8; int btn2value = 0; void setup() { pinMode(btn1pin, INPUT); pinMode(btn2pin, INPUT); Keyboard.begin(); } void loop() { btn1value = digitalRead(btn1pin); btn2value = digitalRead(btn2pin); if (btn1value == 1 && btn2value == 1) { //    =    } else if (btn1value == 0 && btn2value == 0) { //    =    } else if (btn1value == 1) { //    =       4  Keyboard.press(leftKey); delay(100); Keyboard.releaseAll(); delay(4000); } else if (btn2value == 1) { //    =       4  Keyboard.press(rightKey); delay(100); Keyboard.releaseAll(); delay(4000); } } 

इसलिए सरल उपकरणों की मदद से, हमने उस खिलाड़ी को पहचानने के लिए बटन सिखाया जो प्रतिद्वंद्वी की तुलना में उन पर तेजी से क्लिक करता है, और प्रस्तुतकर्ता को यह संकेत देता है।

प्रबंध

पूरी तरह से मैनुअल और जितना संभव हो उतना सरल:

• अंतरिक्ष - अगला शब्द
• दर्ज करें - सही शब्द दिखाएं
• + - सच (1 अंक)
• 0 - गलत (प्रतिद्वंद्वी के लिए बिंदु)
• वाम शिफ्ट - अगला चरण
• राइट शिफ्ट - पिछला चरण

परिणाम

कॉन्फ्रेंस के सभी चार दिन (हाईलोड ++ पर दो, हाइजेनबग पर दो), बैथ स्टैंड पर लगातार "आईटी अनुमान लगाने का खेल" खेला गया। हमारी सभी आशाएँ पूरी हुईं:

• खेल ने प्रतिभागियों और दर्शकों दोनों को आकर्षित किया: स्टैंड पर लोगों की एक पूरी लाइन एकत्र हुई। यह विशेष रूप से सुखद है कि सम्मेलनों के दूसरे दिन प्रतिभागियों की संख्या में कमी नहीं हुई।
• बटन शीर्ष हैं! उत्तेजना में +100 जोड़ें। भले ही प्रतिद्वंद्वी एक-दूसरे के लिए अजनबी थे, लेकिन खेल ने बहुत सारी भावनाओं का कारण बना।
• बैज पर निशान के साथ विचार काम किया: विजेताओं को खोजने और संपर्कों को इकट्ठा करने में कोई कठिनाई नहीं। कुछ लोगों ने अपने बिल्ले को साफ छोड़ने के लिए कहा, इसलिए हमने अपनी कलाई पर निशान लगाए (वे आसानी से मिट गए)।
• हमने हेडफ़ोन के 14 जोड़े और कई सौ छोटे पुरस्कार दिए। कोई भी उपहार के बिना नहीं छोड़ा गया था!