ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್: ಚುಕ್ಕೆ ಎಳೆಯಿರಿ

ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಪಾಯಿಂಟ್ ಅನ್ನು ಹೇಗೆ ಸೆಳೆಯುವುದು ಎಂದು ಕಲಿಯೋಣ.. ಇದು ತಾಂತ್ರಿಕವಾಗಿ ಕಷ್ಟಕರವಲ್ಲ, ಆದರೆ ಎಡವುವವರಿಗೆ ಮತ್ತು ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿ ಪಾಯಿಂಟ್ ಸೆಳೆಯಲು ಸಿದ್ಧರಿಲ್ಲದವರಿಗೆ ಮಾತ್ರ - ಇದು ಸಹಜವಾಗಿ ಸಂಪೂರ್ಣ ಸಾಧನೆಯಾಗಿದೆ.

ಬಿಂದುವನ್ನು ಸೆಳೆಯಲು ಹಲವು ಮಾರ್ಗಗಳಿವೆ, ಅವುಗಳನ್ನು ನೋಡೋಣ

ಆಟದ ನಿರ್ಮಾಣಕಾರರು



Unity/Godot/microStudio ಅಥವಾ ಸಾವಿರಾರು ಗೇಮ್ ಬಿಲ್ಡರ್‌ಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಒಂದನ್ನು ಬಳಸಿ.. ಅವರೆಲ್ಲರೂ ಒಂದಲ್ಲ ಒಂದು ರೀತಿಯಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ವೆಬ್‌ಅಸೆಂಬ್ಲಿ ಆಗಿರುವ ಕೆಲವು ಕೋಡ್ ಅನ್ನು ರಚಿಸುತ್ತಾರೆ ಮತ್ತು ಇನ್ನೂ ನಮಗೆ ಪಾಯಿಂಟ್ ಅನ್ನು ತೋರಿಸುತ್ತಾರೆ.ಈ ಹಾದಿಯಲ್ಲಿ ನಮಗೆ ಆಸಕ್ತಿ ಇಲ್ಲ.ಏನಾಗುತ್ತಿದೆ ಎಂದು ನಮಗೆ ನಿಜವಾಗಿಯೂ ಅರ್ಥವಾಗುವುದಿಲ್ಲ, ಕೋಡ್ ಮೇಲಿನ ನಿಯಂತ್ರಣವು ಕನಿಷ್ಠವಾಗಿರುತ್ತದೆ ಮತ್ತು ಮೂಲ ಕೋಡ್‌ನಲ್ಲಿ ಓದಲಾಗುವುದಿಲ್ಲ, ಜೊತೆಗೆ ಅದು ದೊಡ್ಡದಾಗಿದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಚೌಕಟ್ಟುಗಳು

ಜೇಡಿಯ ಈ ಮಾರ್ಗವು ನಮಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ಹತ್ತಿರದಲ್ಲಿದೆ, ಏಕೆಂದರೆ.ನಮ್ಮ ಕೋಡ್ ದೊಡ್ಡದಾಗಿರುವುದಿಲ್ಲ ಮತ್ತು ದಿನದಷ್ಟು ಸ್ಪಷ್ಟವಾಗಿರುವುದಿಲ್ಲ, ನಾವು ಹೆಚ್ಚು ಅಮೂರ್ತವಾಗುವುದಿಲ್ಲ, ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಾವು ಹೆಚ್ಚು ಹೆಚ್ಚಿಸುವುದಿಲ್ಲ.ಕೋಡ್ ನಿಯಂತ್ರಣವೂ ಉತ್ತಮವಾಗಿರುತ್ತದೆ

ಶುದ್ಧ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ಇದು ಸಹಜವಾಗಿ ಜೇಡಿಯ ಮಾರ್ಗವಾಗಿದೆ.ಕೋಡ್ ಸಾಧ್ಯವಾದಷ್ಟು ಜಟಿಲವಾಗಿದೆ, ವಸ್ತುಗಳ ಗರಿಷ್ಠ ನಿಯಂತ್ರಣ, ಅದು ಇದ್ದಂತೆ, ನಿಯಂತ್ರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.ಮೂಲ ಕೋಡ್‌ಗಳು ಅತ್ಯಂತ ಕಡಿಮೆ ಮತ್ತು ಗೋಲಿಮಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಜ್ಞಾನದೊಂದಿಗೆ, ನಾವು ಸುರಕ್ಷಿತವಾಗಿ ಕೆಲಸ ಪಡೆಯಲು ಹೋಗಬಹುದು, ಏಕೆಂದರೆ.ನಮಗೆ ಅಂತಹ ಜನರು ಬೇಕು.

ಆದರೆ ನಮ್ಮ ಕೆಲಸವು ಕೆಲಸವನ್ನು ಹುಡುಕುವುದು ಅಲ್ಲ, ಆದರೆ ಸರಳ ಮತ್ತು ಸುಲಭವಾದ ರೀತಿಯಲ್ಲಿ ಚುಕ್ಕೆ ಎಳೆಯುವುದು.ನಮ್ಮ ವೆಕ್ಟರ್ ವೇಗ ಮತ್ತು ನಮ್ಯತೆ.

ನಾನು ಗ್ರಂಥಾಲಯವನ್ನು ಆರಿಸಿದೆ

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>

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 ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿದೆ, ಆದರೆ ಇದು ಯಾವ ರೀತಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್?

ಸೆಟಪ್ ಕಾರ್ಯವು ಪ್ರಾರಂಭವಾಗಿದೆ, ಅದನ್ನು ಒಮ್ಮೆ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ಅದರಲ್ಲಿ ನಾವು ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ, ಅಂದರೆ.ನಾವು ಬಿಂದುವನ್ನು ಸೆಳೆಯುವ ಪ್ರದೇಶ.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>

ಫಲಿತಾಂಶವು ಬಹುತೇಕ ಒಂದೇ ಆಗಿರುತ್ತದೆ

ಹೌದು, 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