जावास्क्रिप्ट: एक बिंदु बनाएं

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

एक बिंदु खींचने के कई तरीके हैं, आइए उन पर नजर डालते हैं

खेल निर्माता



Unity/Godot/microStudio या हजारों गेम बिल्डरों में से किसी का उपयोग करके.. वे सभी किसी न किसी तरह से कुछ कोड बनाएंगे जो कि JavaScript या Webassembly होगा, और फिर भी हमें बिंदु दिखाएंगे।हमें इस रास्ते में कोई दिलचस्पी नहीं है।हम वास्तव में समझ नहीं पाएंगे कि क्या हो रहा है, कोड पर नियंत्रण स्रोत कोड में न्यूनतम और अपठनीय होगा, इसके अलावा यह बहुत बड़ा है।

जावास्क्रिप्ट फ्रेमवर्क

जेडी का यह मार्ग जितना संभव हो सके हमारे करीब है, क्योंकि।हमारा कोड दिन की तरह बड़ा और स्पष्ट नहीं होगा, हम ज्यादा सार नहीं करेंगे, हम पुस्तकालयों के साथ अपने कोड को बहुत ज्यादा नहीं बढ़ाएंगे।कोड नियंत्रण भी बहुत अच्छा होगा

शुद्ध जावास्क्रिप्ट

यह निश्चित रूप से जेडी का तरीका है।कोड जितना संभव हो उतना जटिल है, चीजों का अधिकतम नियंत्रण, जैसा कि था, को नियंत्रित करने की आवश्यकता नहीं है।स्रोत कोड सबसे कम हैं और golimy जावास्क्रिप्ट के ज्ञान के साथ, हम सुरक्षित रूप से नौकरी पाने के लिए जा सकते हैं, क्योंकि।हमें ऐसे लोगों की जरूरत है।

लेकिन हमारा काम नौकरी ढूंढना नहीं है, बल्कि सरल और आसान तरीके से एक बिंदु बनाना है।हमारा वेक्टर गति और लचीलापन है।

मैंने पुस्तकालय चुना

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

गोलिम जावास्क्रिप्ट में, हमें इनिशियलाइज़ेशन और रीड्राइंग फ़ंक्शंस को परिभाषित करने के लिए एक कैनवास बनाने की आवश्यकता होती है, p5 में यह भी किया जाता है, लेकिन बहुत संक्षिप्त रूप से।

लेकिन पहले..

जावास्क्रिप्ट विकास के लिए न्यूनतम पर्यावरण सेटअप

डाउनलोड

p5.min.js और बगल में रख दें।

इस तरह

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

स्केच.जेएस

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

    function draw() {
    background(0);
    stroke('white');
    strokeWeight(10);
    point(window.innerWidth/2,window.innerHeight/2);
    }

यह आपके ब्राउज़र में इस तरह खुल जाएगा:

ठीक है, एचटीएमएल समझ में आता है, लेकिन यह किस तरह का जावास्क्रिप्ट कोड है?

सेटअप फ़ंक्शन इनिशियलाइज़ेशन है, इसे एक बार निष्पादित किया जाता है, इसमें हम एक कैनवास बनाते हैं, अर्थात।वह क्षेत्र जहाँ हम एक बिंदु खींचेंगे।window.innerWidth, window.innerHeight

स्क्रीन की चौड़ाई और ऊंचाई है, अर्थात।हम एक फ़ुल-स्क्रीन कैनवास को परिभाषित करते हैं और हाँ, इसके लिए HTML की शैली भी बहुत महत्वपूर्ण है

<body style="margin: 0px;">

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

सामान्य तौर पर, एक बिंदु खींचने के लिए कोड बेहद सरल है:

point(10,10)

और बस!

हालाँकि, हमारा कोड थोड़ा बड़ा है

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

पृष्ठभूमि काला

सफेद सितारा

डॉट मोटाई 10

और हम इसे लंबवत और क्षैतिज के केंद्र में खींचते हैं।

खैर .. हमने कैनवास पर एक बिंदु खींचा, सब कुछ वैसा ही है जैसा होना चाहिए, लेकिन हम इसे बिना किसी जावास्क्रिप्ट के शुद्ध HTML पर भी बना सकते हैं .. यह कैसा दिखेगा?

यह इसे प्राथमिक और और भी आसान बनाता है, लेकिन सिद्धांत पूरी तरह से अलग हैं, यहां स्क्रीन के केंद्र में एक वर्ग बनाने के लिए अंतिम कोड है

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
    <div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>

नतीजा लगभग एक जैसा

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

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



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese