If you're seeing this message, it means we're having trouble loading external resources on our website.

Եթե գտնվում ես վեբ զտիչի հետևում, խնդրում ենք համոզվել, որ *.kastatic.org և *.kasandbox.org տիրույթները հանված են արգելափակումից։

Հիմնական նյութ

Տեսարանների հասարակ փոփոխություններ

Ենթադրենք, ուզում ենք պատմել Ուինսթոնի մասին՝ հեքիաթների նկարազարդ գրքի տեսքով, որտեղ օգտատերը կսեղմի մկնիկը՝ հաջորդ էջին անցնելու համար: Կսկսենք հիմնական տեսարանից, որն ունի միայն վերնագիր:
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;
    ...
};
Մենք հավաքել ենք այդ ամենը ստորև բերված ծրագրում: Փորձիր սեղմել դրա ներսում և տես, թե ինչպես է այն պտտվում ու վերադառնում պատմության սկիզբ: Փորձիր ավելացնել չորրորդ տեսարանը: (Ուինսթոնը հանդիպում է Օ-ոչին, Ուինսթոնը հանդիպում է Ուինստոնիային և տեղափոխվում Ուինսթոնսին):

Ուզո՞ւմ ես միանալ խոսակցությանը։

Առայժմ հրապարակումներ չկան։
Անգլերեն հասկանո՞ւմ ես: Սեղմիր այստեղ և ավելի շատ քննարկումներ կգտնես «Քան» ակադեմիայի անգլերեն կայքում: