JavaScript: tekenje in stip

Litte wy leare hoe't jo in punt tekenje yn JavaScript yn in browser.. it is net technysk lestich, mar allinich foar dyjingen dy't fumble, en foar dyjingen dy't net ree binne om in punt op it ynternet te tekenjen - dit is fansels in hiele prestaasje.

D'r binne in protte manieren om in punt te tekenjen, litte wy nei har sjen

Game constructors

Mei help fan Unity / Godot / microStudio of ien fan 'e tûzenen spultsje bouwers .. se sille allegearre meitsje wat koade yn ien of oare wize dat sil wêze JavaScript of Webassembly, en noch lit ús it punt.Wy binne net ynteressearre yn dit paad.wy sille net echt begripe wat der bart, kontrôle oer de koade sil minimaal en net lêsber wêze yn 'e boarnekoade, neist it is enoarm.

JavaSkript Frameworks

Dit paad fan 'e Jedi is sa ticht mooglik by ús, om't.ús koade sil net wêze grut en dúdlik as de dei, wy sille net abstrahere folle, wy sille net gâns fergrutsje ús koade mei biblioteken.Koade kontrôle soe ek geweldich wêze

Pure JavaScript

Dit is fansels de manier fan 'e Jedi.De koade is sa yngewikkeld mooglik, de maksimale kontrôle fan dingen dy't as it wie net hoege te kontrolearjen.De boarne koades binne de meast minimale en mei de kennis fan golimy JavaScript, kinne wy gewoan feilich gean om in baan te krijen, om't.wy hawwe sokke minsken nedich.

Mar ús taak is net om in baan te finen, mar in stip op in ienfâldige en maklike manier te tekenjen.Us vector is snelheid en fleksibiliteit.

Ik keas de biblioteek

p5js in stip tekenje.It is net allinnich dat, fansels, as de taak wie om in punt te tekenjen en dat is it, fansels, alles soe moatte dien wurde yn bleate JavaSkript, mar ik doch dit yn perspektyf, .k.dan sille jo en ik oare dingen dwaan dy't geweldich sille útsjen, en hjirfoar hawwe wy in goed ark nedich.Ien fan harren is p5js.

Yn golim JavaSkript moatte wy in doek oanmeitsje om de funksjes foar inisjalisaasje en opnij tekenje te definiearjen, yn p5 wurdt dit ek dien, mar heul beknopt.

Mar earst..

Minimale omjouwingsopstelling foar JavaScript-ûntwikkeling

index.html
sketch.js

Download

p5.min.js en hâld it njonken inoar.

lykas dit

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);
    }

Dit sil iepenje yn jo browser sa:

No, HTML is begryplik, mar wat foar JavaScript-koade is dit?

de opsetfunksje is inisjalisaasje, it wurdt ien kear útfierd, dêryn meitsje wy in doek, d.w.s.gebiet dêr't wy sille tekenje in punt.window.innerWidth, window.innerHeight

is de breedte en hichte fan it skerm, d.w.s.wy definiearje in doek op folslein skerm en ja, de HTML hat hjir ek in heul wichtige styl foar

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

Wy hoege neat oars te initialisearjen, wy moatte gewoan in punt tekenje.Sjoch hjir nei it prinsipe .. de tekenfunksje wurdt bygelyks 60 kear per sekonde útfierd, en 60 kear per sekonde sille wy ús punt tekenje .. it liket derop dat dit dom is, wy moatte gewoan in punt tekenje en dat is it, mar yn 'e takomst sil wêze de basis foar algemiene alle animaasje.

Yn 't algemien is de koade foar it tekenjen fan in punt ekstreem ienfâldich:

point(10,10)

en dat is it!

Us koade is lykwols wat grutter

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

eftergrûn swart

wite stjer

puntdikte 10

en wy tekenje it yn it sintrum fan 'e fertikale en horizontale.

No.. we tekene in stip op it doek, alles is sa't it moat, mar wy koenen sels tekenje op suver HTML sûnder JavaScript.. Hoe soe it der út sjen?

It makket it elemintêr en noch makliker, mar de prinsipes binne folslein oars, hjir is de lêste koade foar it tekenjen fan in fjouwerkant yn it sintrum fan it skerm

<!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>

It resultaat is hast itselde

Ja, it is frij maklik om wat yn it sintrum te tekenjen yn HTML, mar om animaasjes ta te foegjen, en noch mear sa in ferstannige ynteraktyf, moatte jo tinke neffens de prinsipes fan CSS.Hoewol't it is nochal in nijsgjirrige taak.Allinne ien elemintêre ding deadet dit alles, der binne gjin willekeurige nûmers yn CSS, dit sil deadzje al ús besykjen yn 'e takomst, dat is wêrom ik sil jaan minder foarkar oan dizze rjochting.

As ik my yntinke dat ik in stjerrehimel meitsje wol op bleate CSS, dan sil alles foar my net slagje, om'tstjerren moatte ferskine yn willekeurige posysjes, en as se hawwe foarôf oanmakke koördinaten, it sil net sa moai en net sa ienfâldich, om't jo kinne skriuwe in willekeurich getal generator yn CSS, mar sa'n koade sil sjen folslein ûnsjoch, ûnlêsber en dreech begripe!

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