|
Oyunumuza yardım sayfası ekleyelim. Oyuncu oyunu oynarken hangi tuşları kullanacak, puanlar nasıl hesaplanır, oyun kaç levelden oluşur, oyunu zamana karşı mı oynamak gerekir, gibi soruların cevaplarının olduğu bir pencere oluşturulmalıdır. Böylece oyuncunun oyun ile ilgili bilmediği konulara açıklık getirilmiş olur. Biz burada BootStrap 4 ile birlikte kullanılan Modal Popup penceresinden yararlanacağız.
Adım 1: Öncelikle aşağıdaki modal kod bloğunu body etiketinin en altına yazalım.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Yardım Penceresi</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<span id="icerik">fffff</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" id="kapat">Kapat</button>
</div>
</div>
</div>
</div>
Adım 2: Bu yardım sayfasını açmak için btnHelp isminde bir buton oluşturalım. Aşağıdaki satırları puan bilgisinin altına yazalım.
<button id="btnHelp" class="btn btn-secondary btn-md btn-block">
Yardım
</button>
Adım 3: Bu butona ait css özelliklerini belirleyelim.
#btnHelp {
margin-top: 25px;
margin-left: 5px;
}
Adım 4: Butonun click olayını $() metodu içinde en üst satıra yazalım.
$("#btnHelp").click(function () {
$("#myModal").modal("show");
});
Projeyi çalıştıralım. Yardım butonuna bastığımızda pencere ekrana gelecektir.
Adım 5: Şimdi yardım servisi penceresinde yer alan icerik etiketini dolduralım.
$("#btnHelp").click(function () {
var mesaj = "Oyunumuz 12 levelden oluşmaktadır. <br>";
mesaj += "Alınan her 2500 puan ile yeni levele geçilmektedir.<br>";
mesaj += "Her yeni levele geçişte süre azaltılmaktadır.<br>"
mesaj += "Seviye değiştikçe oyunun arkaplan resmi değişmektedir.<br>";
mesaj += "<p>Oyun klavyede yer alan yön tuşlarıyla oynanmaktadır.<br>";
mesaj += "Ayrıca sahnenin altında yer alan resimlere tıklayarak şekiller hareket ettirilir</p>";
$("#icerik").html(mesaj);
$("#myModal").modal("show");
});
Projemizi çalıştıralım. Yardım penceresini açalım. Burada yer alan bilgileri siz düzenleyebilirsiniz.
|