თუ თქვენ ხედავთ ამ შეტყობინებას, ესე იგი საიტზე გარე რესურსების ჩატვირთვისას მოხდა შეფერხება.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

ძირითადი მასალა

სცენის მარტივი ცვლილება

ვთქვათ, გვინდა ვინსტონის ამბის მოყოლა ისე, თითქოს წიგნი იყოს, სადაც მომხმარებელი აწკაპუნებს ამბის შემდეგი ნაწილის წასაკითხად. დავიწყებთ მთავარი სცენით, რომელსაც მხოლოდ სათაური აქვს:
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("პატარა ვინსტონი დაიბადა!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};
სცადეთ ეს ქვემოთ მოცემულ პროგრამაში - დააწკაპუნეთ სცენის შეცვლისა და პატარა ვინსტონის დაბადების სანახავად!
მინდა, ახლა მეორე სცენის კოდის რედაქტირება სცადოთ. მაგალითად, ტექსტის ცვლილება ან სურათის მდებარეობა. ატყობთ, რომ ყოველ ჯერზე, როცა თქვენი რედაქტირებული კოდის შედეგის ნახვა გსურთ, გიწევთ მეორე სცენაზე დაწკაპუნება?
პირადად მე ეს მაღიზიანებს, რადგან ეს ნიშნავს, რომ ძალიან დიდი დრო სჭირდება მეორე სცენის ისეთად დარედაქტირებას, როგორიც მინდა, რომ იყოს. წარმოიდგინეთ, რომ გვაქვს 10 სცენა და გვინდა მეათე სცენის რედაქტირება — თითოეული რედაქტირებისთვის 10 დაწკაპუნება მოგვიწევდა. უჰ!
ამიტომ, მოდით, გადავჭრათ ეს პრობლემა. დიახ, მე და თქვენ შეგვიძლია, გავუმკლავდეთ გამაღიზიანებელ მომენტებს, მაგრამ ყველას გვსურს, რომ უფრო პროდუქტიული პროგრამისტები ვიყოთ. უფრო პროდუქტიულები არ ვიქნებით, თუ ჩვენი კოდის შედეგებს რეალურ დროში ვნახავთ? ამ შემთხვევაში მარტივი გამოსავალია მეორე სცენის მთლიანი კოდის ერთ ფუნქციაში თავმოყრა, ამ ფუნქციის mouseClicked-იდან გამოძახება და შემდეგ ამ ფუნქციის გამოძახება კოდის გამართვის დროს. აი, რას ვგულისხმობ:
var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("პატარა ვინსტონი დაიბადა!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

mouseClicked = function() {
    drawScene2();
};

// სცენა 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("ვინსტონის ამბავი", 10, 200);

drawScene2();
ვინაიდან მეორე სცენა ფუნქციად ვაქციეთ, შეგვიძლია, პირველი სცენაც ვაქციოთ ფუნქციად, უბრალოდ ერთად მოვუყაროთ თავი მის მთელ კოდს და გამოვიძახოთ ის.
var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("ვინსტონის ამბავი", 10, 200);
};
ახლა გამოსცადეთ ქვემოთ მოცემული პროგრამა. ამჯერად, თუ მეორე სცენის რედაქტირება გსურთ, შეგიძლიათ, უბრალოდ, მოაშოროთ კომენტარობა 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;
    ...
};
ამ ყველაფერს თავი მოვუყარეთ ქვემოთ მოცემულ პროგრამაში. დააწკაპუნეთ მასზე და ნახეთ, როგორ ტრიალებს ის ამბის დასაწყისში. სცადეთ მეოთხე სცენის დამატება (ვინსტონი ხვდება „ოჰ, არა" კაცუნას? ვინსტონი ხვდება ვინსტონიას და გადადის ვინსტონსინში?) და დაარემიქსეთ ის:

გსურთ, შეუერთდეთ დისკუსიას?

პოსტები ჯერ არ არის.
გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.