JavaScript: ഒരു ഡോട്ട് വരയ്ക്കുക

ഒരു ബ്രൗസറിൽ JavaScript-ൽ ഒരു പോയിന്റ് എങ്ങനെ വരയ്ക്കാമെന്ന് നമുക്ക് പഠിക്കാം.. ഇത് സാങ്കേതികമായി ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല, മറിച്ച്, ഇടറുന്നവർക്കും, ഇന്റർനെറ്റിൽ ഒരു പോയിന്റ് വരയ്ക്കാൻ തയ്യാറാകാത്തവർക്കും മാത്രം - ഇത് തീർച്ചയായും ഒരു മുഴുവൻ നേട്ടമാണ്.

ഒരു പോയിന്റ് വരയ്ക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്, അവ നോക്കാം

ഗെയിം നിർമ്മാതാക്കൾ



Unity/Godot/microStudio അല്ലെങ്കിൽ ആയിരക്കണക്കിന് ഗെയിം ബിൽഡർമാരിൽ ഏതെങ്കിലും ഉപയോഗിച്ച്.. അവരെല്ലാം ഒരു തരത്തിൽ അല്ലെങ്കിൽ മറ്റൊരു തരത്തിൽ JavaScript അല്ലെങ്കിൽ Webassembly ആയിരിക്കുന്ന ചില കോഡുകൾ സൃഷ്ടിക്കും, എന്നിട്ടും ഞങ്ങൾക്ക് പോയിന്റ് കാണിക്കും.ഈ പാതയിൽ ഞങ്ങൾക്ക് താൽപ്പര്യമില്ല.എന്താണ് സംഭവിക്കുന്നതെന്ന് ഞങ്ങൾക്ക് ശരിക്കും മനസ്സിലാകില്ല, കോഡിന്റെ നിയന്ത്രണം വളരെ കുറവായിരിക്കും കൂടാതെ സോഴ്‌സ് കോഡിൽ വായിക്കാൻ കഴിയില്ല, കൂടാതെ അത് വളരെ വലുതാണ്.

ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകൾ

ജെഡിയുടെ ഈ പാത നമുക്ക് കഴിയുന്നത്ര അടുത്താണ്, കാരണം.ഞങ്ങളുടെ കോഡ് പകൽ പോലെ വലുതും വ്യക്തവുമാകില്ല, ഞങ്ങൾ കൂടുതൽ സംഗ്രഹിക്കില്ല, ലൈബ്രറികൾക്കൊപ്പം ഞങ്ങളുടെ കോഡ് വളരെയധികം വർദ്ധിപ്പിക്കുകയുമില്ല.കോഡ് നിയന്ത്രണവും മികച്ചതായിരിക്കും

ശുദ്ധമായ ജാവാസ്ക്രിപ്റ്റ്

ഇത് തീർച്ചയായും ജെഡിയുടെ വഴിയാണ്.കോഡ് കഴിയുന്നത്ര സങ്കീർണ്ണമാണ്, അത് പോലെ, നിയന്ത്രിക്കേണ്ട ആവശ്യമില്ലാത്ത കാര്യങ്ങളുടെ പരമാവധി നിയന്ത്രണം.സോഴ്‌സ് കോഡുകൾ ഏറ്റവും കുറവാണ്, ഗോലിമി ജാവാസ്ക്രിപ്റ്റിന്റെ അറിവോടെ, നമുക്ക് സുരക്ഷിതമായി ജോലി ലഭിക്കാൻ പോകാം, കാരണം.ഞങ്ങൾക്ക് അത്തരം ആളുകളെ വേണം.

എന്നാൽ ഞങ്ങളുടെ ചുമതല ഒരു ജോലി കണ്ടെത്തലല്ല, മറിച്ച് ലളിതവും എളുപ്പവുമായ രീതിയിൽ ഒരു ഡോട്ട് വരയ്ക്കുക എന്നതാണ്.ഞങ്ങളുടെ വെക്റ്റർ വേഗതയും വഴക്കവുമാണ്.

ഞാൻ ലൈബ്രറി തിരഞ്ഞെടുത്തു

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 കോഡാണ്?

സജ്ജീകരണ ഫംഗ്ഷൻ സമാരംഭമാണ്, അത് ഒരിക്കൽ എക്സിക്യൂട്ട് ചെയ്യുന്നു, അതിൽ ഞങ്ങൾ ഒരു ക്യാൻവാസ് സൃഷ്ടിക്കുന്നു, അതായത്.ഞങ്ങൾ ഒരു പോയിന്റ് വരയ്ക്കുന്ന പ്രദേശം.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