Ana içerik
Bilgisayar Programlama
Basit sahne değişiklikleri
Diyelim ki, Winston'un hikayesini resimli bir hikaye kitabı olarak anlatmak istiyoruz ve kullanıcı hikayenin bir sonraki bölümünü okumak için tıklamalı. Sadece başlık bulunan bir ana sahneyle başlarız:
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("The Story of Winston", 10, height/2);Şimdi, bunu kullanıcının tıklayarak, hikayenin birinci kısmını, Winston'un destansı doğumunu görebileceği şekilde yapmak istiyoruz. Bunu yapmak için, kullanıcı fareyi tıkladığında çağrılan bir
mouseClicked fonksiyonu tanımlayabiliriz ve buraya ikinci sahnemizi çizmek için kodu koyabiliriz. Unutmayın ki, ikinci sahneyi çizmeden önce background()'u çağırmamız gerekiyor, yoksa iki sahneyi üst üste göreceğiz:mouseClicked = function() {
// Scene 2
background(173, 239, 255);
fill(7, 14, 145);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), width/2, height/2);
};Bunu aşağıda deneyin -ikinci sahne için kodu düzenleyin ve düzenlemenin sinir bozucu olduğunu görün, çünkü ikinci sahnenin neye benzediğini her görmek istediğinizde, tıklamanız gerekiyor.
Önce bu sorunu çözelim. Evet, siz ve ben sıkıcılıkla baş edebiliriz, ama herkesin daha üretken programcılar olmasını istiyoruz ve sahne 2'yi düzenleyip gerçek zamanlı sonuçlarını görürsek, daha üretici olmaz mıyız? Bu durumda, yapabileceğiniz kolay bir şey, sahne 2 kodunu bir fonksiyonun içine koymak, o fonksiyonu
mouseClicked'den çağırmak ve hata ayıklarken bu fonksiyonu çağırmak olabilir.var drawScene2 = function() {
background(173, 239, 255);
fill(7, 14, 145);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), width/2, height/2);
};
mouseClicked = function() {
drawScene2();
};
// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("The Story of Winston", 10, height/2);
drawScene2();Sahne 2'yi bir fonksiyona çevirdiğimiz sürece, sahne 1'i de bir fonksiyona çevirebiliriz; bu kodun hepsini toparlayıp çağırabiliriz. Şimdi bunu aşağıda deneyin ve bu kodu düzenlemek istediğinizde
drawScene2() çağrısına yorum yazmanın ve sonucu görmenin ne kadar kolay olduğunu görün.Şahane, şimdi bir ana sahnemiz ve ikinci bir sahnemiz var. Ya üçüncü bir sahne görüntülemek istersek? Ya da üçüncüyü tıkladıktan sonra birinciye dönmeyi istersek?
mouseClicked'in içindeki mantığı değiştirmeliyiz ki, hep sahne 2'yi çağırmaktansa, göstereceği sahneleri koşullu seçsin. Yani, bir tür koşulu test edecek bir if ifadesine ihtiyacımız var. Önce bunu sahte kod açısından düşünelim:// Kullanıcı fareye tıkladığında:
// eğer mevcut sahne ilk sahneyse, ikinciye git
// eğer mevcut sahne ikinci sahneyse, üçüncüye git
// eğer mevcut sahne üçüncü sahneyse, ilk sahneye geri gitGörünüşe göre, "şimdiki sahne"nin kaydını tutmamız gerekiyor ve bunu bir sayı olarak saklamak en mantıklısı olur.
currentScene adında bir global değişken tanımlayalım ve bunu mouseClicked içinde kontrol edelim.var currentScene;
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene1();
}
};Koşullar sahte kodumuza benzer, ama burada bir sorun var:
currentScene'i bir değere eşitlemiyoruz, yani bu koşullar hiçbir zaman doğru olmayacak. Bunu if koşullarının içine koyabiliriz, ama bunu sahne çizme fonksiyonlarının içine koymak herhalde daha iyi olur; böylece sahne çizim fonksiyonlarını nereden çağırırsak çağıralım, değişken doğru ayarlanmış olur.var drawScene1 = function() {
currentScene = 1;
...
};
var drawScene2 = function() {
currentScene = 2;
...
};
var drawScene3 = function() {
currentScene = 3;
...
};Bunların hepsini aşağıdaki programda birleştirdik. Buna tıklayın ve hikayenin başına nasıl döndüğünü görün. Sahne dördü eklemeyi deneyin (Winston'ın Oh Hayır'la karşılaştığı? Winston'ın Winstonia'yla tanışması ve Winstonsin'e taşınması?) ve bunu uyarlayın:
Tartışmaya katılmak ister misiniz?
Henüz gönderi yok.