JS kodu nasıl çalışıyor?

00PARZIVAL00 · 19 Ağustos 2022

Merhaba, bir yılan oyunu yapmaya çalışıyorum JavaScript üzerinden, fakat şu yerin mantığını bir türlü anlamadım. Anlatabilecek var mı?

Bu kısım;

JavaScript:

            if (snakeX == foodX && snakeY == foodY) {
                snakeBody.push([foodX, foodY]);
                placeFood();
            }
            for (let i = snakeBody.length - 1; i > 0; i--) {
                snakeBody[i] = snakeBody[i - 1];
            }
            if (snakeBody.length) {
                snakeBody[0] = [snakeX, snakeY];
            }
            context.fillStyle = "lime";
            snakeX += velocityX * blockSize;
            snakeY += velocityY * blockSize;
            context.fillRect(snakeX, snakeY, blockSize, blockSize);
            for (let i = 0; i < snakeBody.length; i++) {
                context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
            }

Kodun tamamı;

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

William Crusader · 19 Ağustos 2022

İlk if() yılan ile yemek birbirine değip değmediğini kontrol ediyor. Değiyor ise yılanı uzatıp (?) yemeği tekrar canlandırıyor. (Yılanın değdiği yemeği siliyor)

İlk for() sanırım yılanın bedeni ile ilgili, fakat anlamadım.

İkinci if() anladığım kadarıyla yılan uzadığı zaman çalışıyor, yılanın bedenini X ve Y'ye göre düzenliyor. Yâni uzatıyor.


context.fillStyle = "lime";
snakeX += velocityX * blockSize;
snakeY += velocityY * blockSize;
context.fillRect(snakeX, snakeY, blockSize, blockSize);

Bu kısım yılanın rengini, [context.fillStyle = "lime";] yılanın X ve Y'sini,


snakeX += velocityX * blockSize;
snakeY += velocityY * blockSize;

Ve yılanın oluşumunu sağlıyor.
context.fillRect(snakeX, snakeY, blockSize, blockSize);

00PARZIVAL00 · 19 Ağustos 2022

William Crusader dedi:
İlk if() yılan ile yemek birbirine değip değmediğini kontrol ediyor. Değiyor ise yılanı uzatıp (?) yemeği tekrar canlandırıyor. (Yılanın değdiği yemeği siliyor)

İlk for() sanırım yılanın bedeni ile ilgili, fakat anlamadım.

İkinci if() anladığım kadarıyla yılan uzadığı zaman çalışıyor, yılanın bedenini X ve Y'ye göre düzenliyor. Yâni uzatıyor.

Hocam, peki burada ne yapıyor? [ i] koyduktan sonra artı olarak [0] ve [1] koyması ne anlam ifade ediyor?

JavaScript:

for (let i = 0; i < snakeBody.length; i++) {
    context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
}

William Crusader · 19 Ağustos 2022

00PARZIVAL00 dedi:
Hocam, peki burada ne yapıyor? [ i] koyduktan sonra artı olarak [0] ve [1] koyması ne anlam ifade ediyor?

JavaScript:

for (let i = 0; i < snakeBody.length; i++) { context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize); }

Sanırsam Array ile alakalı. Array'daki bir şeyleri dolduruyor yahut Array'a bir şey ekliyor.
Ya da Array içindeki bir şeyi (yılanın bedeni oluyor bu) blok büyüklüğüne göre düzenliyor.

RaSGooL · 19 Ağustos 2022

00PARZIVAL00 dedi:
Hocam, peki burada ne yapıyor? [ i] koyduktan sonra artı olarak [0] ve [1] koyması ne anlam ifade ediyor?

JavaScript:

for (let i = 0; i < snakeBody.length; i++) { context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize); }

snakeBody 2 boyutlu bir array. Kodu yazan eleman yılanın koordinatlarını yani x ve y değerlerini array olarak tutmuş.

JavaScript:

const snakeBody = [
    [1, 2],
    [2, 2],
    [1, 3]
]

