JavaScript: තිතක් අඳින්න

බ්‍රවුසරයක ජාවාස්ක්‍රිප්ට් හි ලක්ෂ්‍යයක් අඳින්නේ කෙසේදැයි අපි ඉගෙන ගනිමු.. එය තාක්‍ෂණිකව අපහසු නැත, නමුත් දඟලන අයට සහ අන්තර්ජාලයේ ලක්ෂ්‍යයක් ඇඳීමට සූදානම් නැති අයට පමණි - මෙය ඇත්ත වශයෙන්ම සම්පූර්ණ ජයග්‍රහණයකි.

ලක්ෂ්යයක් ඇඳීමට බොහෝ ක්රම තිබේ, අපි ඒවා දෙස බලමු

ක්‍රීඩා නිර්මාණකරුවන්



Unity/Godot/microStudio හෝ දහස් ගණන් ක්‍රීඩා තනන්නන්ගෙන් ඕනෑම එකක් භාවිතා කරමින්.. ඔවුන් සියල්ලෝම JavaScript හෝ Webassembly ලෙස යම් යම් කේතයක් එක් ආකාරයකින් හෝ වෙනත් ආකාරයකින් සාදනු ඇත, සහ තවමත් අපට කාරණය පෙන්වයි.අපි මේ මාර්ගය ගැන උනන්දු නැහැ.සිදුවන්නේ කුමක්ද යන්න අපට සැබවින්ම වැටහෙන්නේ නැත, කේතය පාලනය කිරීම අවම වන අතර ප්‍රභව කේතයේ කියවිය නොහැක, ඊට අමතරව එය විශාල වේ.

JavaScript රාමු

ජේඩිගේ මෙම මාර්ගය අපට හැකි තරම් සමීප ය, මන්ද.අපගේ කේතය දවස තරම් විශාල සහ පැහැදිලි නොවනු ඇත, අපි බොහෝ දේ වියුක්ත නොකරමු, පුස්තකාල සමඟ අපගේ කේතය විශාල ලෙස වැඩි නොකරමු.කේත පාලනය ද විශිෂ්ට වනු ඇත

පිරිසිදු JavaScript

ඇත්ත වශයෙන්ම මෙය ජෙඩිගේ මාර්ගයයි.කේතය හැකි තරම් සංකීර්ණ වන අතර, එය පාලනය කිරීමට අවශ්ය නොවන දේවල උපරිම පාලනය.මූලාශ්‍ර කේත ඉතාමත්ම අවම වන අතර golimy JavaScript පිළිබඳ දැනුමෙන් අපට රැකියාවක් ලබා ගැනීමට ආරක්ෂිතව යා හැකිය, මන්ද.අපට එවැනි අය අවශ්‍යයි.

නමුත් අපගේ කාර්යය වන්නේ රැකියාවක් සොයා ගැනීම නොව, සරල හා පහසු ආකාරයකින් තිතක් ඇඳීමයි.අපගේ දෛශිකය යනු වේගය සහ නම්‍යශීලිත්වයයි.

මම පුස්තකාලය තෝරා ගත්තා

p5js තිතක් ඇඳීමට.එය නිකම්ම නොවේ, ඇත්ත වශයෙන්ම, කාර්යය ලක්ෂ්‍යයක් ඇඳීම නම් සහ එය එයයි, ඇත්ත වශයෙන්ම, සෑම දෙයක්ම හිස් ජාවාස්ක්‍රිප්ට් වලින් කළ යුතුය, නමුත් මම මෙය කරන්නේ ඉදිරිදර්ශනයකින්, .k.එවිට ඔබ සහ මම විශ්මයජනක ලෙස පෙනෙන වෙනත් දේවල් කරන්නෙමු, මේ සඳහා අපට හොඳ මෙවලමක් අවශ්‍ය වේ.ඒවායින් එකක් p5js වේ.

Golim 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 කේතයක්ද?

සැකසුම් කාර්යය ආරම්භ කිරීම, එය එක් වරක් ක්රියාත්මක වේ, එහි අපි කැන්වසයක් නිර්මාණය කරමු, i.e.අපි ලක්ෂ්‍යයක් අඳින ප්‍රදේශය.window.innerWidth, window.innerHeight

තිරයේ පළල සහ උස වේ, i.e.අපි සම්පූර්ණ තිර කැන්වසයක් නිර්වචනය කරන අතර ඔව්, 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>

ප්රතිඵලය ආසන්න වශයෙන් සමාන වේ

ඔව්, 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