Jquery ile Mayın Tarlası Oyunu (1. Bölüm) - Mine Sweeper Game with Jquery (Section 1)

Bu yazıda mayın tarlası oyununu genel hatlarıyla oluşturacağız. Bu yazı sonunda mayın tarlası oyunu ekranı oluşturulmuş, mayınlar rastgele dağıtılmış ve tuşlara gerekli olay yakalayıcıları yerleştirilmiş olacaktır. İlk aşamada oyunun yerleşeceği canvas ögesini tanımlayalım:

<div class="MineGameCanvas"></div>

Ekranı oluşturmak için bazı CSS kodları tanımlamamız gerekecektir:

<style>

        .MineGameCanvas {

            width:500px;
            height:500px;
        }

        .MineButton {

            float:left;
            width:25px;
            height:25px;
        }

        .MineButtonT {

            float:left;
            width:25px;
            height:25px;
            background-color:red;
        }

</style>

Burada "MineGameCanvas" sınıfı mayın tarlası oyununun yerleşeceği pencereyi tanımlamakta, "MineButton" sınıfı üzerinde mayın tanımlanmamış tuşu, "MineButtonT" ise üzerinde mayın tanımlanmış tuşu ifade etmektedir. Burada dikkat edilmesi gereken unsur "float:left" belirtimidir. Float ile tuşların canvas içine düzgün yerleştirilmesi sağlanmaktadır. Bir sonraki aşama olarak gerekli javascript kodlarını tanımlayalım:

<script type="text/javascript">

        var mineCount = 50;
        var arr = [];
        var width = 20;
        var height = 20;
        var possibility = mineCount / (width * height);

        function ButtonPressed(sender) {

            var btNumx = $(sender).attr("btNumx");
            var btNumy = $(sender).attr("btNumy");

            alert("Pressed to " + btNumx + "," + btNumy );

            if (arr[btNumx][btNumy] == 1)
                alert('Boom');

        }

        $(document).ready(function () {

            arr = CreateArray(width, height, 0);

            PlantMines();

            GenerateMineField();
        });

        function GenerateMineField() {

            var canvas = $(".MineGameCanvas");

            for (var x = 0; x < width; x++) {

                for (var y = 0; y < height; y++) {

                    if (arr[x][y] == 0) {
                        var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButton" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');

                        canvas.append(button);
                    } else {

                        var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButtonT" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');

                        canvas.append(button);
                    }

                }
            }
        }

        function CreateArray(witdh, height, defaultValue) {

            var arr = [];
            for (var x = 0; x < width; x++) {
                arr[x] = [];
                for (var y = 0; y < height; y++) {
                    arr[x][y] = defaultValue;
                }
            }

            return arr;
        }

        function PlantMines() {

            for (var x = 0; x < width; x++) {
                for (var y = 0; y < height; y++) {

                    if (arr[x][y] != 1) {

                        var deger = Math.random();

                        if (deger <= possibility) {
                            arr[x][y] = 1;
                            mineCount--;

                            if (mineCount == 0)
                                return;
                        }
                        else {
                            arr[x][y] = 0;
                        }
                    }
                }
            }

            if (mineCount > 0)
                PlantMines();
        }

</script>

Yukarıdaki javascript komutlarında yer alan bazı kod parçalarının ve fonksiyonların yaptığı işler şöyledir:

* Bir Jquery fonksiyonu olan ready ile döküman elementlerinin DOM'a yerleştirilmesi tamamlandıktan sonra oyun için gerekli işlemlerin yapılamasını sağlayan fonksiyonlar kullanılmaktadır.

* CreateArray fonksiyonu ile 2 boyutlu bir dizi oluşturulmaktadır. Oluşturacağımız dizi mayın lokasyonlarını içermektedir.

* ButtonPressed fonksiyonu bir tuşa basıldığında yapılması gereken kodları içermektedir.

* GenerateMineField fonksiyonu ile mayın tarlası için gerekli tuşlar dinamik olarak oluşturulmaktadır.

* PlantMines fonksiyonu ile mayınlar rastgele olarak oluşturulmakta ve dizi içine yerleştirilmektedir.

PlantMines fonksiyonu rastgele mayınları oluşturken Math.random fonksiyonunu kullanmaktadır. Mayın bulunma ihtimali her tuş için eşit olduğu için şöyle hesaplanmaktadır:

var possibility = mineCount / (width * height);

Burada toplam mayın sayısı toplam tuş sayısına bölünerek ihtimal eşit olarak dağıtılmış olmaktadır.

PlantMines fonksiyonu eğer tüm mayınları yerleştiremezse recursive olarak kendini tekrar çağırarak tüm mayınların yerleştirilmesini sağlamaktadır.

Tuşlar dinamik olarak Jquery ile aşağıdaki gibi oluşturulmaktadır:

var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButton" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');

Burada görüldüğü üzere Jquery fonksiyonu içinde direk olarak HTML olarak tanımlanan kod kullanılarak HTML elementleri dinamik olarak oluşturulup DOM içine yerleştirilebilmektedir.

Bir diğer önemli unsur ise "custom attribute" kullanımıdır. Jquery "attr" fonksiyonu ile bir DOM nesnesinin attribute değerleri alınabilmektedir.

Yukarıdaki kodların çalıştırılması sonucu elde edilen sonuç aşağıdadır: