ចូរយើងរៀនពីរបៀបគូរចំណុចនៅក្នុង JavaScript នៅក្នុងកម្មវិធីរុករក .. វាមិនពិបាកតាមបច្ចេកទេសទេ ប៉ុន្តែសម្រាប់តែអ្នកដែលរវល់ ហើយសម្រាប់អ្នកដែលមិនបានរៀបចំដើម្បីគូរចំណុចនៅលើអ៊ីនធឺណិត - នេះជាការពិតណាស់សមិទ្ធិផលទាំងមូល។
មានវិធីជាច្រើនដើម្បីគូរចំណុចមួយ តោះមើលពួកវា
ការប្រើប្រាស់ Unity/Godot/microStudio ឬអ្នកបង្កើតហ្គេមរាប់ពាន់នាក់.. ពួកគេនឹងបង្កើតកូដមួយចំនួនតាមមធ្យោបាយមួយ ឬវិធីផ្សេងទៀតដែលនឹងជា JavaScript ឬ Webassembly ហើយនៅតែបង្ហាញយើងពីចំណុច។យើងមិនចាប់អារម្មណ៍លើផ្លូវនេះទេ។យើងនឹងមិនយល់ពីអ្វីដែលកំពុងកើតឡើងនោះទេ ការគ្រប់គ្រងលើកូដនឹងមានតិចតួច និងមិនអាចអានបាននៅក្នុងកូដប្រភព ក្រៅពីនេះវាមានទំហំធំ។
ផ្លូវរបស់ Jedi នេះគឺនៅជិតបំផុតតាមដែលអាចធ្វើទៅបានចំពោះយើង។កូដរបស់យើងនឹងមិនធំ ហើយច្បាស់ដូចថ្ងៃទេ យើងនឹងមិនអរូបីច្រើនទេ យើងនឹងមិនបង្កើនកូដរបស់យើងយ៉ាងខ្លាំងជាមួយនឹងបណ្ណាល័យទេ។ការគ្រប់គ្រងកូដក៏អស្ចារ្យដែរ។
នេះជាការពិតណាស់ ផ្លូវរបស់ Jedi ។កូដគឺស្មុគស្មាញតាមដែលអាចធ្វើទៅបាន ការគ្រប់គ្រងអតិបរមានៃអ្វីៗដែលវាមិនចាំបាច់ត្រូវបានគ្រប់គ្រង។កូដប្រភពគឺតិចតួចបំផុត ហើយជាមួយនឹងចំនេះដឹងនៃ golimy JavaScript យើងអាចទៅធ្វើការដោយសុវត្ថិភាព ពីព្រោះ។យើងត្រូវការមនុស្សបែបនេះ។
ប៉ុន្តែកិច្ចការរបស់យើងមិនមែនស្វែងរកការងារទេ ប៉ុន្តែត្រូវគូសចំនុចក្នុងវិធីសាមញ្ញ និងងាយស្រួល។វ៉ិចទ័ររបស់យើងគឺល្បឿន និងភាពបត់បែន។
ខ្ញុំបានជ្រើសរើសបណ្ណាល័យ
p5js ដើម្បីគូរចំណុច។វាមិនមែនត្រឹមតែប៉ុណ្ណឹងទេ ពិតណាស់ ប្រសិនបើកិច្ចការគឺត្រូវគូសចំណុចមួយ ហើយនោះជាវា ពិតណាស់ អ្វីគ្រប់យ៉ាងនឹងត្រូវធ្វើដោយ JavaScript ទទេ ប៉ុន្តែខ្ញុំកំពុងធ្វើនេះតាមទស្សនៈ .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
គឺជាទទឹងនិងកម្ពស់នៃអេក្រង់, 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);
ផ្ទៃខាងក្រោយខ្មៅ
ផ្កាយពណ៌ស
កម្រាស់ចំណុច ១០
ហើយយើងគូរវានៅកណ្តាលបញ្ឈរ និងផ្ដេក។
អញ្ចឹង.. យើងបានគូសចំនុចនៅលើផ្ទាំងក្រណាត់ អ្វីគ្រប់យ៉ាងគឺដូចដែលវាគួរតែ ប៉ុន្តែយើងថែមទាំងអាចគូរវានៅលើ HTML សុទ្ធដោយគ្មាន JavaScript .. តើវាមើលទៅដូចអ្វី?
វាធ្វើឱ្យវាមានលក្ខណៈបឋម និងកាន់តែងាយស្រួល ប៉ុន្តែគោលការណ៍គឺខុសគ្នាទាំងស្រុង នេះគឺជាកូដចុងក្រោយសម្រាប់គូរការ៉េនៅកណ្តាលអេក្រង់។
<!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 ប៉ុន្តែកូដបែបនេះនឹងមើលទៅអាក្រក់ទាំងស្រុង មិនអាចអានបាន និងពិបាកសរសេរ។ យល់!