Genellikle oyun yüklenme, arayüz geçişlerinde gördüğümüz her sayfa yenilendiğinde değişen yazı kodunu sizlere en basit haliyle aktaracağız.
Makalede Neler Var?
Popüler birçok oyunda az sonra aktaracağımız kod yapısı ile olmasa da harita yüklenmesi, oyuna giriş, sayfa yüklenmesi gibi bölümlerinde karşınıza bilgi vermek, daha fazla detay aktarmak, beklenme süresinde ziyaretçileri sıkmamak ve aynı yapıdan, görünümden uzak tutmak için kullanılan bu özellik internette gereksiz zaman harcanılarak ancak elde edilebilmektedir. Birkaç javascript kodu ile de elde edebileceğiniz bu özellik için de vakit harcamak istemeyen webmaster dostlarımız da faydanalabilir.
Javascript nedir? Neredeyse tüm web tabanlı tarayıcıların desteklediği ve bu alanda kullanılan sayfaların dinamik yapısı için yüksek katkı sağlayan programlama, kodlama dilidir. HTML ve CSS kardeşliğine dinamik kazandıran Javascript, en çok bu ikili ile tercih edilmektedir.
Kodumuzu vermeden hafiften bahsetmek gerekirse HTML içi javascript kullanacağız. Bunu biraz açmak gerekirse harici javascript dosyasından çekmeden bileşenlerini direk html satır olarak yazacağız. Harici olarak çekimleme modelini de ilerleyen günlerde ek olarak düzenleyeceğiz.
Harici javascript dosyası nasıl kullanılır? Web dünyasının gelişmesiyle ve hız faktörünün değerinin artmasıyla header’den footer’a yolculuk yapan javascript dosya çekme komutu <script type=”text/javascript” src=”dosya-dizini”></script> ile “dosya-dizini” bölümünün harici javascript dosyasının dizininin girilmesiyle sayfaya etki edecek derecede kullanılabilir.
Sayfa Yenilendiğinde Değişen Yapı Oluşturma
Her Sayfa Yenilendiğinde Değişen Yazı
Her sayfaya girişte farklı bir yazının görüntülendiğinde, yazımızın başında bahsettiğimiz gibi yüklenme ekranlarının vazgeçilmezi bu özelliği HTML ve Javascript’e uyarladık.
Kodu ilgili yere, yazıların rastgele her sayfa yenilendiğinde değişen yazı şekilde gösterilmesini istediğiniz yere, ekleyiniz. Kodda karışık bir durum gördüğünüzde yorum kısmından veya iletişim alanlarımızdan ulaşabilirsiniz.
Her Sayfa Yenilendiğinde Değişen Resim
Önceki kodumuzdan değişik olarak yazı yerine resim göstereceğiz. Kodumuzda ‘ yapısından ” yapısına geçiş yapıp resim çektiğimiz dizini ise ‘ ile göstereceğiz. Buyrun ihtiyacınız olan kod yapısı;
<script language=”Javascript”> function degisenaosresim() { }; degisenaosresim = new degisenaosresim(); number = 0; // Değişecek yazılarımız degisenaosresim[number++] = “<img src=’https://ahmetonursolmaz.com.tr/wp-content/uploads/aoslmzlogomini2.png’></img>” degisenaosresim[number++] = “<img src=’https://ahmetonursolmaz.com.tr/wp-content/uploads/aoslmzlogomini2.png’></img>” degisenaosresim[number++] = “<img src=’https://ahmetonursolmaz.com.tr/wp-content/uploads/aoslmzlogomini2.png’></img>” increment = Math.floor(Math.random() * number); document.write(degisenaosresim[increment]); // © 2018 ahmetonursolmaz.com.tr – Tüm Hakları Saklıdır. </script>
Kodu kullanmak için resim dizinlerini kendi istediğiniz resimleri koyabilirsiniz. Yukarıdaki yazı kodu gibi aynı şekilde kullanmak istediğiniz yere, her sayfa yenilendiğinde değişen resim olmasını istediğin yere, koyabilirsiniz.
Yazımızda sizlere sayfanın yeniden yüklediğinde farklı bir sayfaymış gibi görünmesini sağlayabilecek bu özellikten bahsettik ve en basit kullanabileceğiniz yapısını gösterdik. Kodlar hakkında bir problem yaşadığınızda yorum alanından veya iletişim adreslerinden ulaşabilirsiniz.
Her sayfayı yenilendiğinde yenilenecek olan içerik sırayla çekilebilir mi. Ayrıca yenileme farklı Aypi adreslerinden olursa yine sıralama yapılabilir mi
Yani anlattığınız şey sanırım, birinci yenilemeden sonra ekrana gelecek içeriğin bilinerek gelmesi. Bu söylediğiniz yapılabilir ve kodumuzun increment = Math.floor(Math.random() * number); yeriyle orantılı bir seçenek.
Güzel bir konuya değinmişsiniz. Bunu C+’da denemiştim bahsettiğiniz gibi oyun ekranı geçişinde mantık aynı ama fonksiyon oldukça değişik.
Its like you read my mind! You appear to know so much about this,
like you wrote the book in it or something.
I think that you could do with some pics to drive the message home
a little bit, but other than that, this is fantastic blog.
A fantastic read. I’ll definitely be back.
teşekkür ederim,çok güzel bir konuya değinmişsin.
Çok mantıklı bir kodlama olmuş. Boşu boşuna pagination kullanmaktan kurdum.Çok güzel şeyler geldi aklıma. teşekkürler.
Çok açıklayıcı ve mantıklı anlatılmış çok teşekkür ederim.
Rica ederiz.