basicjs-turkce/05-xox-oyun.htm at main · bug7a/basicjs-turkce · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
    <head>

        <title>XOX Oyunu</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
        <script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

        ALGORİTMA:

        - Üç'e üç (3x3) bir alan üzerinde, boş karelere basarak; "x" veya "o" sembolu olarak işaretliyor.


        ÇALIŞMA MANTIĞI:

        - Her bir alan, bir resim nesnesidir.
        - Üzerine basılan nesne, kendine sıradaki sembolün resim dosyasını yüklüyor.


        OYUNUN OYNANIŞI:

        - Bir oyuncu "x", diğeri ise "o" sembolünü kullanır.
        - Sıra ile, boş karelerden birine kendi sembollerini koyarak devam ederler.
        - Kendi sembolünden üç tane yatay, dikey veya çapraz olarak
          yan yana ilk getiren oyuncu, bir puan kazanır.
        - Boş kareler dolana kadar, kimse başarılı olamaz ise berabere olur. Ve oyun yeniden başlatılır.


        PROJE ANLATIMI:

        Projenin, adım adım anlatım videosu.
        https://www.youtube.com/watch?v=DQBqankxnUM

        */

        // Sıranın kimde olduğunu saklayan değişken.
        var siraKimde = "x"

        // Not: resimDegistir() fonksiyonu, ilk çalıştığında "x" eklemesi için,
        // siraKimde değişkeni tanımlanırken, "x" değeri aktarılmıştır.

        // İlk çalıştırılan fonksiyon.
        var start = function() {

            page.color = "whitesmoke"

            // 3 x 3 tane resim nesnesini ekranda oluştur ve hizala.
            for (var y = 0; y <= 2; y++) {
                for (var x = 0; x <= 2; x++) {

                    // Bir resim nesnesi oluştur.
                    createImage()
                    that.load("resimler/xox-bos.svg")
                    that.width = 150
                    that.height = 150
                    // Döngü sayılarına göre nesneleri hizala.
                    that.left = 40 + (180 * x)
                    that.top = 40 + (180 * y)
                    // Nesneye taşıması için bir bilgi ekleyelim.
                    that.value = "bos"
                    // Üzerine basıldığında fonksiyonu çalıştır.
                    that.onClick(resimDegistir)

                    // Not: that, en son oluşturulan nesnenin taşındığı bir değişkendir.

                    // Not: Bu örnekte, 9 tane resim nesnesi oluşturulmuştur.
                    // Ve bu nesneler değişkenlere aktarılmamıştır.
                    // Sonradan ulaşabileceğimiz özel isimleri yoktur.

                }
            }

        }

        // Resimlerden birine basıldığında çalışan fonksiyon.
        var resimDegistir = function(basilanDugme) {

            // Not: Bir nesneye basıldığında,
            // nesnenin kendisi parametre olarak gönderilir.

            // Nesnenin, taşıdığı değer boş ise,
            // (Demek ki; bir sembol seçilmemiş ve resme basılabilir.)
            if (basilanDugme.value == "bos") {

                // Sıra "x" sembolünde ise,
                if (siraKimde == "x") {

                    // Basılan nesnenin özelliklerini düzenle.
                    // "x" sembolunun resmini yükle.
                    basilanDugme.load("resimler/xox-x.svg")
                    // Taşınan değeri "x" olarak düzenle.
                    basilanDugme.value = "x"
                    // Sıradaki sembolu "o" olarak düzenle.
                    siraKimde = "o"

                } else if (siraKimde == "o") {

                    // Veya sıra "o" sembolünde ise, aynı işlemleri onun için yap.

                    basilanDugme.load("resimler/xox-o.svg")
                    basilanDugme.value = "o"
                    siraKimde = "x"

                }

            }

        }

        /*

        GELİŞTİRME ÖNERİLERİ:

        - Oyun bittiğinde, yeniden başlatma düğmesi eklenebilir.
        - Skorları tutmak için, bir bölüm geliştirilebilir.
          Örneğin: Her kullanıcı için bir skor etiketi ve
          onları arttıran birer düğme.
        - (ZOR) Kazananı otomatik tespit edip, skorunu arttıran ve
          yeni oyun başlatan bir algoritma eklenebilir.
        - Başka ne geliştirme yapılabilir diye düşünüp, tasarlayın ve geliştirmeye çalışın.


        İNGİLİZCE - TÜRKÇE SÖZLÜK:

        Anlamını bilmediğiniz ingilizce kelimeler için,
        https://translate.google.com/ internet sitesini kullanabilirsiniz.

        */

        </script>

    </head>
    <body></body>
</html>