-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path25-roket-kontrol-panel.htm
133 lines (99 loc) · 4.41 KB
/
25-roket-kontrol-panel.htm
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
<!DOCTYPE html>
<html>
<head>
<title>Roket Kontrol Panel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.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()
boxKontrol.add(that)
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()
boxKontrol.add(that)
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()
boxKontrol.add(that)
that.title = "Roketin Açısı:"
that.minimal = 1
that.aline(boxKontrol.txtRoketY, "bottom", 30)
// Roket Uygula Butonu (Button)
boxKontrol.btnUygula = createButton()
boxKontrol.add(that)
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("images/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 content -->
</body>
</html>