-
Notifications
You must be signed in to change notification settings - Fork 0
/
45-roketi-konuma-ulastir.htm
154 lines (109 loc) · 4.33 KB
/
45-roketi-konuma-ulastir.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
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">
<!-- 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>
/*
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("images/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 content -->
</body>
</html>