Örneğin yukarıdaki snakeBody değişkeni 2 boyutlu bir array. snakeBody[0] değeri [1, 2] değerine karşılık gelir. Buda bir yılanın parçasıdır.
snakeBody[1][0] dersen 2 değerini elde edersin ki bu aslında yılanın 1. parçasının x koordinatıdır. Benzer şekilde; snakeBody[2][1] ile de 3 değerini elde edersin.
Temel düzey programlama bilgisi.

Ben olsam x ve y değerine sahip bir obje olarak tutmayı tercih ederdim.

JavaScript:

const snakeBody = [
    {x: 1, y: 2},
    {x: 2, y: 2},
    {x: 1, y: 3}
]

00PARZIVAL00 · 20 Ağustos 2022

RaSGooL dedi:
snakeBody 2 boyutlu bir array. Kodu yazan eleman yılanın koordinatlarını yani x ve y değerlerini array olarak tutmuş.

JavaScript:

const snakeBody = [ [1, 2], [2, 2], [1, 3] ]

Örneğin yukarıdaki snakeBody değişkeni 2 boyutlu bir array. snakeBody[0] değeri [1, 2] değerine karşılık gelir. Buda bir yılanın parçasıdır.
snakeBody[1][0] dersen 2 değerini elde edersin ki bu aslında yılanın 1. parçasının x koordinatıdır. Benzer şekilde; snakeBody[2][1] ile de 3 değerini elde edersin.
Temel düzey programlama bilgisi.

Ben olsam x ve y değerine sahip bir obje olarak tutmayı tercih ederdim.

JavaScript:

const snakeBody = [ {x: 1, y: 2}, {x: 2, y: 2}, {x: 1, y: 3} ]

Hocam, neredeyse anladım gibi, fakat son olarak şu 2 şeyin çalışma mantığını da söyleyebilir misiniz?

JavaScript:

for(let i = snakeBody.length-1; i > 0; i--){
    snakeBody[i] = snakeBody[i-1]
}

if(snakeBody.length){
    snakeBody[0] = [snakeX, snakeY]

}

Benim anladığım altda olan if sanırım yılanın başının bi gerisinde olan kuyruğun başlangıcı, sonra yukarıda ki for'da da bu kuyruğa bir şey yapıyoruz, fakat tam olarak ne yaptığını çözemedim.

RaSGooL · 20 Ağustos 2022

00PARZIVAL00 dedi:
Hocam, neredeyse anladım gibi, fakat son olarak şu 2 şeyin çalışma mantığını da söyleyebilir misiniz?

JavaScript:

for(let i = snakeBody.length-1; i > 0; i--){ snakeBody[i] = snakeBody[i-1] } if(snakeBody.length){ snakeBody[0] = [snakeX, snakeY] }

Benim anladığım altda olan if sanırım yılanın başının bi gerisinde olan kuyruğun başlangıcı, sonra yukarıda ki for'da da bu kuyruğa bir şey yapıyoruz, fakat tam olarak ne yaptığını çözemedim.

For loop da yılanın parçalarının koordinatları değiştiriyor. Şöyle düşün, 5. Parçanın yeni konumu aslında 4. Parçanın eski konumudur. Aynı şekilde 4. Parçada 3. Parçanın eski konumudur. Bu for loop da bunu sağlıyor.

Attaki if ile yılanın daha parçası, boyu diyeyim daha doğru olsun. Boyu daha yokken ilk koordinat noktasını belirliyor. Aslında o if yılanın başının ilk konumudur. Yılanın parçaları bir Array de tutuluyor, bu if ile şunu kontrol ediyor, Array boş ise ilk elemana sabit bir noktayı atıyor.

JS kodu nasıl çalışıyor?

Ayrıntılı düzenleme

00PARZIVAL00

Picopat

Edit fiddle - JSFiddle - Code Playground

William Crusader

Hectopat

00PARZIVAL00

Picopat

William Crusader

Hectopat

RaSGooL

Kilopat

00PARZIVAL00

Picopat

RaSGooL

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz