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

Bağlandığınız bilgisayar bir web filtresi kullanıyorsa, *.kastatic.org ve *.kasandbox.org adreslerinin engellerini kaldırmayı unutmayın.

Ana içerik

Etkileşimli sahneler

Artık tatlı animasyon sahneleri yapmayı bildiğimize göre, diğer tür statik olmayan sahneyi yapabileceğimizden emin olalım: kullanıcı etkileşimine tepki veren sahneler. Örneğin, Winston'un bebek sahibi olduğu bir sahne çizmek istiyoruz (rock yıldızı sahnesinden sonra, tabii ki) -- ama kullanıcının Winston'a DAHA FAZLA bebek vermesi için tıklamasına izin vermek de istiyoruz. Dünyada hep daha fazla minik Winston'a ihtiyaç olur, öyle değil mi?
Sahne tek başına bir program olarak şöyle görünür. Program sahnenin statik parçasını çizer ve sonra mouseClicked'de, Winston bebek görüntülerini tıklanan fare konumunda çizer, bunları daha önce çizilmiş şeylerin üstüne koyar.
Bunu çok sahneli programımıza nasıl entegre ederiz? Tüm statik çizim kodunu sahne çizme fonksiyonuna drawScene5() eklemekle ve mouseClicked'e sahne geçiş mantığını eklemekle başlarız:
var drawScene5 = function() {
    currentScene = 5;
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(39);
    text("Winston has babies!", 10, 47);
    ...
};

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        drawScene1();
    }
};
Bu şöyle görünür:
Ama mouseClicked işlevselliğini nasıl entegre ederiz? Kodumuzda zaten mouseClicked tanımladık ve bunu iki kere tanımlayamayız. JavaScript'te son fonksiyon tanımı "kazanır", önceki tüm tanımları geçersiz kılar. Bunun anlamı, bu bebek çizme satırını mevcut mouseClicked içine koymak için iyi bir yer bulmamız gerektiğidir. Birkaç seçenek hakkında konuşalım:
1. Satırı fonksiyonun tepesine koyabiliriz:
mouseClicked = function() {
    image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    ...
};
O zaman, kullanıcı fareyi tıkladığı HER seferde çağrılır, bebek yapma sahnesi olmasa bile (ve bebek winstonun bebeği olsa garip olurdu). İyi değil.
2. Satırı currentScene === 4 if bloğunun içine koyabiliriz:
mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    } else if (currentScene === 5) {
        drawScene1();
    }
};
Sonuçta, burada drawScene5()'i çağırıyoruz, ve bebekler sahne 5'e eklenmeli. Ama düşünün: bu, sahneyi her çizdiğimizde, daima ekstra bir bebek çizmemiz anlamına gelir. Bu, başka bebek çizmeyeceğimiz anlamına da gelir, çünkü currentScene 5'e eşitlenir, ve bu if bloğundaki kod artık yürütülmez.
3. Satırı currentScene === 5 if bloğunun içine koyabiliriz:
mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
        drawScene1();
    }
};
Bunu anlamı, sahne ilk çizildikten sonra, ilk tıklamaya kadar bebek çizmeyiz. Ama, sonraki satırda görebileceğiniz gibi, bebeğin yerini hemen sahne 1 alır.
Burada, bu bebek tıklama sahnesini sahnelerimize entegre etme fikrinde ölümcül bir hatanın farkına varıyoruz: sahne değiştirmenin yanı sıra sahne içinde etkileşim için, aynı etkileşimi kullanıyoruz--ekranın herhangi bir yerinde fare tıklaması. Artık elimizde gerçek bir bilmece var, ve sahneyi entegre etmek için daha radikal seçenekler düşünmemiz gerekir.
4. Sonunda sahne 1'i yeniden çizmeyi bırakabiliriz, ve bu durumda kullanıcıya yeniden başlamasını söyleyebiliriz. Tabii, bu işe yarar, ama bu tıklama kontrollü sahnemizin sonuncu olmasına dayanır. Ya önceki tıklama kontrollü bir sahne istesek? Bu çözüm başarısız olurdu.
5. Farklı bir etkileşim kullanabiliriz -  mouseDragged  gibi Bu işe yarar, çünkü sürükleme tıklama olayına neden olmaz. Hala currentScene === 5'i kontrol etmemiz gerekir, sürüklemenin başka bir sahnede bebek çizmediğinden emin olmak için:
mouseDragged = function() {
    if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    }
};
Bunu aşağıda deneyin, son sahnede sürüklediğinizden emin olun:
Şimdi, bu biraz işe yaradı, her ne kadar Winston'un sonuçtaki bebek sayısı beni endişelendirse de. Genelde, bu ideal çözüm değildir, çünkü fare tıklamasına yanıt vermeyen sahne tasarımıyla kendimizi sınırlamamız gerektiği anlamına gelir. Böyle bir kısıtlama istemeyiz, daha iyi bir yol olmalı.
Ya fare tıklamalarını konumla farklılaştırsak, böylece bir konumdaki bir tıklama sahne değiştirme, ve başka yerdeki tıklamalar sahne için etkileşime kullanılsa? Bilirsin, buton gibi! Aslında, çoklu sahne programlarının çoğu bu soruna böyle yaklaşır, ve bir sonraki seferde bunu konuşacağız.

Tartışmaya katılmak ister misiniz?

Henüz gönderi yok.
İngilizce biliyor musunuz? Khan Academy'nin İngilizce sitesinde neler olduğunu görmek için buraya tıklayın.