js-turtle Ուղեցույց

Վերջին թարմացում: Հունիս 13, 2018

Star Fork

Նախաբան

js-turtle֊ը հատուկ միջավայր է JavaScript լեզվով ծրագրավորում սովորելու/ուսուցանելու համար։ Սկզբնական գաղափարը պատկանում է Սեյմուր Պեյպերտին.
Turtle-ի այս JavaScript տարբերակի սկիզբը դրել է bjpop֊ը, հետո hanumanum ֊ը ֆորքել և զարգացրել է այն։

Ինչպես գրել և աշխատեցնել ծրագրերը

Կարող ես աշխատել երկու տարբերակով՝ անցանց և առցանց։

1․ Աշխատել անցանց

  1. Ներբեռնի՛ր արխիվը
  2. Հանի՛ր արխիվի պարունակությունը
  3. Բացի՛ր turtle.js֊ը որևէ տեքստային խմբագրիչում (Visual Studio Code, Notepad++, Geany, Sublime Text ...)
  4. Բացի՛ր turtle.html֊ը քո դիտարկիչում (browser)
  5. Գրի՛ր կոդը turtle.js֊ում, պահպանի՛ր(save) և վերագործարկի՛ր (reload browser)

Ներբեռնել js-turtle

js-turtle հին դիտարկիչների համար

2․ Աշխատել առցանց

Նույնպես կարող ես աշխատել codepan֊ում js-turtle֊ը արդեն ինտեգրված է հետևյալ codepan֊ում։

js֊turtle codepan-ում

Turtle տերմիններ

turtle (կրիա)
- կանաչ եռանկյունը
canvas (կտավ)
- տարածքը, որտեղ շարժվում է կրիան
կորդինատներ
- կետի կորդինատները կտավի վրա արտահայտված են x֊ով և y֊ով

Օգտակար

Կտավի վրա կտտացնելուց հետո կորդինատները ավտոմատ պատճենվում են փոխանակման բուֆերում։ Այսինքն կարող ես միանգամից տեղադրել(paste) դրանք ծրագրի մեջ։

Հիմնական ֆունկցիաներ

forward()

Forward բառն անգլերենից թարգմանաբար նշանակում է «առաջ»։ Այս ֆունկցիան կրիային մղում է առաջ՝ տրված քայլերի քանակով։ Այսինքն, եթե փակագծերի մեջ գրաված է 100, ապա կրիան 100 միավոր առաջ կշարժվի։

forward(steps)

Արգումենտներ

int: steps

Օրինակ`
forward(100)
Արդյունք`

left()

Left բառն անգլերենից թարգմանաբար նշանակում է ձախ։ Կրիան «քիթը» պտտում է տրված աստիճանով դեպի ձախ։ Եթե փակագծերի մեջ գրանք 30, ապա կրիան 30 աստիճանով ձախ կթեքվի։

left(degrees)

Արգումենտներ

int: degrees

Օրինակ 1.
left(30)
left(60)
left(90)
                                                
Արդյունք`
Օրինակ 2.
forward(100)
left(30)
forward(100)
left(50)
                                                    
Արդյունք`
Երկրաչափություն

Հիշիր!

left() ֆունկցիայի միջոցով կրիան ոչ թե ստանում է անկյուն, այլ թեքվում է նշված անկյունով։

Կարող ես խաղալ այստեղ։

Արդյունք`

width()

Width բառը թարգմանաբար նշանակում է լայնություն․ width() ֆունկցիան կարգավորում է հաջորդող գծերի լայնությունը։

width(thickness)

Արգումենտներ

int: thickness

Օրինակ`
width(3)
forward(100)
                                                       
width(15)
forward(100)

width(6)
forward(100)
Արդյունք`

color()

Color (գույն):color() ֆունկցիան որոշում է հաջորդող գծերի գույնը:

color(r [, g [, b ]]])

Արգումենտներ

string: a (գույնի անունը)
int: a, b, c (RGB)
string: a (գույնի hex կոդը)
array: [a,b,c]

Օրինակ 1. (գույնի անունով)
color("red")
forward(100)

color("green")
forward(60)

color("dodgerblue")
forward(120)

Տե՛ս հասանելի գույների անունները։
Արդյունք`
Օրինակ 2. (RGB)
color(255,15,20)
forward(100)

color(12,250,65)
forward(60)

color(89,100,36)
forward(120)

Կարող ես վերցնել քեզ հետաքրքրող գույնի կոդն այստեղից։
Արդյունք`
Օրինակ 3. (HEX)
color("#3EEF0F")
forward(100)

color("#ED16A2")
forward(60)

color("#EDCD16")
forward(120)

Կարող ես վերցնել քեզ հետաքրքրող գույնի կոդն այստեղից։
Արդյունք`
Օրինակ 4. (զանգածով RGB)
color([15,20,200])
forward(100)

color([65,250,150])
forward(60)

color([255,100,200])
forward(120)

Կարող ես վերցնել քեզ հետաքրքրող գույնի կոդն այստեղից։
Արդյունք`

goto()

Տեղափոխում է կրիան x,y կորդինատները ունեցող կետ, սակայն տեղափոխման ընթացքում գիծ չի գծում։

goto(x,y)

Արգումենտներ

int: x, int: y

Օրինակ`
color("red")
goto(-213,128)
forward(100)

color("blue")
goto(-7,105)
forward(60)

color("green")
goto(238,-182)
forward(120)
Արդյունք`

penup() & pendown()

"pen up"֊ն անգլերեն՝ բարձրացնել մատիտը, "pen down"֊ը ՝ իջեցնել։ Այս ֆունկցիաները կարգավորում են forward()-ով շարժման ընթացքում գծել֊չգծելու հարցը։

penup()

pendown()

Արգումենտներ

Արգումենտներ չունեն

Օրինակ`
color("red")
forward(100)

penup()
forward(60)

pendown()
color("blue")
forward(100)
Արդյունք`

clear()

Մաքրում է կտավը(canvas). հիմնականում օգտագործվում է անիմացիաներ անելիս։

clear()

Արգումենտներ

Արգումենտներ չունի

Օրինակ`
clear()

Օգնական ֆունկցիաներ

Կրիան ունի նաև հետաքրքիր և օգտակար ֆունկցիաներ այլ։

showGrid()

Ցուցադրում է կորդինատական առանցքները։ Արգումենտով կարգավորվում է ցանցի խտությունը։

showGrid(scale)

Արգումենտներ

int: scale

Օրինակ 1.
showGrid(50)
Արդյունք`
Օրինակ 2.
showGrid(20)
Արդյունք`

randomColor_h()

Ստեղծում է պատահական գույն։

randomColor_h()

Արգումենտներ

Արգումենտներ չունի

Օրինակ`
width(4)

setInterval(function(){
    goto(0,0)
    randomColor_h()
    forward(100)
    left(10)
},300)
Արդյունք`

«Տարօրինակ» ֆունկցիաներ

strangeLine()

strangeLine() նման է forward()֊ին, սակայն գիծը գծում է պատահական կտորներով։

strangeLine([steps])

Արգումենտներ

int: steps

Օրինակ`
color("red")
strangeLine(200)

goto(186,-164)

color("blue")
strangeLine(250)
Արդյունք`

strangeSquare()

strangeSquare() գծում է «քառակուսի»՝ մասնիկներով։

strangeSquare(length[,step])

Արգումենտներ

int: length
int: step

Օրինակ`
goto(-206,169)
color("red")
strangeSquare(200,15)

goto(138,98)
color("blue")
strangeSquare(100,5)
Արդյունք`

strangeCircle()

strangeCircle() գծում է «շրջանագիծ»՝ մասնիկներով։

strangeCircle(radius)

Արգումենտներ

int: radius

Օրինակ`
goto(-15,-26)
color("red")
strangeCircle(200)

goto(37,-63)
color("blue")
strangeCircle(100)
Արդյունք`

strangeGalaxy()

strangeGalaxy() գծում է «գալակտիկա»՝ մասնիկներով։

strangeGalaxy(radius)

Արգումենտներ

int: radius

Օրինակ`
goto(-158,167)
color("red")
strangeGalaxy(180)

goto(149,-165)
color("blue")
strangeGalaxy(100)
Արդյունք`