basicjs-turkce/45-roketi-konuma-ulastir.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
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
    <head>

        <title>Roketi Konuma Ulaştır</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>

        /*

            NESNENİN BASİT HAREKETİ

            Bir cismin, hareket etmesinin temel mantığı,
            konumunun belli aralıklar ile değiştirilmesidir.

            BU ÖRNEKTE:
            Bir resim nesnesini (rocket) ve koordinat sistemini kullanarak;
            belli zaman aralığında çalışan bir fonksiyon (loop) yardımı ile;
            resmin, istenilen konuma hareket etmesini sağlıyoruz.

            EK BİLGİ:
            Gelişmiş algoritmalar, bu hareketleri;
            çok daha estetik, akıcı ve kolay kod arayüzü ile yapabilirler.

            Bu örnek ile, öğretilmek istenen;
            temel ve en basit mantığın kavranmasını sağlamaktır.

        */

        // DEĞİŞKENLER

        var rocket

        var newX = 50
        var newY = 50

        var lblFinish
        var lblInfo

        // ÖZEL FONKSİYONLAR

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

            page.color = "#141414"

            // NESNE: Fare tıklandığında, konumu işaretleyen X
            lblFinish = createLabel(0, 0, 30, 30)
            that.text = "x"
            that.color = "transparent"
            that.textColor = "orangeRed"
            that.textAlign = "center"
            that.round = 15
            that.opacity = 0.4
            that.visible = 0

            // NESNE: Ekranın ortasındaki bilgi yazısı.
            lblInfo = createLabel(0, 0, 200, 20)
            that.text = "Başlamak için hedef seçin."
            that.textColor = "orangered"
            that.fontSize = 14
            that.opacity = 0.8
            that.textAlign = "center"
            // Ekranın ortasına hizala.
            that.center()

            // NESNE: rocket resmi
            rocket = createImage(newX, newY, 50, 50)
            that.load("resimler/roket.png")
            // that.rotate = 0

            // Fare basılı iken çalıştır.
            window.addEventListener('mousedown', mouseDown);

            // loop() fonksiyonunu 5ms aralık ile çalıştır.
            setLoopTimer(8)

        }

        var loop = function() {

            // Önce yatay hareketi tamamla.
            if (rocket.left > newX) {
                // Sola hareket et.
                rocket.left -= 1
                rocket.rotate = 270

            } else if (rocket.left < newX) {
                // Sağa hareket et.
                rocket.left += 1
                rocket.rotate = 90

            } else {

                // Sonra dikey harekete devam et.
                if (rocket.top > newY) {
                    // Yukarı hareket et.
                    rocket.top -= 1
                    rocket.rotate = 0

                } else if (rocket.top < newY) {
                    // Aşağı hareket et.
                    rocket.top += 1
                    rocket.rotate = 180

                } else {
                    // Hedefe ulaşıldı, hedefi görünmez yap.
                    lblFinish.visible = 0
                }

            }

        }


        // DİĞER FONKSİYONLAR

        var mouseDown = function(event) {

            // Uyarıyı gizle.
            lblInfo.visible = 0

            // Farenin konumunu, yeni konum olarak sakla.
            newX = event.offsetX;
            newY = event.offsetY;

            // Hedefi göster.
            lblFinish.visible = 1
            // Hedef nesnesinin boyutları 30x30
            lblFinish.left = newX - 15
            lblFinish.top = newY - 15

            // rocketin merkezini hesapla.
            newX = newX - (rocket.width / 2)
            newY = newY - (rocket.height / 2)

        }

        </script>

    </head>
    <body>

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

    </body>
</html>