basicjs-turkce/25-roket-kontrol-panel.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
<!DOCTYPE html>
<html>
    <head>

        <title>Roket Kontrol Panel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- DIŞARIDAN YÜKLENEN KÜTÜPHANE DOSYALARI -->
        <link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
        <script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

        - Bir roketin, konum ve açı özelliklerinin; metin kutusuna girilen veriler ile değiştirilmesi.

        */

        // DEĞİŞKENLER

        // Roket resmi.
        var roket
        // Kontrol paneli kutusu.
        var boxKontrol

        // BAŞLANGIÇ FONKSİYONLARI

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

            page.color = "black"

            // Kontrol Paneli (Box)
            boxKontrol = createBox()
            that.right = 30
            that.bottom = 30
            that.width = 310
            that.height = 350
            that.border = 0
            that.round = 6
            that.color = "whitesmoke"
            // Paneli ve taşıdığı nesneleri %70 oranına küçült.
            that.element.style.zoom = 0.7


            // Roket X (TextBox)
            boxKontrol.txtRoketX = createTextBox()
            that.title = "Roketin Yatay Konumu:"
            that.minimal = 1
            that.top = 40
            that.left = 20

            // NOT: boxKontrol nesnesinde, txtRoketX isminde yeni bir eleman oluşturuyoruz.
            // Oluşturulan yeni nesne, otomatik olarak boxKontrol nesnesinin içine taşınıyor.
            // Bu, Box nesnesine eklenmiş bir özelliktir.
            // Sadece Label, TextBox, Button, Image, Box nesneleri otomatik taşınır.

            // Roket Y (TextBox)
            boxKontrol.txtRoketY = createTextBox()
            that.title = "Roketin Dikey Konumu:"
            that.minimal = 1
            // boxKontrol.txtRoketX metin kutusunun 30px altına hizala.
            that.aline(boxKontrol.txtRoketX, "bottom", 30)

            // Roket Yön (TextBox)
            boxKontrol.txtRoketYon = createTextBox()
            that.title = "Roketin Açısı:"
            that.minimal = 1
            that.aline(boxKontrol.txtRoketY, "bottom", 30)

            // Roket Uygula Butonu (Button)
            boxKontrol.btnUygula = createButton()
            that.text = "Değişiklikleri Uygula"
            that.color = "tomato"
            that.width = boxKontrol.txtRoketYon.width
            that.aline(boxKontrol.txtRoketYon, "bottom", 30)
            that.onClick(degisikligiUygula)

            // Roket (Image)
            roket = createImage()
            that.load("resimler/roket.png")
            that.width = 100
            that.height = 100
            that.top = 250
            that.left = 150
            that.rotate = 45

            // Not: roket nesnesi, diğer nesnelerin üzerinde görünmesi için
            // en son oluşturulmuştur. İlk oluşturulan nesne en altta kalır.

            // Roketin mevcut verilerini, metin kutularında göster.
            boxKontrol.txtRoketX.text = roket.left
            boxKontrol.txtRoketY.text = roket.top
            boxKontrol.txtRoketYon.text = roket.rotate

        }

        // DİĞER FONKSİYONLAR

        // Roketin konum ve açı bilgilerini güncelle.
        var degisikligiUygula = function() {

            // Yeni bilgileri, metin kutularından al.
            roket.left = num(boxKontrol.txtRoketX.text)
            roket.top = num(boxKontrol.txtRoketY.text)
            roket.rotate = num(boxKontrol.txtRoketYon.text)

        }

        /*

        GELİŞTİRME ÖNERİSİ (ZOR):

        - Roket, yeni konumuna yavaş yavaş gitsin. Açı değişikliği de yavaş yavaş olsun.
          (Hız: 1px / 20ms, Dönüş Hızı: 1deg / 20ms)

        */

        </script>

    </head>
    <body>

        <!-- HTML içeriği -->

    </body>
</html>