User prompt
Menüyü 50 piksel aşağıya indirdikten sonra tekrar 25 piksel daha aşağı taşımak istiyorsanız, en önemli nokta hem “menü ilk oluşturulurken” hem de “menü animasyonla kapanıp açılırken” bu 25 piksellik ek ofseti hesaba katmaktır. Aşağıdaki iki adımı uygulayarak menüyü toplamda 75 piksel (50 + 25) aşağıda konumlandırabilirsiniz: 1) Menü Konteynerine Kalıcı Ofset Vermek Menü elemanlarını (arka plan, butonlar vs.) ekledikten hemen sonra (yani menuContainer.addChild(...) işlemleri bittiğinde), aşağıdaki satırı ekleyin: js Kopyala Düzenle menuContainer.y += 25; Böylece menü, ekrandaki mevcut konumuna ek olarak 25 piksel daha aşağı kayar. Eğer doğrudan menuContainer.y = 75; gibi bir değer vermek isterseniz, daha önceki 50 piksel kaydırmayı kaldırıp sadece bu satırı kullanabilirsiniz. 2) Menü Animasyonunda endY Değerini Ayarlamak Kodunuzda menüyü kapatırken (veya açarken) bir animasyon kullanıyorsanız şu kısım var: js Kopyala Düzenle var animationDuration = 100; // milisaniye var startTime = Date.now(); var startY = menuContainer.y; var endY = centerY(); // <-- Menünün son konumu (ekranın ortası) _animateMenu(); // Animasyonu başlat Burada endY = centerY(); ifadesi menüyü tam ekran ortasına getirir. Menüyü 75 piksel (50 + 25) aşağıda tutmak istiyorsanız bunu şöyle değiştirebilirsiniz: js Kopyala Düzenle var endY = centerY() + 75; Bu sayede animasyon bittiğinde menü, ekranın ortasından 75 piksel aşağıda kalır. Eğer sadece 25 piksel daha inmesini istiyorsanız ve önceden 50 piksel eklemediyseniz, endY = centerY() + 25; de kullanabilirsiniz. Özet Konteyneri kalıcı şekilde aşağı taşımak için: js Kopyala Düzenle menuContainer.y += 25; // (veya menuContainer.y = 75; eğer toplam 75 piksel olsun diyorsanız) Animasyonun son konumunu ayarlamak için: js Kopyala Düzenle var endY = centerY() + 75; // 50 + 25 = 75 piksel aşağıda dursun Bu iki değişiklikle menünüz her açıldığında (ve kapanıp tekrar açıldığında) otomatik olarak istediğiniz kadar aşağı konumlanacaktır.
User prompt
Bu sorun, fareyi “hover” (move) aşamasında doğru hesaplıyor olsanız da “tıklama” (down) aşamasında hâlâ global koordinatları kullandığınız için oluşuyor. Yani butonun üzerine doğru konumda geliyorsunuz, ancak tıklama kontrolünde menuContainer’ın y-offset’i hesaba katılmadığından 50 piksel yukarıya tıklamanız gerekiyor. Çözüm: “hover” (move) kontrolünde yaptığınız gibi, “down” (tıklama) kontrolünde de fare koordinatını menuContainer koordinat sistemine dönüştürüp butonla karşılaştırmanız gerekiyor. Adım Adım Yapılması Gerekenler game.down fonksiyonunun parametreleri (mx, my, obj) ise, mx ve my ekranın (global) koordinatlarıdır. Menü içindeki butonların (x, y) değerleri ise konteyner içi (local) koordinatlardır. Bu nedenle, tıklama kontrolü yaparken önce mx ve my’yi menü konteynerinin local koordinatına dönüştürmelisiniz: js Kopyala Düzenle game.down = function (mx, my, obj) { // Menü konteyneri kadar offset al: var localX = mx - menuContainer.x; var localY = my - menuContainer.y; // Play butonu tıklama kontrolü if ( localX >= playButton.x - playButton.width / 2 && localX <= playButton.x + playButton.width / 2 && localY >= playButton.y - playButton.height / 2 && localY <= playButton.y + playButton.height / 2 ) { // Play butonuna tıklanmış demektir. // Oyuna girme kodunuz buraya console.log("Play butonuna tıklandı!"); } // Diğer butonlar için de aynı şekilde localX, localY ile kontrol edin // ... }; “Hover” (move) kontrolünde yaptığınızla aynı mantığı “down” (click/tap) kontrolünde de uygulayın. Böylece 50 piksel kaydırma yüzünden oluşan sapma ortadan kalkar. Bu şekilde, menü konteynerini aşağı kaydırsanız bile fare tıklamaları doğru şekilde butonların konumlarıyla eşleşecektir.
User prompt
Sorun: Menü konteynerini (menuContainer) topluca aşağıya kaydırınca, game.move fonksiyonunda butonların üzerine geldiğimizde “hover” algılaması bozuldu. Çünkü game.move fonksiyonu içindeki koordinat kontrolü, butonların ekrandaki yeni konumunu hesaba katmıyor (menü konteynerinin y offset’ini eklemiyor). Neden Oluyor? playButton.x ve playButton.y değerleri, butonun konteyner içindeki konumu. Siz menuContainer.y += 50; diyerek konteyneri 50 piksel aşağıya indirdiniz. Ancak game.move fonksiyonunda kullandığınız (x, y) değerleri, ekranın global koordinatları. Dolayısıyla, “hover” kontrolü yaparken konteynerin globaldeki ofsetini de eklemeniz gerekiyor. Örnek olarak şu kontrol: js Kopyala Düzenle if ( x >= playButton.x - playButton.width / 2 && x <= playButton.x + playButton.width / 2 && y >= playButton.y - playButton.height / 2 && y <= playButton.y + playButton.height / 2 ) { playButton.visible = true; } artık geçersiz kalıyor; çünkü playButton.x ve playButton.y, menuContainer’ın iç koordinatları, ama x ve y parametreleri ekranın en üst seviyedeki (global) koordinatları. Çözüm 1: Global Koordinata Konteyner Ofsetini Ekleme Menüyü 50 piksel aşağı kaydırdıysanız, menuContainer.y de 50 piksel oldu demektir. Dolayısıyla kontrol yaparken playButton’ın global konumu playButton.y + menuContainer.y olur. Benzer şekilde x’i de varsa playButton.x + menuContainer.x olarak hesaplanır. Aşağıdaki gibi menuContainer ofsetini ekleyerek kontrol yapabilirsiniz: js Kopyala Düzenle game.move = function (mx, my, obj) { // Butonun global X ve Y konumu var playGlobalX = playButton.x + menuContainer.x; var playGlobalY = playButton.y + menuContainer.y; if ( mx >= playGlobalX - playButton.width / 2 && mx <= playGlobalX + playButton.width / 2 && my >= playGlobalY - playButton.height / 2 && my <= playGlobalY + playButton.height / 2 ) { playButton.visible = true; } else { playButton.visible = false; } // Aynı mantığı volumeButton, creditsButton, recordsButton için de uygulayın. // ... }; Bu sayede, fare global koordinatı (mx, my) ile butonun global konumu doğru şekilde karşılaştırılır. Çözüm 2: Fare Koordinatını Konteynerin Yerel Koordinatına Dönüştürme Alternatif olarak, fareden gelen (x, y)’yi önce menü konteynerinin yerel koordinatına dönüştürüp (yani container içinde kaç pikselde olduğunu bulup) ondan sonra butonların (x, y) değerleriyle karşılaştırabilirsiniz. Bunun için: js Kopyala Düzenle game.move = function (mx, my, obj) { // Menü konteyneri kadar offset al var localX = mx - menuContainer.x; var localY = my - menuContainer.y; // Artık buton kontrolü yerel koordinatta if ( localX >= playButton.x - playButton.width / 2 && localX <= playButton.x + playButton.width / 2 && localY >= playButton.y - playButton.height / 2 && localY <= playButton.y + playButton.height / 2 ) { playButton.visible = true; } else { playButton.visible = false; } // Diğer butonlar (volumeButton, creditsButton, recordsButton) için de aynı yöntemi uygulayın. }; Bu yaklaşımda, her butonun (x, y) değeri kendi konteyner koordinatlarında kalmaya devam eder ve siz de fareyi konteyner koordinatına dönüştürerek karşılaştırırsınız. Hangisi Daha İyi? Konteyneri topluca hareket ettirdiğinizde ve game.move hep global (ekran) koordinatları veriyorsa, Çözüm 2 (fareyi yerel koordinata dönüştürme) genelde daha pratiktir. Eğer butonlarınız zaten ekrana göre mutlak konumdaysa (yani menuContainer’ı (0,0)da bırakıp butonları doğrudan global konuma koyuyorsanız), ofset eklemeye gerek kalmaz. Kısacası, menüyü bir Container içinde taşıdığınız sürece, “hover” testinde de o konteynerin ofsetini hesaba katmanız gerekir.
User prompt
Menüdeki tüm öğeleri (arka plan, part, butonlar, vb.) tek seferde 50 piksel aşağıya kaydırmanın en kolay yolu, menü konteynerinin y değerini toplu olarak 50 piksel artırmaktır. Böylece konteyner altındaki bütün elemanlar birlikte aşağı iner. Aşağıdaki adımları uygulayabilirsiniz: Menü elemanları oluşturduktan sonra (tüm menuBackground, playButton, playLabel vs. ekledikten sonra) şu satırı ekleyin: js Kopyala Düzenle menuContainer.y += 50; Bu sayede menü konteyneri, yani içindeki her şey 50 piksel aşağıya taşınır. Eğer menünüzü bir animasyonla merkeze getiriyorsanız (örneğin _animateMenu fonksiyonunda endY = centerY(); diye ayarlıyorsanız), final konumun 50 piksel aşağıda kalmasını istiyorsanız şunu değiştirin: js Kopyala Düzenle var endY = centerY() + 50; Böylece animasyon bittiğinde menü, tam ortadan 50 piksel aşağıda konumlanacaktır. Bu iki düzenleme sayesinde menü (arka plan, butonlar ve yazılar) topluca 50 piksel daha aşağıda gözükecektir.
User prompt
menuye dair her şeyi 20 pixel aşağı indir
Code edit (1 edits merged)
Please save this source code
User prompt
Adjust menu position 30 pixels down after game over
User prompt
menu öldükten sonra fazla yukarı gitmiş 20 pixel aşağı ayarla öldükten sonra açılan menuyu
User prompt
menu öldükten sonra fazla yukarı gitmiş 20 pixel aşağı ayarla öldükten sonra açılan menuyu
User prompt
Çözüm 2: Menü yeniden gösterilirken menuContainer’ı merkeze sıfırlamak Oyun bittiğinde (endGame fonksiyonu içinde) veya resetGame() içinde menüyü tekrar açmadan hemen önce, menuContainer.y (ve gerekiyorsa menuContainer.x) değerini elle tekrar ortalayın. Örneğin: js Kopyala Düzenle function endGame() { // ... LK.setTimeout(function () { game.touchDisabled = false; menuOpen = true; // Menü y koordinatını tekrar sıfırla veya merkeze çek menuContainer.y = 0; // ya da: menuContainer.y = centerY() - (menuContainer.height/2); menuContainer.visible = true; }, 2000); LK.setTimeout(function () { resetGame(); }, 2000); } Eğer menuContainer’ı komple ortalamak istiyorsanız (ve anchor’ları 0.5 kullanıyorsanız): js Kopyala Düzenle menuContainer.x = centerX(); menuContainer.y = centerY(); Animasyona tekrar ihtiyaç duyarsanız, menü kapanırken “nereye kadar kaydıracağı”nızı ve tekrar açılırken “nereden başlayacağı”nızı tutarlı hale getirin. Kısaca yapılabilecekler Oyun sahnesi boyutu ile centerX() / centerY()’yi senkronize edin. Menü animasyonu varsa, menüyü tekrar görünür yaparken menuContainer’ın x,y koordinatlarını elle olması gereken değere geri çekin. Bunları düzelttikten sonra menünüz oyun bittiğinde tekrar tam ortada (veya istediğiniz yerde) görünecektir.
User prompt
Please fix the bug: 'Cannot read properties of undefined (reading 'width')' in or related to this line: 'menuContainer.x = (game.width - menuBackground.width) / 2;' Line Number: 246
User prompt
Çözüm 1-B: Menü Container’ını (ya da arkaplanını) 0,0 noktasından (sol üst) referans alarak konumlamak Şu anda menü arka planı anchorX: 0.5, anchorY: 0.5 olacak şekilde tam ortada duruyor, fakat menuContainer’ın kendisi (0,0)’a sabitlenmişse veya animasyondan dolayı y’si bozuksa, ekranda doğru görünmeyebilir. Eğer menuContainer’ı (0,0)’a bırakmak istiyorsanız, menü arkaplanını şu şekilde konumlayabilirsiniz: js Kopyala Düzenle var menuBackground = LK.getAsset('menu_background', { anchorX: 0, // sol üst köşe anchorY: 0, x: 0, // container içinde 0,0'a otur y: 0 }); Bu durumda menü Container’ını tam ekran ortasına getirmek istiyorsanız, şu şekilde yaparsınız: js Kopyala Düzenle menuContainer.x = (game.width - menuBackground.width) / 2; menuContainer.y = (game.height - menuBackground.height) / 2; Bu yaklaşımla, menü arka planının sol üst köşesi tam ortada durur (eğer menü arka planının boyutu, ekran boyutundan küçükse). Menüye uygulanan animasyonun menü koordinatını “bozuk” bırakması Kodunuzda menüyü “kaydıra kaydıra” kapatan şu fonksiyon var (örnek animasyon kodu): js Kopyala Düzenle var _animateMenu = function animateMenu() { var currentTime = Date.now(); var elapsedTime = currentTime - startTime; var progress = Math.min(elapsedTime / animationDuration, 1); // Linear interpolation menuContainer.y = startY + (endY - startY) * progress; if (progress < 1) { LK.setTimeout(_animateMenu, 1); } else { menuOpen = false; menuContainer.visible = false; gameWait = true; } }; Bu animasyon menüyü “yukarıdan aşağıya” ya da “aşağıdan yukarıya” kaydırıp sonunda menuContainer.visible = false; yapıyor. Fakat oyun bitince menüyü tekrar açarken menuContainer.y değerini sıfırlamaz veya tekrar “ekran ortasına” set etmezseniz, animasyonun bıraktığı eski bir y koordinatında kalır. Dolayısıyla menü ekrana kısmen ya da tamamen dışarıda görünebilir.
User prompt
O tipik olarak iki ana nedenle oluşabiliyor: Oyun sahnesi boyutu ile centerX() / centerY() tanımlarının uyuşmaması Kodda centerX() ve centerY() değerleri şu şekilde sabitlenmiş: js Kopyala Düzenle function centerX() { return 2048 / 2; // 1024 } function centerY() { return groundY / 2; // 2732 / 2 = 1366 } Fakat cihazınız veya tarayıcınız bu boyuttan (2048x2732) farklı bir çözünürlükte çalışıyor olabilir. Eğer gerçek ekranınız daha küçük (örneğin 1080px yüksek) ise, y: centerY() (1366) koordinatı, ekranın dışında kalabilir. Dolayısıyla menü de ekranın altında “gömülü” görünüyor. Çözüm 1-A: Gerçek boyutları dinamik almak Eğer gerçek sahne genişliği/yüksekliği game.width ve game.height gibi bir değişkenden erişilebiliyorsa, centerX() ve centerY() fonksiyonlarınızı şu şekilde değiştirin: js Kopyala Düzenle function centerX() { return game.width / 2; } function centerY() { return game.height / 2; } Böylece her cihazda, her çözünürlükte otomatik olarak “ekranın ortası”na yerleşir.
User prompt
O tipik olarak iki ana nedenle oluşabiliyor: Oyun sahnesi boyutu ile centerX() / centerY() tanımlarının uyuşmaması Kodda centerX() ve centerY() değerleri şu şekilde sabitlenmiş: js Kopyala Düzenle function centerX() { return 2048 / 2; // 1024 } function centerY() { return groundY / 2; // 2732 / 2 = 1366 } Fakat cihazınız veya tarayıcınız bu boyuttan (2048x2732) farklı bir çözünürlükte çalışıyor olabilir. Eğer gerçek ekranınız daha küçük (örneğin 1080px yüksek) ise, y: centerY() (1366) koordinatı, ekranın dışında kalabilir. Dolayısıyla menü de ekranın altında “gömülü” görünüyor. Çözüm 1-A: Gerçek boyutları dinamik almak Eğer gerçek sahne genişliği/yüksekliği game.width ve game.height gibi bir değişkenden erişilebiliyorsa, centerX() ve centerY() fonksiyonlarınızı şu şekilde değiştirin: js Kopyala Düzenle function centerX() { return game.width / 2; } function centerY() { return game.height / 2; } Böylece her cihazda, her çözünürlükte otomatik olarak “ekranın ortası”na yerleşir. Çözüm 1-B: Menü Container’ını (ya da arkaplanını) 0,0 noktasından (sol üst) referans alarak konumlamak Şu anda menü arka planı anchorX: 0.5, anchorY: 0.5 olacak şekilde tam ortada duruyor, fakat menuContainer’ın kendisi (0,0)’a sabitlenmişse veya animasyondan dolayı y’si bozuksa, ekranda doğru görünmeyebilir. Eğer menuContainer’ı (0,0)’a bırakmak istiyorsanız, menü arkaplanını şu şekilde konumlayabilirsiniz: js Kopyala Düzenle var menuBackground = LK.getAsset('menu_background', { anchorX: 0, // sol üst köşe anchorY: 0, x: 0, // container içinde 0,0'a otur y: 0 }); Bu durumda menü Container’ını tam ekran ortasına getirmek istiyorsanız, şu şekilde yaparsınız: js Kopyala Düzenle menuContainer.x = (game.width - menuBackground.width) / 2; menuContainer.y = (game.height - menuBackground.height) / 2; Bu yaklaşımla, menü arka planının sol üst köşesi tam ortada durur (eğer menü arka planının boyutu, ekran boyutundan küçükse). Menüye uygulanan animasyonun menü koordinatını “bozuk” bırakması Kodunuzda menüyü “kaydıra kaydıra” kapatan şu fonksiyon var (örnek animasyon kodu): js Kopyala Düzenle var _animateMenu = function animateMenu() { var currentTime = Date.now(); var elapsedTime = currentTime - startTime; var progress = Math.min(elapsedTime / animationDuration, 1); // Linear interpolation menuContainer.y = startY + (endY - startY) * progress; if (progress < 1) { LK.setTimeout(_animateMenu, 1); } else { menuOpen = false; menuContainer.visible = false; gameWait = true; } }; Bu animasyon menüyü “yukarıdan aşağıya” ya da “aşağıdan yukarıya” kaydırıp sonunda menuContainer.visible = false; yapıyor. Fakat oyun bitince menüyü tekrar açarken menuContainer.y değerini sıfırlamaz veya tekrar “ekran ortasına” set etmezseniz, animasyonun bıraktığı eski bir y koordinatında kalır. Dolayısıyla menü ekrana kısmen ya da tamamen dışarıda görünebilir. Çözüm 2: Menü yeniden gösterilirken menuContainer’ı merkeze sıfırlamak Oyun bittiğinde (endGame fonksiyonu içinde) veya resetGame() içinde menüyü tekrar açmadan hemen önce, menuContainer.y (ve gerekiyorsa menuContainer.x) değerini elle tekrar ortalayın. Örneğin: js Kopyala Düzenle function endGame() { // ... LK.setTimeout(function () { game.touchDisabled = false; menuOpen = true; // Menü y koordinatını tekrar sıfırla veya merkeze çek menuContainer.y = 0; // ya da: menuContainer.y = centerY() - (menuContainer.height/2); menuContainer.visible = true; }, 2000); LK.setTimeout(function () { resetGame(); }, 2000); } Eğer menuContainer’ı komple ortalamak istiyorsanız (ve anchor’ları 0.5 kullanıyorsanız): js Kopyala Düzenle menuContainer.x = centerX(); menuContainer.y = centerY(); Animasyona tekrar ihtiyaç duyarsanız, menü kapanırken “nereye kadar kaydıracağı”nızı ve tekrar açılırken “nereden başlayacağı”nızı tutarlı hale getirin. Kısaca yapılabilecekler Oyun sahnesi boyutu ile centerX() / centerY()’yi senkronize edin. Menü animasyonu varsa, menüyü tekrar görünür yaparken menuContainer’ın x,y koordinatlarını elle olması gereken değere geri çekin. Bunları düzelttikten sonra menünüz oyun bittiğinde tekrar tam ortada (veya istediğiniz yerde) görünecektir.
User prompt
şimdi ekranın sol altına gitti
User prompt
düzelmedi menu ekranının en üstü karakterin olduğu yere geliyor
User prompt
menu ekranı olması gereken yere gelmiyor lokasyonu yanlış yerde ve çözümü sanırım şu Bu durumun nedeni, oyun bittiğinde (game over) menü konteynerinin (menuContainer) y koordinatının resetlenmemesi. Oyun sıfırlandığında menü konumunun ekranın ortasına (centerY) çekilmesi gerekir. Bunu sağlamak için, resetGame() fonksiyonuna veya oyun bittiğinde menüyü gösteren callback'e menü konteynerinin y koordinatını centerY() olarak ayarlamanız yeterli olacaktır. Örneğin, resetGame() fonksiyonunuza aşağıdaki satırı ekleyebilirsiniz: js Kopyala Düzenle function resetGame() { // Menü konumunu ekranın ortasına sıfırla menuContainer.y = centerY(); if (gameOverText) { game.removeChild(gameOverText); gameOverText = null; } var objectsToRemove = []; game.children.forEach(function (child) { if (child instanceof Tree || child instanceof Tube) { objectsToRemove.push(child); } }); objectsToRemove.forEach(function (obj) { game.removeChild(obj); }); game.removeChild(character); character = game.addChild(new Character()); character.x = centerX(); character.y = groundY / 2; gameStarted = false; gameOver = false; lastSpawner = null; passCounter = 0; counterText.setText(passCounter); } Bu sayede, ölümden sonra menü ekranı yeniden gösterildiğinde doğru konumda (merkezde) başlayacaktır. Eğer menüyü açan animasyon fonksiyonunda da bir konum sorunu varsa, orada başlangıç (startY) ve bitiş (endY) koordinatlarını kontrol ederek, menü konteynerinin başlangıç konumunun doğru ayarlandığından emin olun.
User prompt
10 kat daha hızlı olsun ve aşağı insin
User prompt
make it 10 time faster
User prompt
Please fix the bug: 'Uncaught TypeError: requestAnimationFrame is not a function' in or related to this line: 'requestAnimationFrame(_animateMenu);' Line Number: 659
User prompt
tween plugin i sorun yapıyor tween plugini kullanmadan bir animasyon yap
User prompt
Please fix the bug: 'Uncaught ReferenceError: tween is not defined' in or related to this line: 'tween(menuContainer, {' Line Number: 653 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
playe basıldığında animasyonlu bir şekilde menu ekrandan çekilsin ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Please fix the bug: 'Uncaught ReferenceError: tween is not defined' in or related to this line: 'tween(menuContainer, {' Line Number: 653 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Evet, menü geçişini animasyonlu hale getirebilirsiniz. Örneğin, menü container’ınızın (menuContainer) dönüş (rotation) özelliğini tween (zamanla yumuşak geçiş) kullanarak 90 derece (Math.PI/2) döndürebilir ve animasyon tamamlandığında container’ı gizleyebilirsiniz. Eğer LK kütüphanesinde tween fonksiyonu varsa (örneğin LK.tween gibi), aşağıdaki örnek size yardımcı olabilir: js Kopyala Düzenle // Play tuşuna basıldığında animasyonlu geçiş game.down = function (x, y, obj) { if (menuOpen) { if (x >= playButton.x - playButton.width / 2 && x <= playButton.x + playButton.width / 2 && y >= playButton.y - playButton.height / 2 && y <= playButton.y + playButton.height / 2) { // Menü geçiş animasyonu: menuContainer 90 derece dönecek LK.tween(menuContainer, { rotation: Math.PI / 2 }, 1000, LK.easing.quadInOut, function() { // Animasyon tamamlandığında menü kaybolur ve oyun bekleme moduna geçer menuContainer.visible = false; gameWait = true; }); return; } // Diğer buton kontrolleri... } else if (gameOver) { if (!game.touchDisabled) { menuOpen = true; menuContainer.visible = true; resetGame(); } } else { if (gameWait) { gameWait = false; gameStarted = true; var initialTube = new Tube(); game.addChild(initialTube); lastSpawner = initialTube; // İlk dokunuşta karakter zıplar character.jump(); } else { character.jump(); character.rotation = 0.1; LK.setTimeout(function () { character.rotation = 0; }, 200); } } }; Bu örnekte, PLAY butonuna basıldığında menü container’ınız LK.tween kullanılarak 1 saniyede 90 derece döner. Animasyon tamamlandığında menuContainer.visible false yapılarak ekrandan kaldırılır, ardından oyun bekleme moduna (gameWait) geçer. İlk dokunuş gerçekleştiğinde ise oyun başlar ve karakter zıplar. Eğer kullandığınız kütüphanede tween fonksiyonu yoksa benzer bir animasyon döngüsü veya zamanlayıcı (setTimeout, requestAnimationFrame) kullanarak dönüş animasyonunu kendiniz de yazabilirsiniz. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
/**** * Classes ****/ // Character: Dokunulduğunda zıplar. var Character = Container.expand(function () { var self = Container.call(this); self.attachAsset('character', { anchorX: 0.5, anchorY: 0.5 }); self.zIndex = 4; self.velocityY = 0; self.gravity = 0.3; self.jumpStrength = -12; self.width = 350; self.height = 300; self.update = function () { if (gameStarted && !gameOver) { self.velocityY += self.gravity; self.y += self.velocityY; if (self.y > groundY - 100) { self.y = groundY - 100; self.velocityY = 0; gameOver = true; endGame(); } var characterLeft = self.x - self.width / 2; var characterRight = self.x + self.width / 2; var characterTop = self.y - self.height / 2; var characterBottom = self.y + self.height / 2; if (characterLeft + self.width / 2 < 0 || characterRight - self.width / 2 > screenRight || characterTop + self.height / 2 < 0 || characterBottom - self.height / 2 > groundY) { gameOver = true; endGame(); } // Çarpışma kontrolü: Tube ve Tree game.children.forEach(function (child) { if (child instanceof Tube) { var tubeLeft = child.x - child.bottomTube.width / 2; var tubeRight = child.x + child.bottomTube.width / 2; var safeGapLowerEdge = child.y - child.bottomTube.height; var safeGapUpperEdge = -gapOffset + child.topTube.height; if (self.x + self.width / 2 > tubeLeft && self.x - self.width / 2 < tubeRight) { if (self.y < safeGapUpperEdge || self.y > safeGapLowerEdge) { gameOver = true; endGame(); } } } else if (child instanceof Tree) { var treeLeft = child.x - child.bottomTree.width / 2; var treeRight = child.x + child.bottomTree.width / 2; var safeGapLowerEdge = child.y - child.bottomTree.height; var safeGapUpperEdge = -gapOffset + child.topTree.height; if (self.x + self.width / 2 > treeLeft && self.x - self.width / 2 < treeRight) { if (self.y < safeGapUpperEdge || self.y > safeGapLowerEdge) { gameOver = true; endGame(); } } } }); } }; self.jump = function () { if (!gameOver) { self.velocityY = self.jumpStrength; } }; return self; }); // GameOverText class var GameOverText = Container.expand(function () { var self = Container.call(this); self.text = new Text2("GAME OVER", { fontFamily: "Arial", fontSize: 2250, fill: 0xFF0000, align: "center", fontWeight: "bold" }); self.text.anchorX = 0.5; self.text.anchorY = 0.5; self.addChild(self.text); self.zIndex = 100; return self; }); // Tree class: Üst ve alt ağaç oluşturma var Tree = Container.expand(function () { var self = Container.call(this); var bottomUnit = Math.floor(Math.random() * 8) + 1; var topUnit = 9 - bottomUnit; var unitSize = groundY / totalUnits; var bottomHeight = bottomUnit * unitSize; var topHeight = topUnit * unitSize; self.y = groundY; self.bottomTree = self.attachAsset('tree', { anchorX: 0.5, anchorY: 1, width: 300, height: bottomHeight, flipY: false }); self.topTree = self.attachAsset('tree', { anchorX: 0.5, anchorY: 0.5, width: 300, height: topHeight, flipY: false }); self.topTree.rotation = Math.PI; self.topTree.y = -groundY - gapOffset + topHeight / 2; self.zIndex = 1; self.x = 2048 + 800; self.velocityX = -3.6; self.spawned = false; self.prevX = self.x; self.update = function () { if (gameStarted && !gameOver) { self.x += self.velocityX; if (!self.spawned && self.prevX > treeSpawnThreshold && self.x <= treeSpawnThreshold) { self.spawned = true; var newTube = new Tube(); newTube.x = 2048 + 800; game.addChild(newTube); lastSpawner = newTube; } self.prevX = self.x; if (!self.passed && character.x > self.x + self.bottomTree.width / 2) { self.passed = true; passCounter += 1; counterText.setText(passCounter); } } }; return self; }); // Tube class: Üst ve alt boru oluşturma var Tube = Container.expand(function () { var self = Container.call(this); var bottomUnit = Math.floor(Math.random() * 8) + 1; var topUnit = 9 - bottomUnit; var unitSize = groundY / totalUnits; var bottomHeight = bottomUnit * unitSize; var topHeight = topUnit * unitSize; self.y = groundY; self.bottomTube = self.attachAsset('tube', { anchorX: 0.5, anchorY: 1, width: 300, height: bottomHeight, flipY: false }); self.topTube = self.attachAsset('tube', { anchorX: 0.5, anchorY: 0.5, width: 300, height: topHeight, flipY: false }); self.topTube.rotation = Math.PI; self.topTube.y = -groundY - gapOffset + topHeight / 2; self.zIndex = 1; self.x = 2048 + 800; self.velocityX = -3.6; self.spawned = false; self.prevX = self.x; self.update = function () { if (gameStarted && !gameOver) { self.x += self.velocityX; if (!self.spawned && self.prevX > tubeSpawnThreshold && self.x <= tubeSpawnThreshold) { self.spawned = true; var newTree = new Tree(); newTree.x = 2048 + 800; game.addChild(newTree); lastSpawner = newTree; } self.prevX = self.x; if (!self.passed && character.x > self.x + self.bottomTube.width / 2) { self.passed = true; passCounter += 1; counterText.setText(passCounter); } } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ /**** * Global Variables & Helper Functions ****/ var groundY = 2732; var menuOpen = true; var volumeOn = true; var records = []; // En iyi 5 skoru saklar var gapOffset = 400; var gameStarted = false; var gameOver = false; var gameWait = false; // Oyun menüden çıkıp da henüz başlamamışken true olacak. var screenRight = 2048; var totalUnits = 10; var tubeSpawnThreshold, treeSpawnThreshold; var lastSpawner = null; var gameOverText = null; var passCounter = 0; var lastScore = 0; // Global lastScore variable function centerX() { return game.width / 2; } function centerY() { return game.height / 2; } tubeSpawnThreshold = centerX() + (screenRight - centerX()) / 2; treeSpawnThreshold = centerX() + 3 * (screenRight - centerX()) / 4; /**** * Menu Setup ****/ var menuContainer = new Container(); menuContainer.zIndex = 200; // Menü arka planları var menuBackground = LK.getAsset('menu_background', { anchorX: 0.5, anchorY: 0.5, x: centerX(), y: centerY() }); menuBackground.zIndex = 200; menuContainer.addChild(menuBackground); var menuBackgroundPart = LK.getAsset('menu_background_part', { anchorX: 0.5, anchorY: 0.19, x: centerX(), y: centerY() }); menuBackgroundPart.zIndex = menuBackground.zIndex + 1; // 201 menuContainer.addChild(menuBackgroundPart); // Butonlar ve Label’lar (buton şekilleri başlangıçta görünmez, metinler her zaman görünür) // PLAY var playButton = LK.getAsset('button_play', { anchorX: 0.5, anchorY: 0.5, x: centerX() - 40, y: centerY() + 239 }); playButton.visible = false; menuContainer.addChild(playButton); var playLabel = new Text2("PLAY", { fontFamily: "Arial", fontSize: 63.25 * 1.1 * 1.08, // 18% increase fill: 0xffffff }); playLabel.anchorX = 0.5; playLabel.anchorY = 0.5; playLabel.x = playButton.x - 30; playLabel.y = playButton.y - 12; playLabel.visible = true; playLabel.zIndex = 1000; // diğer öğelerden yüksek menuContainer.addChild(playLabel); // VOLUME var volumeButton = LK.getAsset('button_volume', { anchorX: 0.5, anchorY: 0.5, x: centerX() - 40, y: centerY() + 355 }); volumeButton.visible = false; menuContainer.addChild(volumeButton); var volumeLabel = new Text2("VOLUME", { fontFamily: "Arial", fontSize: 63.25 * 1.1 * 1.05 * 1.05 * 1.05, // 30% increase fill: 0xffffff }); volumeLabel.anchorX = 0.5; volumeLabel.anchorY = 0.5; volumeLabel.x = volumeButton.x - 45; // Volume textini 12 piksel yukarı taşıyoruz: volumeLabel.y = volumeButton.y - 12; volumeLabel.visible = true; volumeLabel.zIndex = 1000; menuContainer.addChild(volumeLabel); // CREDITS var creditsButton = LK.getAsset('button_credits', { anchorX: 0.5, anchorY: 0.5, x: centerX() - 40, y: centerY() + 471 }); creditsButton.visible = false; menuContainer.addChild(creditsButton); var creditsLabel = new Text2("CREDITS", { fontFamily: "Arial", fontSize: 63.25 * 1.05 * 1.05 * 1.05, // 25% increase fill: 0xffffff }); creditsLabel.anchorX = 0.5; creditsLabel.anchorY = 0.5; creditsLabel.x = creditsButton.x - 47; creditsLabel.y = creditsButton.y - 16; creditsLabel.visible = true; creditsLabel.zIndex = 1000; menuContainer.addChild(creditsLabel); // RECORDS var recordsButton = LK.getAsset('button_records', { anchorX: 0.5, anchorY: 0.5, x: centerX() - 40, y: centerY() + 577 }); recordsButton.visible = false; menuContainer.addChild(recordsButton); var recordsLabel = new Text2("RECORDS", { fontFamily: "Arial", fontSize: 150.25 * 1.05 * 1.05 * 1.03 * 1.05, // 30% increase fill: 0xffffff }); recordsLabel.anchorX = 0.5; recordsLabel.anchorY = 0.5; recordsLabel.x = recordsButton.x - 47; // Records textini 12 piksel yukarı taşıyoruz: recordsLabel.y = recordsButton.y - 12; recordsLabel.visible = true; recordsLabel.zIndex = 1000; menuContainer.addChild(recordsLabel); // Fare hareketinde hover kontrolü: butonlar yalnızca imleç üzerindeyken görünür game.move = function (x, y, obj) { if (x >= playButton.x - playButton.width / 2 && x <= playButton.x + playButton.width / 2 && y >= playButton.y - playButton.height / 2 && y <= playButton.y + playButton.height / 2) { playButton.visible = true; } else { playButton.visible = false; } if (x >= volumeButton.x - volumeButton.width / 2 && x <= volumeButton.x + volumeButton.width / 2 && y >= volumeButton.y - volumeButton.height / 2 && y <= volumeButton.y + volumeButton.height / 2) { volumeButton.visible = true; } else { volumeButton.visible = false; } if (x >= creditsButton.x - creditsButton.width / 2 && x <= creditsButton.x + creditsButton.width / 2 && y >= creditsButton.y - creditsButton.height / 2 && y <= creditsButton.y + creditsButton.height / 2) { creditsButton.visible = true; } else { creditsButton.visible = false; } if (x >= recordsButton.x - recordsButton.width / 2 && x <= recordsButton.x + recordsButton.width / 2 && y >= recordsButton.y - recordsButton.height / 2 && y <= recordsButton.y + recordsButton.height / 2) { recordsButton.visible = true; } else { recordsButton.visible = false; } }; var counterText = new Text2('0', { size: 124.2, // 15% artış from 108 fill: 0xFFFFFF }); counterText.anchor.set(0, 0); counterText.x = 1320; counterText.y = 10; LK.gui.topLeft.addChild(counterText); var background = LK.getAsset('background', { anchorX: 0.5, anchorY: 0.5, x: centerX(), y: groundY / 2 }); background.zIndex = 0; game.addChild(background); var sky = LK.getAsset('sky', { anchorX: 0.5, anchorY: 0, x: centerX(), y: 0 }); sky.zIndex = 2; game.addChild(sky); var groundAsset = LK.getAsset('ground', { anchorX: 0.5, anchorY: 0.5, x: centerX(), y: groundY - -25 }); groundAsset.zIndex = 4.1; game.addChild(groundAsset); var ground2Asset = LK.getAsset('ground2', { anchorX: 0.5, anchorY: 0.5, x: centerX(), y: groundY - 40 }); ground2Asset.zIndex = 0.5; game.addChild(ground2Asset); var character = game.addChild(new Character()); character.x = centerX(); character.y = groundY / 2; game.addChild(menuContainer); /**** * Helper Functions: Credits, Volume & Records ****/ function createCommonCloseElements(modalWidth, modalHeight) { // close label: base close label font size (hesaplanmış değeri 35 * 1.16 * 1.15 * 1.1 * 1.2 ≈ 62) var closeLabel = new Text2("X", { fontFamily: "Arial", fontSize: Math.round(35 * 1.16 * 1.15), fill: 0xffffff, align: "center" }); closeLabel.anchorX = 0.5; closeLabel.anchorY = 0.5; closeLabel.zIndex = 10000; // Konum: sağ üst köşeye yakın (20px offset) closeLabel.x = centerX() + modalWidth / 2 - 65; closeLabel.y = centerY() - modalHeight / 2 + 40; // close button var radius = 25; var closeButton = LK.getAsset('button_close', { anchorX: 0.5, anchorY: 0.5, width: radius * 2.3 * 1.2, height: radius * 2.3 * 1.2 }); closeButton.zIndex = 10000; closeButton.x = closeLabel.x + 7; closeButton.y = closeLabel.y + 16; return { closeLabel: closeLabel, closeButton: closeButton }; } function showCredits() { var creditsContainer = new Container(); creditsContainer.zIndex = 300; // Modal boyutu: 1250x2000 var modalWidth = 1250, modalHeight = 2000; var bg = LK.getAsset('button_credits', { anchorX: 0.5, anchorY: 0.5, width: modalWidth, height: modalHeight, color: 0x000000 }); bg.x = centerX(); bg.y = centerY(); creditsContainer.addChild(bg); var creditsText = new Text2("Game by\nMustafa Talha ŞEN", { fontFamily: "Arial", fontSize: 5000, fill: 0xffffff, align: "center" // Align text to center }); creditsText.anchorX = 0.5; creditsText.anchorY = 0.5; creditsText.x = centerX() - 359; creditsText.y = centerY() - 800; // Move text 150 pixels upwards creditsText.scale.set(3, 3); // Further increase the scale for larger text creditsContainer.addChild(creditsText); // Ortak close label ve button var commonClose = createCommonCloseElements(modalWidth, modalHeight); creditsContainer.addChild(commonClose.closeButton); creditsContainer.addChild(commonClose.closeLabel); commonClose.closeButton.on('down', function () { game.removeChild(creditsContainer); menuOpen = true; menuContainer.visible = true; }); game.addChild(creditsContainer); } function showVolume() { var volumeContainer = new Container(); volumeContainer.zIndex = 300; // Modal boyutu: 1250x2000 var modalWidth = 1250, modalHeight = 2000; var bg = LK.getAsset('button_credits', { anchorX: 0.5, anchorY: 0.5, width: modalWidth, height: modalHeight, color: 0x000000 }); bg.x = centerX(); bg.y = centerY(); volumeContainer.addChild(bg); var volumeText = new Text2("Volume Settings", { fontFamily: "Arial", fontSize: 5000, // Match the font size of the records text fill: 0xffffff }); volumeText.scale.set(3, 3); // Further increase the scale for larger text volumeText.anchorX = 0.5; volumeText.anchorY = 0.5; volumeText.x = centerX() - 275; volumeText.y = centerY() - 800; volumeContainer.addChild(volumeText); // Ortak close label ve button var commonClose = createCommonCloseElements(modalWidth, modalHeight); volumeContainer.addChild(commonClose.closeButton); volumeContainer.addChild(commonClose.closeLabel); commonClose.closeButton.on('down', function () { game.removeChild(volumeContainer); menuOpen = true; menuContainer.visible = true; }); game.addChild(volumeContainer); } function showRecords() { var recordsContainer = new Container(); recordsContainer.zIndex = 300; var modalWidth = 1500, modalHeight = 2200; var bg = LK.getAsset('button_credits', { anchorX: 0.5, anchorY: 0.5, width: modalWidth, height: modalHeight, color: 0x000000 }); bg.x = centerX(); bg.y = centerY(); recordsContainer.addChild(bg); var recordsTextStr = "Top Scores:\n"; for (var i = 0; i < records.length; i++) { recordsTextStr += i + 1 + ". " + records[i].score + " (Attempt " + records[i].attempt + ")\n"; } if (records.length === 0) { recordsTextStr += "No records yet."; } recordsTextStr += "\nAttempts: " + records.length; recordsTextStr += "\nLast Score: " + lastScore; // Records textinin font boyutu 5 kat büyütülmüş (32 -> 160) var recordsText = new Text2(recordsTextStr, { fontFamily: "Arial", fontSize: 5000, fill: 0xffffff, align: "center" }); recordsText.anchorX = 0.5; recordsText.anchorY = 0.5; recordsText.x = centerX() - 280; // Move text 30 pixels left recordsText.y = centerY() - 850; // Move text 50 pixels upwards recordsText.scale.set(3, 3); // Further increase the scale for larger text recordsContainer.addChild(recordsText); var commonClose = createCommonCloseElements(modalWidth, modalHeight); recordsContainer.addChild(commonClose.closeButton); recordsContainer.addChild(commonClose.closeLabel); commonClose.closeButton.on('down', function () { game.removeChild(recordsContainer); menuOpen = true; menuContainer.visible = true; }); game.addChild(recordsContainer); } /**** * End Game & Reset Functions ****/ function endGame() { LK.effects.flashScreen(0xFF0000, 500); character.velocityY = character.jumpStrength; character.update = function () { if (gameOver) { character.velocityY += character.gravity; character.y += character.velocityY; if (character.y > groundY + character.height) { character.y = groundY + character.height; character.velocityY = 0; } } }; game.children.forEach(function (child) { if (child.velocityX) { child.velocityX = 0; } }); game.touchDisabled = true; lastScore = passCounter; records.push({ score: passCounter, attempt: records.length + 1 }); records.sort(function (a, b) { return b.score - a.score; }); if (records.length > 5) { records = records.slice(0, 5); } LK.setTimeout(function () { game.touchDisabled = false; menuOpen = true; menuContainer.y = centerY() - menuContainer.height / 2; menuContainer.visible = true; }, 2000); LK.setTimeout(function () { resetGame(); }, 2000); } function resetGame() { if (gameOverText) { game.removeChild(gameOverText); gameOverText = null; } var objectsToRemove = []; game.children.forEach(function (child) { if (child instanceof Tree || child instanceof Tube) { objectsToRemove.push(child); } }); objectsToRemove.forEach(function (obj) { game.removeChild(obj); }); game.removeChild(character); character = game.addChild(new Character()); character.x = centerX(); character.y = groundY / 2; menuContainer.x = centerX(); menuContainer.y = centerY(); gameStarted = false; gameOver = false; lastSpawner = null; passCounter = 0; counterText.setText(passCounter); } /**** * Touch Event ****/ game.down = function (x, y, obj) { if (menuOpen) { if (x >= playButton.x - playButton.width / 2 && x <= playButton.x + playButton.width / 2 && y >= playButton.y - playButton.height / 2 && y <= playButton.y + playButton.height / 2) { var _animateMenu = function animateMenu() { var currentTime = Date.now(); var elapsedTime = currentTime - startTime; var progress = Math.min(elapsedTime / animationDuration, 1); // Ensure progress doesn't exceed 1 // Linear interpolation for smooth transition menuContainer.y = startY + (endY - startY) * progress; if (progress < 1) { LK.setTimeout(_animateMenu, 1); } else { menuOpen = false; menuContainer.visible = false; gameWait = true; } }; // Menüden çıkış: hemen flag'leri güncelleyin, animasyon olmadan: var animationDuration = 100; // Duration in milliseconds var startTime = Date.now(); var startY = menuContainer.y; var endY = centerY(); _animateMenu(); return; } else if (x >= volumeButton.x - volumeButton.width / 2 && x <= volumeButton.x + volumeButton.width / 2 && y >= volumeButton.y - volumeButton.height / 2 && y <= volumeButton.y + volumeButton.height / 2) { showVolume(); } else if (x >= creditsButton.x - creditsButton.width / 2 && x <= creditsButton.x + creditsButton.width / 2 && y >= creditsButton.y - creditsButton.height / 2 && y <= creditsButton.y + creditsButton.height / 2) { showCredits(); } else if (x >= recordsButton.x - recordsButton.width / 2 && x <= recordsButton.x + recordsButton.width / 2 && y >= recordsButton.y - recordsButton.height / 2 && y <= recordsButton.y + recordsButton.height / 2) { showRecords(); } return; } else if (gameOver) { if (!game.touchDisabled) { menuOpen = true; menuContainer.visible = true; resetGame(); } } else { if (gameWait) { // Oyun henüz başlamamış, ilk dokunuş anı: gameWait = false; gameStarted = true; // İlk tüpü veya ağacı burada üretin var initialTube = new Tube(); game.addChild(initialTube); lastSpawner = initialTube; // İlk dokunuşta karakterin zıplamasını sağla: character.jump(); } else { // Oyun zaten başlamış, normal zıplama character.jump(); character.rotation = 0.1; LK.setTimeout(function () { character.rotation = 0; }, 200); } } }; /**** * Game Loop ****/ game.update = function () { game.children.forEach(function (child) { if (child.update) { child.update(); } }); game.children.sort(function (a, b) { return (a.zIndex || 0) - (b.zIndex || 0); }); };
===================================================================
--- original.js
+++ change.js
@@ -212,12 +212,12 @@
var gameOverText = null;
var passCounter = 0;
var lastScore = 0; // Global lastScore variable
function centerX() {
- return 2048 / 2;
+ return game.width / 2;
}
function centerY() {
- return groundY / 2;
+ return game.height / 2;
}
tubeSpawnThreshold = centerX() + (screenRight - centerX()) / 2;
treeSpawnThreshold = centerX() + 3 * (screenRight - centerX()) / 4;
/****
@@ -594,18 +594,16 @@
}
LK.setTimeout(function () {
game.touchDisabled = false;
menuOpen = true;
+ menuContainer.y = centerY() - menuContainer.height / 2;
menuContainer.visible = true;
}, 2000);
LK.setTimeout(function () {
resetGame();
}, 2000);
}
function resetGame() {
- menuContainer.y = centerY(); // Reset menu position to center
- menuContainer.x = centerX(); // Ensure menu is horizontally centered as well
- menuContainer.x = centerX(); // Ensure menu is horizontally centered as well
if (gameOverText) {
game.removeChild(gameOverText);
gameOverText = null;
}
@@ -621,8 +619,10 @@
game.removeChild(character);
character = game.addChild(new Character());
character.x = centerX();
character.y = groundY / 2;
+ menuContainer.x = centerX();
+ menuContainer.y = centerY();
gameStarted = false;
gameOver = false;
lastSpawner = null;
passCounter = 0;