xxxxxxxxxx212
// Oyunun başlayıp başlamadığı değerini tutmak için bir değişken oluşturuyoruzlet play = false;// Kuşun aşağı düşebilmesi için bir yerçekimi değişkeni oluşturuyoruzconst gravity = 0.2;// Kuşun özelliklerini ve eylemlerini derli toplu bir şekilde tutabilmek için bir obje içinde topluyoruzconst bird = { // Sprite, 2D oyun grafiklerine verilen isimdir sprite: { // Kuşun resmini çağırabilmek için src, resim çağrıldıktan sonra p5.js resim objesi olarak tutulabilsin diye img değeri ekledim ve başlangıç değerini null olarak belirledim src: 'https://img.icons8.com/plumpy/48/000000/bird.png', image: null }, // Kuşun boyutları size: { width: 48, height: 48 }, // Kuşun canvas içindeki konumu positions: { x: 75, y: 200 }, // Kuşun dikey konumdaki hızı speedY: 0, // Kuşun sürekli olarak çalışacak güncelleme fonksiyonu update: function() { // Burada bir limit hız kontrolü var, kuşun hızı 8 birimi aşarsa 8'de sabit kalsın // aksi takdirde yerçekimi ivmesi sürekli olarak hıza eklensin if (this.speedY > 8) { this.speedY = 8; } else { // Kuşu yere doğru ivmeli bir şekilde çekiyoruz this.speedY += gravity; } // Hızı konuma ekleyerek konumu hıza göre değiştiriyoruz this.positions.y += this.speedY; }, // Kuşun zıplamasını sağlayacak olan fonksiyon jump: function() { // Kuşun dikey hızını yukarı doğru 6 birim birden arttırıyoruz. Yerçekime doğru olan aşağı kısım pozitif olduğu için yukarı yönü negatif seçmek durumundayız bird.speedY = -6; // Oyunu başlat play = true; }};// Boruları tutacak olan dizilet pipes = [];// Boruları oluşturacağımız taslağı tutan constructor fonksiyonuconst Pipe = function(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; // Boruların her güncellendiğinde 4 birim sola kayması this.update = function() { this.x -= 4; }}// Oyunun biteceği durumlarda çalışacak fonksiyonfunction gameOver() { play = false; // Game over uyarısı alert('Game over'); // Boruların tutulduğu dizi boşaltılıyor pipes = []; // Kuşun pozisyonu ekranın ortalarına çekiliyor bird.positions.y = 200;}// p5.js'in setup() fonksiyonufunction setup() { createCanvas(640, 480); // Açı değerlerini derece olarak kullanacağımız için açı modunu derece yapıyoruz angleMode(DEGREES); // Kuşun resmini kendi içindeki URL'den seçerek, kendi içindeki objeye atıyoruz bird.sprite.image = loadImage(bird.sprite.src);}// p5.js'in draw() fonksiyonufunction draw() { // Eğer oyun başlamamışsa if (!play) { // Canvasın arkaplanı siyaha boyansın background(0); // Beyaz renkli, kenarlıksız, ortalanmış ve canvas'ın tam ortasında bir yazı yazılsın fill(255); noStroke(); textAlign(CENTER); text('Jump to start', width / 2, height / 2); // draw() fonksiyonu buradan itibaren devam etmesin. play değişkeni true olduğunda bu kısım // çalışmayacak ve draw() fonksiyonu normal bir şekilde devam edebilecek return; } // color() fonksiyonu string olarak HTML renk kodlarını alabilir. Burada bir renk kodunu ismi ile kullandık background(color('skyblue')); // frameCount değişkeni oyunun başlamasından itibaren artar ve kaç adet frame geçildiğini tutar. Bu değer 80'in katları olduğunda çalışacak bir koşul yazıyoruz if (frameCount % 80 === 0) { // Burada temel olarak üst ve alt boru çiftini rastgele konumdaki açıklıklarıyla oluşturup boruların tutulduğu diziye ekliyoruz let pipeGap = random(100, 150); let topPipeLength = random(pipeGap, height - pipeGap * 2); pipes.push( new Pipe(width, 0, 50, topPipeLength), new Pipe(width, topPipeLength + pipeGap, 50, height - pipeGap - topPipeLength) ); } // Kuşun kendi içindeki güncelleme fonksiyonunu çağırıyoruz bird.update(); // Döndürme işlemi yapılacağı için push() ve pop() fonksiyonlarıyla işlemleri sarmalıyoruz push(); // Döndürme noktasını kuşun ortasına getirdik translate( bird.positions.x - bird.size.width / 2, bird.positions.y - bird.size.height / 2 ); // Kuşun hızı negatifse, yani yukarı doğru çıkıyorsa -30 derece dönsün; // değilse, aşağı düşüyorsa 10 derece dönsün if (bird.speedY < 0) { rotate(-30); } else { rotate(10); } // Kuşun resmini basıyoruz. translate() fonksiyonunda origin noktasını kuşun ortasına getirdiğimiz için // burada da kuşu kendi büyüklüğünün yarısı kadar geriden çiziyoruz image( bird.sprite.image, -bird.size.width / 2, -bird.size.height / 2, bird.size.width, bird.size.height ); // translate() ve rotate() ile işimiz bitti pop(); // Kuş aşağı ve yukarıda sınırları aşarsa oyun bitsin if ( bird.positions.y > height || bird.positions.y < bird.size.height ) { gameOver(); } // Tüm boruları teker teker tarayalım pipes.forEach(pipe => { // Boruyu yeşilin bir tonuyla boyuyoruz fill(50, 120, 50); // Kenar çizgileri olmasın noStroke(); // Boruyu çiziyoruz rect(pipe.x, pipe.y, pipe.width, pipe.height); // Boru hareket edebilsin diye kendi içindeki güncelleme fonksiyonunu çağırıyoruz pipe.update(); // Eğer kuş boruyla çarpışmışsa oyunu bitir. Tüm borular için teker teker bu döngü çalışacağı için // kuş herhangi biriyle çarpışmışsa bu kısım çalışacak if ( bird.positions.x > pipe.x && bird.positions.y > pipe.y && bird.positions.x < pipe.x + pipe.width && bird.positions.y < pipe.y + pipe.height ) { gameOver(); } });}// Herhangi bir tuşa bir kere basılmışsafunction keyPressed() { // Basılan tuş space veya yukarı ok tuşuysa if (key === ' ' || key === 'ArrowUp') { // Kuşu zıplat bird.jump(); }}// Herhangi bir mouse butonuyla tıklanmışsafunction mousePressed() { // Basılan buton sol butonsa if (mouseButton === LEFT) { // Kuşu zıplat bird.jump(); }}