Հիմնական նյութ
Դասընթաց․ (Ծրագրավորում) > Բաժին 4
Դաս 2: Տեսարանների կառավարումՏեսարանների հասարակ փոփոխություններ
Ենթադրենք, ուզում ենք պատմել Ուինսթոնի մասին՝ հեքիաթների նկարազարդ գրքի տեսքով, որտեղ օգտատերը կսեղմի մկնիկը՝ հաջորդ էջին անցնելու համար: Կսկսենք հիմնական տեսարանից, որն ունի միայն վերնագիր:
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text(«Ուինսթոնի պատմությունը», 10, 200);
Այժմ հարկավոր է, որպեսզի օգտատերը, սեղմելով մկնիկը, տեսնի պատմության առաջին մասը՝ Ուինսթոնի հերոսական ծնունդը: Դրա համար կարող ենք սահմանել
mouseClicked
ֆունկցիան, որ այն կանչվի ամեն անգամ, երբ օգտատերը սեղմի մկնիկը, և կարող ենք տեղադրել կոդը, որպեսզի այն նկարի երկրորդ տեսարանը այնտեղ: Ուշադրություն դարձրու, որ նախքան երկրորդ տեսարանը նկարելը պետք է կանչել background()
-ը, այլապես երկու տեսարանները կհայտնվեն իրար վրա:mouseClicked = function() {
// Scene 2
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};
Փորձիր ստորև նշված ծրագրով. սեղմիր, որպեսզի տեսարանը փոխվի, և փոքրիկ Ուինսթոնը ծնվի:
Հիմա փորձիր խմբագրել երկրորդ տեսարանի կոդը, օրինակ՝ փոխիր տեքստը կամ նկարի տեղը: Նկատեցի՞ր, ամեն անգամ, երբ ուզում ես տեսնել քո փոփոխած կոդի արդյունքները, պետք է սեղմես մկնիկը՝ երկրորդ տեսարանը տեսնելու համար:
Անձամբ ինձ դա ջղայնացնում է, քանի որ նշանակում է՝ շատ երկար ժամանակ է պահանջվում տեսարան 2-ը խմբագրելու համար, նախքան այն կունենա այնպիսի տեսք, որն ինձ դուր կգա: Պատկերացրու, ունենք 10 տեսարան և ուզում ենք խմբագրել դրանցից 10-րդը. այդ պարագայում յուրաքանյուր խմբագրության համար ստիպված կլինենք սեղմել 10 անգամ:
Արի լուծենք այդ խնդիրը: Ի վերջո, բոլորս էլ ուզում ենք լինել ավելի արդյունավետ ծրագրավորողներ, իսկ դրան կնպաստի այն, որ կարողանանք տեսնել մեր կոդավորման արդյունքները իրական ժամանակում: Այս պարագայում առավել նպատակահարմար է տեսարան 2-ի կոդը տեղադրել ֆունկցիայի մեջ, կանչել այդ ֆունկցիան
mouseClicked
-ից, այնուհետև կանչել այդ ֆունկցիան, երբ վրիպազերծելիս լինենք: Ահա թե ինչ նկատի ունեմ.var drawScene2 = function() {
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};
mouseClicked = function() {
drawScene2();
};
// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
drawScene2();
Քանի որ տեսարան 2-ը դարձրել ենք ֆունկցիա, առաջին տեսարանը ևս կարող ենք դարձնել ֆունկցիա՝ ամփոփելով ողջ կոդը և կանչելով այն:
var drawScene1 = function() {
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
};
Այժմ կարող ես փորձել ծրագիրը ներքևում: Այս անգամ, եթե ուզում ես խմբագրել տեսարան 2-ը, կարող ես ուղղակի ջնջել
drawScene2()
-ն և անմիջապես կտեսնես քո կատարած փոփոխությունները:Շատ լավ: Այժմ ունենք գլխավոր տեսարան և երկրորդ տեսարան: Իսկ ի՞նչ անել, եթե ուզում ենք ցուցադրել երրորդ տեսարանը կամ վերադառնալ առաջին տեսարանին, այն բանից հետո, երբ սեղմել ենք երրորդ տեսարանի վրա: Դրա համար հարկավոր է փոխել
mouseClicked
-ի տրամաբանությունն այնպես, որ միշտ երկրորդ տեսարանը կանչելու փոխարեն այն պայմանականորեն ընտրի ցուցադրվող տեսարանները: Սա նշանակում է, որ մեզ հարկավոր է if դրույթ, որը կստուգի որոշակի պայմաններ: Արի նախ կեղծ կոդ ստեղծենք:// Երբ օգտատերը սեղմում է մկնիկը,
// եթե ներկայիս տեսարանը #1-ն է, անցնել #2-ին.
// եթե ներկայիս տեսարանը #2-ն է, անցնել #3-ին.
//եթե ներկայիս տեսարանը #3-ն է, վերադառնալ #1-ին:
Կարծես թե հարկավոր է հետևել «ներկայիս տեարանին», և դա անելու ամենահարմար միջոցը այն որպես թիվ պահեստավորելն է: Արի հայտարարենք
currentScene
համընդհանուր փոփոխական և ստուգենք այն mouseClicked
-ի ներսում:var currentScene;
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene1();
}
};
Պայմանները նման են մեր կեղծ կոդին, սակայն կա մի խնդիր. մենք
currentScene
-ին արժեք չենք տվել, հետևաբար այդ պայմանները երբեք ճիշտ չեն լինի: Մենք կարող ենք տեղադրել դրանք if պայմանների ներսում, բայց երևի ավելի նպատակահարմար է տեղադրել դրանք հենց նկարելու ֆունկցիաների ներսում, որպեսզի անկախ նրանից, թե որտեղից ենք կանչում տեսարան նկարող ֆունկցիաները, փոփոխականը ճիշտ լինի:var drawScene1 = function() {
currentScene = 1;
...
};
var drawScene2 = function() {
currentScene = 2;
...
};
var drawScene3 = function() {
currentScene = 3;
...
};
Մենք հավաքել ենք այդ ամենը ստորև բերված ծրագրում: Փորձիր սեղմել դրա ներսում և տես, թե ինչպես է այն պտտվում ու վերադառնում պատմության սկիզբ: Փորձիր ավելացնել չորրորդ տեսարանը: (Ուինսթոնը հանդիպում է Օ-ոչին, Ուինսթոնը հանդիպում է Ուինստոնիային և տեղափոխվում Ուինսթոնսին):
Ուզո՞ւմ ես միանալ խոսակցությանը։
Առայժմ հրապարակումներ չկան։