Orman ortamı

Bu oyun klasik 2 boyutlu bir "yanlamasına" oyundur: Yani buna yanlamasına bakıyoruz, ve karakter öne veya arkaya gidiyor. Ancak, karakterimizi hep ekranın merkezinde istiyoruz, bu yüzden aslında, karakterin hareketini arka planı karakterin arkasında hareket ettirerek gösteriyoruz. Bu bir numaradır, ama işe yarar!

Başlamak için, hareket etmeyen parçaları yani mavi gökyüzünü ve kahverengi toprağı çizelim:

draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0{,}90, width, height*0{,}10);
    // ...
}

Şimdi yana kaydırma görünümünü oluşturmak için, görüntükitaplığındaki çim görüntüsünü kullanarak çim ekleyelim. Bu hareketli ortamı oluşturmanın bir yolu, tuvalimiz 3000 piksel eninde gibi davranmaktır, ve düzeyimiz bu genişlikteydi, ve bu 3000 piksele sığacak kadar çim bloğu çizmek olur, her seferinde bunun hareket ettiririz. Ancak, bu çok verimli değildir, ve programlama oyunlarında, verimliliğe çok önem veririz. Bunun yerine, çim görüntülerinde "karo" ve "yılan" kullanacağız. 400 piksellik ekrana sığacak kadar çizeceğiz, ve sonra biri sağ ekranın sol tarafından düştüğünde, ekranın sağ tarafına tekrar yapıştırırız, ve böyle yapmaya devam ederiz.

Bunu yapmak için, çim blokların başlangıç konumlarının bir dizisini başlatabiliriz:

var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}

Sonrasında, çizim döngüsünün içinde, bunların her birini çizeceğiz:

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
}

Bu statik bir sahne için iyidir, ama bunun hareket etmesi gerekiyor! Yani her seferinde her çim konumundan bir çıkarabilir, bunları 1 piksel sola taşıyabiliriz.

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
    grassXs[i] -= 1;
}

Şimdi çim hareket edecektir, ama x değerleri gittikçe daha negatif oldukça, gözden kaybolacaktır. Unutmayın, karoları "yılan"lıyoruz - sol taraftan düştüklerinde tuvalin sağ tarafına sarmak istiyoruz. Bunu yapmak için, ekranın yeterince dışında olup olmadığımızı kontrol edeceğiz (unutmayın görüntülerimiz sol üst köşeden çiziliyor), ve öyleyse, tuvalin eninin x değerini ayarlayacağız:

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}

Bunu birleştirdiğimizde, zıplarken hareket ediyormuş gibi görünen bir kunduzumuz oldu. Sihirli!

Tamam, yan kaydırmalı bir ortamda zıplayan bir kunduzumuz var. Ancak, burada kunduzun yapacak bir şeyi yok! Kunduzun zıplayıp toplaması için sopalar eklemeliyiz.

Programlamamız gerektiği için, sopalarımız hakkında biraz düşünelim:

Her sopanın bir x ve y konumu vardır. Muhtemelen x konumlarının bir miktar dağılmasını istiyoruz (sabit veya bir aralıkta rastgele), ve y konumlarının bir aralıkta randomize edilmesini istiyoruz, böylece kullanıcı kunduzun zıplama ve düşmesini kontrol eder.
Sopalarda çimle aynı belirgin hareket olmalıdır, ama onlar yılan gibi hareket etmemelidir. Bir sopa ekrandan çıkınca, sonsuza kadar kaybolur.
Her düzeyde belirli bir sayıda soğa olmalıdır - bir noktada, sopalar bitmelidir.

Sopaları programlamanın birçok yolu vardır, ama bunlar yeterince karmaşık görünmektedir, onun için kunduz karakterinde olduğu gibi bunları bir nesneyle modelleyelim:

var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};

Sonra, oyunumuz başlamadan önce - kunduzumuzu başlattığımız gibi - sabit uzaklık ve rastgele y ile 40 sopalık bir dizi oluşturalım:

var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}

Şimdi sopaları çizebiliriz - çimeni çizdiğimiz gibi, sadece etrafını sarmadan:

for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}

İşte burada, bu kodla çizilen sopalarla birlikte. Onları zıplatmayı deneyin! Neler olur? Hiçbir şey! Bunu yakında düzelteceğiz...

Tartışmaya katılmak ister misiniz?

Giriş Yap

Sıralama ölçütü:

Henüz gönderi yok.

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