JavaScript៖ គូសចំនុច

ចូរយើងរៀនពីរបៀបគូរចំណុចនៅក្នុង JavaScript នៅក្នុងកម្មវិធីរុករក .. វាមិនពិបាកតាមបច្ចេកទេសទេ ប៉ុន្តែសម្រាប់តែអ្នកដែលរវល់ ហើយសម្រាប់អ្នកដែលមិនបានរៀបចំដើម្បីគូរចំណុចនៅលើអ៊ីនធឺណិត - នេះជាការពិតណាស់សមិទ្ធិផលទាំងមូល។

មានវិធីជាច្រើនដើម្បីគូរចំណុចមួយ តោះមើលពួកវា

អ្នកបង្កើតហ្គេម



ការប្រើប្រាស់ Unity/Godot/microStudio ឬអ្នកបង្កើតហ្គេមរាប់ពាន់នាក់.. ពួកគេនឹងបង្កើតកូដមួយចំនួនតាមមធ្យោបាយមួយ ឬវិធីផ្សេងទៀតដែលនឹងជា JavaScript ឬ Webassembly ហើយនៅតែបង្ហាញយើងពីចំណុច។យើងមិនចាប់អារម្មណ៍លើផ្លូវនេះទេ។យើងនឹងមិនយល់ពីអ្វីដែលកំពុងកើតឡើងនោះទេ ការគ្រប់គ្រងលើកូដនឹងមានតិចតួច និងមិនអាចអានបាននៅក្នុងកូដប្រភព ក្រៅពីនេះវាមានទំហំធំ។

ក្របខ័ណ្ឌ JavaScript

ផ្លូវរបស់ Jedi នេះគឺនៅជិតបំផុតតាមដែលអាចធ្វើទៅបានចំពោះយើង។កូដរបស់យើងនឹងមិនធំ ហើយច្បាស់ដូចថ្ងៃទេ យើងនឹងមិនអរូបីច្រើនទេ យើងនឹងមិនបង្កើនកូដរបស់យើងយ៉ាងខ្លាំងជាមួយនឹងបណ្ណាល័យទេ។ការគ្រប់គ្រងកូដក៏អស្ចារ្យដែរ។

JavaScript សុទ្ធ

នេះជាការពិតណាស់ ផ្លូវរបស់ 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 ប៉ុន្តែកូដបែបនេះនឹងមើលទៅអាក្រក់ទាំងស្រុង មិនអាចអានបាន និងពិបាកសរសេរ។ យល់!





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