JavaScript: एक बिंदू काढा

ब्राउझरमध्ये JavaScript मध्ये बिंदू कसा काढायचा ते शिकूया.. हे तांत्रिकदृष्ट्या कठीण नाही, परंतु जे गोंधळतात त्यांच्यासाठी आणि जे इंटरनेटवर बिंदू काढण्यास तयार नाहीत त्यांच्यासाठी - हे नक्कीच एक संपूर्ण यश आहे.

बिंदू काढण्याचे बरेच मार्ग आहेत, चला ते पाहूया

गेम कन्स्ट्रक्टर



युनिटी/गोडॉट/मायक्रोस्टुडिओ किंवा हजारो गेम बिल्डर्सपैकी कोणतेही वापरून.. ते सर्व एक किंवा दुसर्या मार्गाने काही कोड तयार करतील जे JavaScript किंवा वेबसेम्बली असेल आणि तरीही आम्हाला मुद्दा दर्शवेल.आम्हाला या मार्गात रस नाही.काय घडत आहे हे आम्हाला खरोखर समजणार नाही, कोडवरील नियंत्रण किमान असेल आणि स्त्रोत कोडमध्ये वाचता येणार नाही, त्याशिवाय ते खूप मोठे आहे.

JavaScript फ्रेमवर्क

जेडीचा हा मार्ग आपल्यासाठी शक्य तितका जवळ आहे, कारण.आमचा कोड दिवसाप्रमाणे मोठा आणि स्पष्ट होणार नाही, आम्ही जास्त गोषवारा देणार नाही, आम्ही लायब्ररीसह आमचा कोड मोठ्या प्रमाणात वाढवणार नाही.कोड कंट्रोल देखील उत्तम होईल

शुद्ध JavaScript

हा अर्थातच जेडीचा मार्ग आहे.कोड शक्य तितका क्लिष्ट आहे, ज्या गोष्टींवर जास्तीत जास्त नियंत्रण होते, ते नियंत्रित करण्याची आवश्यकता नाही.स्त्रोत कोड सर्वात कमी आहेत आणि गोलिमी JavaScript च्या ज्ञानासह, आम्ही सुरक्षितपणे नोकरी मिळवण्यासाठी जाऊ शकतो, कारण.आम्हाला अशा लोकांची गरज आहे.

परंतु आमचे कार्य नोकरी शोधणे नाही तर साध्या आणि सोप्या पद्धतीने बिंदू काढणे आहे.आपला वेक्टर वेग आणि लवचिकता आहे.

मी लायब्ररी निवडली

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

गोलिम JavaScript मध्ये, आरंभीकरण आणि रीड्राइंग फंक्शन्स परिभाषित करण्यासाठी कॅनव्हास तयार करणे आवश्यक आहे, p5 मध्ये हे देखील केले जाते, परंतु अगदी संक्षिप्तपणे.

पण आधी..

JavaScript विकासासाठी किमान पर्यावरण सेटअप

डाउनलोड करा

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>

sketch.js

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

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

परिणामी, तुमचा ब्राउझर याप्रमाणे उघडेल

ठीक आहे, HTML समजण्यासारखे आहे, परंतु हा कोणत्या प्रकारचा JavaScript कोड आहे?

सेटअप फंक्शन इनिशिएलायझेशन आहे, ते एकदाच कार्यान्वित केले जाते, त्यामध्ये आपण कॅनव्हास तयार करतो, म्हणजे.क्षेत्र जेथे आपण बिंदू काढू.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

आणि आम्ही ते उभ्या आणि आडव्या मध्यभागी काढतो.

बरं.. आम्ही कॅनव्हासवर एक ठिपका काढला, सर्व काही जसं असायला हवं तसं आहे, पण आम्ही ते कोणत्याही JavaScript शिवाय शुद्ध 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>

परिणाम जवळजवळ समान आहे

होय, एचटीएमएलमध्ये मध्यभागी काहीतरी काढणे खूप सोपे आहे, परंतु अॅनिमेशन जोडण्यासाठी आणि त्याहूनही अधिक विचारशील संवाद साधण्यासाठी, तुम्हाला CSS च्या तत्त्वांनुसार विचार करावा लागेल.जरी हे एक मनोरंजक कार्य आहे.फक्त एक प्राथमिक गोष्ट हे सर्व नष्ट करते, CSS मध्ये कोणतेही यादृच्छिक संख्या नाहीत, यामुळे भविष्यात आमचे सर्व प्रयत्न नष्ट होतील, म्हणूनच मी या दिशेने कमी प्राधान्य देईन.

जर मी कल्पना केली की मला बेअर CSS वर तारांकित आकाश बनवायचे आहे, तर माझ्यासाठी सर्वकाही कार्य करणार नाही, कारणतारे यादृच्छिक स्थितीत दिसले पाहिजेत आणि जर त्यांनी आधीपासून तयार केलेले निर्देशांक असतील तर ते इतके सुंदर आणि इतके सोपे नसतील, कारण तुम्ही CSS मध्ये यादृच्छिक क्रमांक जनरेटर लिहू शकता, परंतु असा कोड पूर्णपणे कुरूप, न वाचता येणारा आणि कठीण दिसेल. समजून घ्या!



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