JavaScript: დახაზეთ წერტილი

მოდით ვისწავლოთ, როგორ დავხატოთ წერტილი JavaScript-ში ბრაუზერში.. ეს ტექნიკურად რთული არ არის, მაგრამ მხოლოდ მათთვის, ვინც ფუსფუსებს და მათთვის, ვინც არ არის მზად წერტილის დახატვა ინტერნეტში - ეს, რა თქმა უნდა, მთელი მიღწევაა.

წერტილის დახატვის მრავალი გზა არსებობს, მოდით შევხედოთ მათ

თამაშის კონსტრუქტორები



Unity/Godot/microStudio-ს ან რომელიმე ათასობით თამაშის შემქმნელის გამოყენებით.. ისინი ყველა შექმნიან რაღაც კოდს ამა თუ იმ გზით, რომელიც იქნება JavaScript ან Webassembly და მაინც გვაჩვენებენ აზრს.ჩვენ არ გვაინტერესებს ეს გზა.ჩვენ ნამდვილად ვერ გავიგებთ რა ხდება, კოდზე კონტროლი მინიმალური და წაუკითხავი იქნება წყაროს კოდში, გარდა ამისა, ის უზარმაზარია.

JavaScript Frameworks

ჯედაების ეს გზა ჩვენთან რაც შეიძლება ახლოსაა, რადგან.ჩვენი კოდი არ იქნება დიდი და მკაფიო, როგორც დღის, ჩვენ არ გავაკეთებთ აბსტრაქციას, დიდად არ გავზრდით ჩვენს კოდს ბიბლიოთეკებით.კოდის კონტროლიც კარგი იქნება

სუფთა JavaScript

ეს რა თქმა უნდა ჯედაების გზაა.კოდი რაც შეიძლება რთულია, ნივთების მაქსიმალური კონტროლი, რომელიც, როგორც იქნა, არ საჭიროებს კონტროლს.წყაროს კოდები არის ყველაზე მინიმალური და 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>

ესკიზი.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 კოდია ეს?

setup ფუნქცია არის ინიციალიზაცია, იგი შესრულებულია ერთხელ, მასში ვქმნით ტილოს, ე.ი.ტერიტორია, სადაც ჩვენ დავხაზავთ წერტილს.window.innerWidth, window.innerheight

არის ეკრანის სიგანე და სიმაღლე, ე.ი.ჩვენ განვსაზღვრავთ სრულეკრანიან ტილოს და დიახ, HTML-ს აქვს ძალიან მნიშვნელოვანი სტილი ამისთვისაც

<body style="margin: 0px;">

Больше инициализировать нам ничего не надо,а просто надо нарисовать точку. Тут смотрите какой принцип.. функция draw выполняется например 60 раз в секунду, и 60 раз в секунду мы будем рисовать нашу точку.. казалось бы что это тупо, нам же просто точку надо нарисовать и все, но в дальнейшем это будет основа вообще для всей анимации.

Вообще код рисования точки крайне прост:

point(10,10)

и все !

Однако наш код немного больше

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

фон черный

звезда белая

толщина точки 10

и рисуем мы ее по центру вертикали и горизонтали.

Что же.. мы нарисовали точку на канвасе, все как полагается, но но мы могли вообще нарисовать ее и на чистом 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