ძირითადი მასალა
კომპიუტერული პროგრამირება
ღილაკით სამართავი სცენების ცვლილება
აქამდე მომხმარებელს ნებისმიერ ადგილზე ვაწკაპუნებინებდით სცენების შესაცვლელად. მაგრამ გავიაზრეთ, რომ ამ მიდგომას ცუდი მხარეებიც აქვს: არანაირი დამატებითი ინტერაქციისათვის არ შეგვიძლია სცენებში დაწკაპუნების გამოყენება. ბევრი თამაში და აპლიკაცია ამ პრობლემას ჭრის კონკრეტული UI (მომხმარებლის ინტერფეისის) ელემენტების დამატებით, როგორებიცაა მენიუები და ღილაკები, ხოლო სცენებზე ნავიგაცია ხდება მხოლოდ კონკრეტულ UI ელემენტთან ინტერაქციისას. მოდით, სცენების გასაკონტროლებლად ჩვენს პროგრამაში დავამატოთ ღილაკი ზედა მარჯვენა კუთხეში.
რა არის „ღილაკი"? ეს ორი რამაა: 1) ვიზუალური ინდიკატორი იმისა, რომ ეს ადგილი დაწკაპუნებადია და 2) ლოგიკა, რომელიც ამ ადგილს დაწკაპუნებებზე რეაგირებადს ხდის. დავიწყოთ ვიზუალური ინდიკატორით,
rect()
მცირეოდენი text()
-ით და მოვათავსოთ ის ფუნქციაში იმ შემთხვევისთვის, თუ მისი გამოყენება რამდენჯერმე მოგვინდება:var drawButton = function() {
fill(81, 166, 31);
rect(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 19, 29);
};
ახლა სად უნდა გამოვიძახოთ ის? არსებობს რამდენიმე პოტენციური ადგილი -- ყოველ ჯერზე, როდესაც გვინდა, დავრწმუნდეთ, რომ ღილაკი ზემოთ იხატება:
- როდესაც პროგრამა პირველად იტვირთება, მას შემდეგ, რაც გამოვიძახებთ
drawScene1()
-ს mouseClicked()
-ში, მას შემდეგ, რაც თითოეულ სცენას დავხატავთmouseDragged()
-ში, მას შემდეგ, რაც ახალ ბავშვს დავხატავთdraw()
-ში, მას შემდეგ, რაც ანიმირებულ სცენას ხელახლა დავხატავთ
როგორც წესი, ფუნქციების გამოძახება მხოლოდ მაშინ გვინდა, როცა ნამდვილად საჭიროა. წინააღმდეგ შემთხვევაში, ზედმეტად ვხარჯავთ ჩვენი კომპიუტერის ენერგიას!
ვიცით, რომ ის უნდა გამოვიძახოთ
draw()
-ში, რადგან სხვა შემთხვევაში ის გაქრება დრამერის დაკვრისას. გავიხსენოთ, რომ draw()
მეთოდი გამუდმებით გამოიძახება, უფრო ხშირად, ვიდრე ყველა სხვა მეთოდი. ეს ნიშნავს, რომ მისი გამოძახება შეგვიძლია მხოლოდ draw()
-დან და ამან უნდა იზრუნოს სხვა ყველა შემთხვევაზეც. სცადეთ ის თქვენით! თუ თვლით, რომ ის სხვაგანაც გჭირდებათ, ყოველთვის შეგიძლიათ, დაამატოთ გამოძახება თქვენს კოდში.
draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};
ვუჰუ! ახლა გვაქვს ღილაკი ყველა სცენაში, ყოველთვის. ნახეთ:
მაგრამ, ჰაჰა, იცით, რა არის სასაცილო? ღილაკი არაფერს აკეთებს! მომხმარებელმა შეიძლება, იფიქროს, რომ ის რაიმეს გააკეთებს, თუ ამ ადგილზე დააწკაპუნებს. მაგრამ, სინამდვილეში, სადაც უნდათ, იქ დააწკაპუნონ, და ის მაინც ერთსა და იმავე რაიმეს გააკეთებს. ჩვენ უნდა შევცვალოთ ჩვენი
mouseClicked
-ის ლოგიკა ისე, რომ ვამოწმებდეთ ღილაკის ადგილმდებარეობას მანამ, სანამ გადავწყვეტთ, რომ სცენის შეცვლის დროა.როგორც ღილაკების ამოცანებში ვაკეთებდით JS-ის შესავალში, უნდა მოვიფიქროთ
mouseX
-ისა და mouseY
-ის შესამოწმებელი if
დებულება. ეს ყოველივე უნდა იყოს ჭეშმარიტი:- არის
mouseX
უფრო მეტი, ვიდრეrect
-ის მარცხენა გვერდის x მდებარეობა? - არის
mouseX
უფრო ნაკლები, ვიდრეrect
-ის მარჯვენა გვერდის x მდებარეობა? - არის
mouseY
უფრო მეტი, ვიდრეrect
-ის ზედა გვერდის y მდებარეობა? - არის
mouseY
უფრო ნაკლები, ვიდრეrect
-ის ქვედა გვერდის y მდებარეობა?
&&
-ის გამოყენებით ვამოწმებთ, არის თუ არა ოთხივე პირობა ჭეშმარიტი და თუ ჭეშმარიტია, მაშინ გადავდივართ შემდეგ სცენაზე:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};
მოვრჩით! ამ შემოწმებით ჩვენ გვაქვს პროგრამა, რომელშიც მომხმარებელი აწკაპუნებს ეკრანის კონკრეტულ ადგილზე, რათა გადავიდეს შემდეგ სცენაზე. სცადეთ ღილაკზე და ღილაკსგარეთა ნაწილებზე დაწკაპუნება:
ახლა, როცა გვაქვს იმის გარკვევის გზა, თუ როდის ნიშნავს დაწკაპუნება სცენის შეცვლას, შეგვიძლია, დაწკაპუნებები გამოვიყენოთ ჩვენს სცენებში სხვა ინტერაქციებისთვის, თუ ღილაკზე არ აწკაპუნებენ. ეს ნიშნავს, რომ შეგვიძლია, მომხმარებელს მივცეთ საშუალება, ვინსტონის ბავშვები გადატანის ნაცვლად დაწკაპუნებით დაამატოს, როგორც თავდაპირველად გვსურდა. უბრალოდ, else-ს დავამატებთ ჩვენს if-ს და კოდს
mouseDragged
-იდან გადავიტანთ ამ else-ში:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"),
mouseX-20, mouseY-20);
}
}
};
აღვნიშნოთ, რომ მიმდინარე სცენა უნდა ვამოწმოთ, რათა ეს მხოლოდ იმ სცენისთვის მოხდეს. მაგრამ ახლა ჩვენთვის იოლია სხვა ნებისმიერ სცენაზე დაწკაპუნების ინტერაქციის დამატებაც. სხვა რა შეიძლება, მომხმარებელს დაამატებინოთ? დრამი? წვერები? გაერთეთ პროგრამით ქვემოთ:
გსურთ, შეუერთდეთ დისკუსიას?
პოსტები ჯერ არ არის.