टिनी जावास्क्रिप्ट आर्कानॉयड (कोड की 30 लाइनें)

जावास्क्रिप्ट की 30 पंक्तियों में लोगों को फिट करते हुए एक्सेल और एक साँप को फिट करते हुए, मैंने प्रगति के साथ रहने और ऐसा कुछ बनाने का फैसला किया।
तो, देवियों और सज्जनों - शुद्ध जेएस पर 30-लाइन वाले अर्कानॉइड।



बेला से लिंक।
इसके अलावा, मैं इसे कोडपेन पर डुप्लिकेट करूंगा , अन्यथा फिडेल ने पूरी रात 500koy के साथ उत्तर दिया।

जावास्क्रिप्ट:

(function (fld, pF, px, py, dx, dy, lifes, score) { var cycle = setInterval(function () { var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px'), by = pF(ball.style.top = pF(ball.style.top) + dy + 'px'), row = ((by - 30) / 14) | 0, col = (bx / 32) | 0; if (bx < 0 && dx < 0 || bx >= 314 && dx > 0) dx *= -1; if (bx + 6 >= px && bx + 6 <= px + 64 && by >= 259 && by <= 264) { dy *= -1; if (bx + 6 <= px + 21) dx = -6; else if (bx + 6 >= px + 43) dx = 6; else if (Math.abs(dx) == 6) dx = (dx * 2 / 3) | 0; } if (by < 0) dy *= -1; if (by >= 288 && !--lifes) clearInterval(cycle), alert('Game over!'); if (by >= 288 && lifes) dy *= -1, lifesNode.innerHTML = lifes; if (by >= 18 && by <= 100 && fld[row * 10 + col].className != 'removed') { dy *= -1, fld[row * 10 + col].className = 'removed'; if (dx < 0 && ((bx | 0) % 32 < 10 || (bx | 0) % 32 > 22)) dx *= -1; if (dx > 0 && (((bx + 12) | 0) % 32 < 10 || ((bx + 12) | 0) % 32 > 22)) dx *= -1; scoreNode.innerHTML = ++score; if (score == 50) clearInterval(cycle), alert('Victory!'); } }, 1000 / 60); document.addEventListener('mousemove', function (e) { px = (e.pageX > 40) ? ((e.pageX < 290) ? e.pageX - 40 : 256) : 0; paddle.style.left = px + 'px'; }, false); }(field.children, parseFloat, 129, 270, -4, -4, 3, 0)); 

सामान्य तौर पर, मैंने अधिकतम प्रामाणिकता हासिल करने की कोशिश की:

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

कमियों के बीच: गेंद कभी-कभी अनुचित व्यवहार करती है और कई ईंटों को तोड़ देती है।

हुड के नीचे

लेआउट के साथ सब कुछ सरल है। ईंटें - इनलाइन ब्लॉक, रैकेट और प्रोजेक्टाइल - स्थिति: निरपेक्ष।

लेकिन टक्कर का पता लगाने के साथ थोड़ा और दिलचस्प है। जिस क्षेत्र में ईंटें स्थित हैं, वह ऊपर और नीचे तक सीमित है, जिसका अर्थ है कि टकराव की जांच करने के लिए केवल तभी समझ में आता है जब इस क्षेत्र में प्रक्षेप्य होता है। ईंटों की ऊंचाई और चौड़ाई निर्धारित की जाती है। इसलिए, गेंद के निर्देशांक लेते हुए, हम सही ढंग से ईंटों की संख्या निर्धारित कर सकते हैं जिसमें यह गिर गया। यदि इसके निर्देशांक X और Y , और ईंटों की चौड़ाई और ऊंचाई चौड़ाई और ऊँचाई है, तो निजी X / width और Y / height से पूर्णांक भाग लेते हुए Y / height हम वर्तमान लक्ष्य के स्तंभ और पंक्ति संख्या कॉलोनी और पंक्ति प्राप्त करते हैं। यह जानकर, हम इस तत्व की संख्या की गणना कर सकते हैं:
number = row * rowLength + col ।
सौभाग्य से, querySelectorAll तत्वों को उसी क्रम में लौटाता है जिसमें वे html में स्थित होते हैं। और हम आसानी से वर्तमान ईंट को हटा सकते हैं:
elements[number].className = 'removed' ।

setInterval

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

 requestAnimationFrame(function () frame { requestAnimationFrame(frame); }); //  var cycle = setInterval(function () { }, delay); 

कुल मिलाकर

मेरी राय में, कोड काफी कॉम्पैक्ट निकला। सबसे लंबी रेखा 88 वर्ण (इंडेंटेशन सहित) है। खेल ही थोड़ा टेढ़ा है, अच्छा, 30 लाइनों से क्या उम्मीद की जाए? '
अब, जाहिरा तौर पर, जैसा कि किसी ने पिछली पोस्ट पर टिप्पणियों में देखा था, आपको 30 लाइनों में 'टिनी विंडोज' की प्रतीक्षा करनी चाहिए।