Hugging Face's logo

Spaces:
Mrttbn
/
mario
Running

App Files Community
Mrttbn commited on
Commit
d8a3e84
·
verified ·
1 Parent(s): 11246d6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +286 -285
index.html CHANGED
@@ -2,208 +2,196 @@
2
  <html lang="tr">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Turkuaz Kış Macerası (Mobil Destekli)</title>
 
6
  <style>
7
  body {
8
  margin: 0;
9
  padding: 0;
10
  background-color: #202020;
 
 
11
  display: flex;
12
  justify-content: center;
13
  align-items: center;
14
- height: 100vh;
15
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
- overflow: hidden;
17
  }
18
 
19
- /* Oyun Çerçevesi */
 
 
20
  #game-container {
21
  position: relative;
22
  width: 800px;
23
  height: 500px;
24
- background: linear-gradient(to bottom, #87CEEB, #E0F7FA); /* Kış gökyüzü */
25
  border: 5px solid #fff;
26
  border-radius: 10px;
27
  overflow: hidden;
28
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
 
29
  }
30
 
31
- /* Oyuncu (Turkuaz Kahraman - İnsansı Görünüm) */
32
  #player {
33
  position: absolute;
34
  width: 40px;
35
- height: 60px; /* Boyu uzattık */
36
- background-color: transparent; /* Ana arka planı şeffaf */
37
  z-index: 10;
38
- transition: transform 0.1s;
39
  display: flex;
40
  flex-direction: column;
41
  align-items: center;
42
- justify-content: flex-end; /* Ayakları zemine oturtmak için */
43
  }
44
 
45
  #player .head {
46
- width: 25px;
47
- height: 25px;
48
- background-color: #40E0D0; /* Turkuaz */
49
  border: 2px solid #008B8B;
50
- border-radius: 50%; /* Yuvarlak baş */
51
- position: absolute;
52
- top: 0;
53
- z-index: 1;
54
  }
55
 
56
  #player .body {
57
- width: 35px;
58
- height: 35px;
59
- background-color: #40E0D0; /* Turkuaz */
60
  border: 2px solid #008B8B;
61
  border-radius: 5px;
62
- position: absolute;
63
- bottom: 0;
64
- z-index: 0;
65
  }
66
 
67
- /* Gözler (Yönü belli olsun diye) */
68
  #player .eye {
69
  position: absolute;
70
- width: 6px;
71
- height: 6px;
72
  background: black;
73
  border-radius: 50%;
74
- top: 8px; /* Başa göre ayarlandı */
75
- right: 8px; /* Sağa bakıyor varsayılan */
76
- z-index: 2;
77
  }
78
-
79
- /* Platformlar (Karlar) */
80
  .platform {
81
  position: absolute;
82
  background-color: #fff;
83
- border-top: 4px solid #aeeeee; /* Buzlu üst yüzey */
84
  border-radius: 5px;
85
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
86
  }
87
 
88
- /* Bitiş Noktası */
89
  #goal {
90
  position: absolute;
91
- width: 40px;
92
- height: 60px;
93
  background-color: #FFD700;
94
- border: 2px solid #DAA520;
95
- border-radius: 5px 5px 0 0;
96
  z-index: 5;
97
  display: flex;
98
  justify-content: center;
99
  align-items: center;
100
  font-weight: bold;
101
  color: #d35400;
 
 
102
  }
103
 
104
- /* Kar Efekti */
105
- .snowflake {
106
- position: absolute;
107
- color: white;
108
- font-size: 1em;
109
- opacity: 0.8;
110
- pointer-events: none;
111
- animation: fall linear infinite;
112
- }
113
-
114
- @keyframes fall {
115
- 0% { transform: translateY(-10px); }
116
- 100% { transform: translateY(510px); }
117
- }
118
-
119
- /* UI Yazıları */
120
  #ui-layer {
121
  position: absolute;
122
  top: 10px;
123
  left: 10px;
124
- font-size: 18px;
125
  color: #005f6b;
126
  font-weight: bold;
127
  z-index: 20;
 
 
 
128
  }
129
 
130
- #message {
131
  position: absolute;
132
- top: 50%;
133
- left: 50%;
134
- transform: translate(-50%, -50%);
 
 
 
 
 
 
 
 
 
135
  font-size: 40px;
136
  font-weight: bold;
137
- color: #2E8B57;
138
- text-shadow: 2px 2px white;
139
- display: none;
140
- z-index: 30;
 
 
 
 
 
 
 
 
 
141
  }
142
 
143
- /* Mobil Kontroller */
144
  #controls {
145
  position: absolute;
146
- bottom: 10px;
147
- left: 10px;
148
- right: 10px;
149
  display: flex;
150
  justify-content: space-between;
151
- z-index: 40;
152
- pointer-events: none; /* Tuşların arkasındaki oyunu etkilemesini engelle */
153
  }
154
 
155
- .control-button {
156
- width: 80px;
157
- height: 80px;
158
- background-color: rgba(0, 0, 0, 0.5);
159
- color: white;
160
- font-size: 2em;
161
  display: flex;
162
  justify-content: center;
163
  align-items: center;
164
- border-radius: 50%;
165
- cursor: pointer;
166
- user-select: none; /* Metin seçmeyi engelle */
167
- pointer-events: auto; /* Tuşların tıklanabilir olmasını sağla */
168
- box-shadow: 0 0 10px rgba(0,0,0,0.7);
169
- transition: background-color 0.1s;
170
- }
171
-
172
- .control-button:active {
173
- background-color: rgba(0, 0, 0, 0.7);
174
  }
175
 
176
- #jump-button {
177
- margin-left: auto; /* Sağ tarafa yasla */
178
- margin-right: 20px;
179
  }
180
 
181
- #left-button, #right-button {
182
- margin-left: 20px;
 
 
 
 
183
  }
184
 
185
- /* Küçük ekranlarda tuşları küçült */
186
- @media (max-width: 820px) {
187
- #game-container {
188
- width: 95vw;
189
- height: 60vh;
190
- }
191
- #controls {
192
- bottom: 5px;
193
- left: 5px;
194
- right: 5px;
195
- }
196
- .control-button {
197
- width: 60px;
198
- height: 60px;
199
- font-size: 1.5em;
200
- }
201
- #jump-button {
202
- margin-right: 10px;
203
- }
204
- #left-button, #right-button {
205
- margin-left: 10px;
206
- }
207
  }
208
 
209
  </style>
@@ -211,234 +199,247 @@
211
  <body>
212
 
213
  <div id="game-container">
214
- <div id="ui-layer">Kontroller: Yön Tuşları/WASD (Klavye) veya Ekran Tuşları</div>
 
215
  <div id="player">
216
- <div class="head">
217
- <div class="eye"></div>
218
- </div>
219
  <div class="body"></div>
220
  </div>
221
- <div id="goal">FIN</div>
222
- <div id="message">KAZANDIN!</div>
 
 
 
 
 
223
 
224
  <div id="controls">
225
- <div>
226
- <div id="left-button" class="control-button">⬅️</div>
227
- <div id="right-button" class="control-button">➡️</div>
228
  </div>
229
- <div id="jump-button" class="control-button">⬆️</div>
230
  </div>
231
  </div>
232
 
233
  <script>
234
- // --- OYUN AYARLARI ---
235
- const gameContainer = document.getElementById('game-container');
236
  const player = document.getElementById('player');
237
- const playerHead = player.querySelector('.head');
238
- const playerEye = player.querySelector('.eye'); // Göz referansı
239
  const goal = document.getElementById('goal');
240
- const message = document.getElementById('message');
241
-
242
- // Mobil Tuşlar
243
- const leftButton = document.getElementById('left-button');
244
- const rightButton = document.getElementById('right-button');
245
- const jumpButton = document.getElementById('jump-button');
246
-
247
- // Fizik Değişkenleri
248
- let playerWidth = 40; // Oyuncunun genişliği
249
- let playerHeight = 60; // Oyuncunun yüksekliği (yeni insansı şekle göre)
250
- let playerX = 50;
251
- let playerY = 300;
252
- let velocityX = 0;
253
- let velocityY = 0;
 
 
254
  const speed = 5;
255
- const friction = 0.8;
256
- const gravity = 0.8;
257
- const jumpStrength = 12;
 
258
  let isGrounded = false;
 
259
 
260
- // Harita (x, y, genişlik, yükseklik)
261
- // 0,0 sol üst köşedir. Y arttıkça aşağı iner.
262
- const platformsData = [
263
- {x: 0, y: 450, w: 800, h: 50}, // Zemin
264
- {x: 200, y: 350, w: 100, h: 20}, // Platform 1
265
- {x: 350, y: 250, w: 120, h: 20}, // Platform 2
266
- {x: 550, y: 180, w: 80, h: 20}, // Platform 3
267
- {x: 100, y: 150, w: 80, h: 20}, // Sol üst bonus
268
- {x: 700, y: 100, w: 100, h: 20} // Hedef platformu
 
 
269
  ];
270
 
271
- const goalPos = {x: 730, y: 40}; // Hedef konumu
272
-
273
- // Tuş Durumları
274
- const keys = {
275
- right: false,
276
- left: false,
277
- up: false
278
- };
279
 
280
- // --- BAŞLANGIÇ KURULUMU ---
281
  function init() {
282
- // Platformları oluştur
283
- platformsData.forEach(p => {
284
- const platDiv = document.createElement('div');
285
- platDiv.classList.add('platform');
286
- platDiv.style.left = p.x + 'px';
287
- platDiv.style.top = p.y + 'px';
288
- platDiv.style.width = p.w + 'px';
289
- platDiv.style.height = p.h + 'px';
290
- gameContainer.appendChild(platDiv);
291
  });
292
 
293
- // Hedefi yerleştir
294
  goal.style.left = goalPos.x + 'px';
295
  goal.style.top = goalPos.y + 'px';
296
 
297
- // Kar yağışını başlat
298
- setInterval(createSnowflake, 200);
 
 
 
 
299
 
300
- // Oyun döngüsünü başlat
301
- requestAnimationFrame(gameLoop);
302
  }
303
 
304
- // --- KONTROLLER (KLAVYE) ---
305
- document.addEventListener('keydown', (e) => {
306
- if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') keys.right = true;
307
- if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keys.left = true;
308
- if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W' || e.key === ' ') {
309
- if (isGrounded) {
310
- velocityY = -jumpStrength;
311
- isGrounded = false;
312
- }
313
- }
314
- });
315
-
316
- document.addEventListener('keyup', (e) => {
317
- if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') keys.right = false;
318
- if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keys.left = false;
319
- });
320
-
321
- // --- KONTROLLER (MOBİL TUŞLAR) ---
322
- leftButton.addEventListener('touchstart', () => keys.left = true);
323
- leftButton.addEventListener('touchend', () => keys.left = false);
324
- rightButton.addEventListener('touchstart', () => keys.right = true);
325
- rightButton.addEventListener('touchend', () => keys.right = false);
326
- jumpButton.addEventListener('touchstart', () => {
327
- if (isGrounded) {
328
- velocityY = -jumpStrength;
329
- isGrounded = false;
330
- }
331
- });
332
-
333
  // --- OYUN DÖNGÜSÜ ---
334
- function gameLoop() {
335
- // Yatay Hareket
 
 
336
  if (keys.right) {
337
- velocityX = speed;
338
- player.style.transform = 'scaleX(1)'; // Sağa bak
339
- playerEye.style.right = '8px'; // Gözü sağa çevir
340
- playerEye.style.left = 'auto';
341
  } else if (keys.left) {
342
- velocityX = -speed;
343
- player.style.transform = 'scaleX(-1)'; // Sola bak
344
- playerEye.style.left = '8px'; // Gözü sola çevir
345
- playerEye.style.right = 'auto';
346
  } else {
347
- velocityX *= friction; // Sürtünme
 
 
 
 
 
 
 
348
  }
349
 
350
- // Dikey Hareket (Yerçekimi)
351
- velocityY += gravity;
352
 
353
- // Pozisyonları Güncelle
354
- playerX += velocityX;
355
- playerY += velocityY;
356
 
357
- // Sınır Kontrolü (Ekran dışına çıkmasın)
358
- if (playerX < 0) playerX = 0;
359
- if (playerX > gameContainer.offsetWidth - playerWidth) playerX = gameContainer.offsetWidth - playerWidth;
360
 
361
- // --- ÇARPIŞMA KONTROLLERİ ---
362
  isGrounded = false;
363
-
364
- // Platform Çarpışmaları
365
- platformsData.forEach(p => {
366
- if (playerX < p.x + p.w &&
367
- playerX + playerWidth > p.x &&
368
- playerY < p.y + p.h &&
369
- playerY + playerHeight > p.y) {
370
 
371
- // Oyuncunun ayağının platformun üstüne gelip gelmediğini kontrol et
372
- if (velocityY >= 0 && playerY + playerHeight - velocityY <= p.y) {
373
- playerY = p.y - playerHeight;
374
- velocityY = 0;
375
- isGrounded = true;
376
- }
377
- // Platformun altından çarpma durumu (zıplarken)
378
- else if (velocityY < 0 && playerY >= p.y + p.h - velocityY) {
379
- playerY = p.y + p.h;
380
- velocityY = 0; // Kafa çarptığında düşmeye başla
381
  }
382
  }
383
  });
384
 
385
- // Düşerse oyunu sıfırla (Reset)
386
- if (playerY > gameContainer.offsetHeight) {
387
- playerX = 50;
388
- playerY = 300;
389
- velocityY = 0;
390
- message.textContent = "Düştün! Tekrar Dene.";
391
- message.style.color = "#E74C3C";
392
- message.style.display = 'block';
393
- setTimeout(() => {
394
- message.style.display = 'none';
395
- }, 1500);
396
  }
397
 
398
- // --- HEDEF KONTROLÜ ---
399
- if (playerX < goalPos.x + goal.offsetWidth &&
400
- playerX + playerWidth > goalPos.x &&
401
- playerY < goalPos.y + goal.offsetHeight &&
402
- playerY + playerHeight > goalPos.y) {
403
-
404
- message.textContent = "KAZANDIN!";
405
- message.style.color = "#2E8B57";
406
- message.style.display = 'block';
407
- setTimeout(() => {
408
- message.style.display = 'none';
409
- playerX = 50; // Başlangıç pozisyonuna dön
410
- playerY = 300;
411
- }, 2000);
412
  }
413
 
414
- // DOM Güncelleme
415
- player.style.left = playerX + 'px';
416
- player.style.top = playerY + 'px';
 
 
 
 
 
 
 
 
 
 
417
 
418
- requestAnimationFrame(gameLoop);
 
 
 
 
 
 
 
419
  }
420
 
421
- // --- KAR EFEKTİ ---
422
- function createSnowflake() {
423
- const snow = document.createElement('div');
424
- snow.classList.add('snowflake');
425
- snow.innerHTML = '❄';
426
- snow.style.left = Math.random() * gameContainer.offsetWidth + 'px';
427
- snow.style.animationDuration = Math.random() * 3 + 2 + 's'; // 2-5 saniye arası düşüş
428
- snow.style.fontSize = Math.random() * 10 + 10 + 'px';
429
 
430
- gameContainer.appendChild(snow);
 
431
 
432
- // Bellek şişmesin diye kar tanesi bitince sil
433
- setTimeout(() => {
434
- snow.remove();
435
- }, 5000);
 
 
 
 
 
436
  }
437
 
438
- // Başlat
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
439
  init();
440
 
441
  </script>
442
-
443
  </body>
444
  </html>
 
2
  <html lang="tr">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>Turkuaz Kış Macerası</title>
7
  <style>
8
  body {
9
  margin: 0;
10
  padding: 0;
11
  background-color: #202020;
12
+ height: 100vh;
13
+ width: 100vw;
14
  display: flex;
15
  justify-content: center;
16
  align-items: center;
17
+ font-family: 'Segoe UI', sans-serif;
18
+ overflow: hidden; /* Kaydırmayı engelle */
19
+ touch-action: none; /* Mobilde dokunmatik gecikmesini önle */
20
  }
21
 
22
+ /* Oyun Alanı Çerçevesi */
23
+ /* Oyun içi koordinatlar bozulmasın diye sabit 800x500 tutuyoruz */
24
+ /* JS ile ekrana sığacak şekilde scale (ölçekleme) yapacağız */
25
  #game-container {
26
  position: relative;
27
  width: 800px;
28
  height: 500px;
29
+ background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
30
  border: 5px solid #fff;
31
  border-radius: 10px;
32
  overflow: hidden;
33
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
34
+ transform-origin: center center; /* Ortadan küçülsün */
35
  }
36
 
37
+ /* --- KARAKTER --- */
38
  #player {
39
  position: absolute;
40
  width: 40px;
41
+ height: 60px;
 
42
  z-index: 10;
 
43
  display: flex;
44
  flex-direction: column;
45
  align-items: center;
46
+ justify-content: flex-end;
47
  }
48
 
49
  #player .head {
50
+ width: 24px;
51
+ height: 24px;
52
+ background-color: #40E0D0;
53
  border: 2px solid #008B8B;
54
+ border-radius: 50%;
55
+ position: relative;
56
+ z-index: 2;
 
57
  }
58
 
59
  #player .body {
60
+ width: 30px;
61
+ height: 34px;
62
+ background-color: #40E0D0;
63
  border: 2px solid #008B8B;
64
  border-radius: 5px;
65
+ margin-top: -2px; /* Kafa ile birleşsin */
66
+ z-index: 1;
 
67
  }
68
 
 
69
  #player .eye {
70
  position: absolute;
71
+ width: 5px;
72
+ height: 5px;
73
  background: black;
74
  border-radius: 50%;
75
+ top: 8px;
76
+ right: 5px;
 
77
  }
78
+
79
+ /* --- PLATFORMLAR --- */
80
  .platform {
81
  position: absolute;
82
  background-color: #fff;
83
+ border-top: 5px solid #aeeeee;
84
  border-radius: 5px;
85
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
86
  }
87
 
88
+ /* --- HEDEF --- */
89
  #goal {
90
  position: absolute;
91
+ width: 50px;
92
+ height: 70px;
93
  background-color: #FFD700;
94
+ border: 3px solid #DAA520;
95
+ border-radius: 10px 10px 0 0;
96
  z-index: 5;
97
  display: flex;
98
  justify-content: center;
99
  align-items: center;
100
  font-weight: bold;
101
  color: #d35400;
102
+ font-size: 14px;
103
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
104
  }
105
 
106
+ /* --- ARAYÜZ --- */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  #ui-layer {
108
  position: absolute;
109
  top: 10px;
110
  left: 10px;
111
+ font-size: 16px;
112
  color: #005f6b;
113
  font-weight: bold;
114
  z-index: 20;
115
+ background: rgba(255,255,255,0.5);
116
+ padding: 5px 10px;
117
+ border-radius: 10px;
118
  }
119
 
120
+ #message-overlay {
121
  position: absolute;
122
+ top: 0; left: 0; right: 0; bottom: 0;
123
+ background: rgba(0,0,0,0.7);
124
+ display: flex;
125
+ justify-content: center;
126
+ align-items: center;
127
+ flex-direction: column;
128
+ z-index: 100;
129
+ display: none; /* Başlangıçta gizli */
130
+ }
131
+
132
+ #message-text {
133
+ color: white;
134
  font-size: 40px;
135
  font-weight: bold;
136
+ margin-bottom: 20px;
137
+ text-align: center;
138
+ }
139
+
140
+ #restart-btn {
141
+ padding: 10px 20px;
142
+ font-size: 20px;
143
+ background: #40E0D0;
144
+ border: none;
145
+ border-radius: 5px;
146
+ cursor: pointer;
147
+ font-weight: bold;
148
+ color: #005f6b;
149
  }
150
 
151
+ /* --- MOBİL KONTROLLER --- */
152
  #controls {
153
  position: absolute;
154
+ bottom: 20px;
155
+ left: 20px;
156
+ right: 20px;
157
  display: flex;
158
  justify-content: space-between;
159
+ z-index: 50;
160
+ pointer-events: none; /* Arkadaki oyunu engelleme */
161
  }
162
 
163
+ .btn {
164
+ width: 70px;
165
+ height: 70px;
166
+ background: rgba(255, 255, 255, 0.3);
167
+ border: 2px solid rgba(255, 255, 255, 0.6);
168
+ border-radius: 50%;
169
  display: flex;
170
  justify-content: center;
171
  align-items: center;
172
+ font-size: 30px;
173
+ color: white;
174
+ pointer-events: auto; /* Sadece butona basılsın */
175
+ user-select: none;
176
+ backdrop-filter: blur(2px);
177
+ transition: background 0.1s;
 
 
 
 
178
  }
179
 
180
+ .btn:active {
181
+ background: rgba(255, 255, 255, 0.6);
182
+ transform: scale(0.95);
183
  }
184
 
185
+ /* Kar Tanesi */
186
+ .snowflake {
187
+ position: absolute;
188
+ color: white;
189
+ pointer-events: none;
190
+ animation: fall linear forwards;
191
  }
192
 
193
+ @keyframes fall {
194
+ to { transform: translateY(550px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
  }
196
 
197
  </style>
 
199
  <body>
200
 
201
  <div id="game-container">
202
+ <div id="ui-layer">Yön Tuşları veya Ekran Butonları</div>
203
+
204
  <div id="player">
205
+ <div class="head"><div class="eye"></div></div>
 
 
206
  <div class="body"></div>
207
  </div>
208
+
209
+ <div id="goal">FINISH</div>
210
+
211
+ <div id="message-overlay">
212
+ <div id="message-text">KAZANDIN!</div>
213
+ <button id="restart-btn" onclick="resetGame()">Tekrar Oyna</button>
214
+ </div>
215
 
216
  <div id="controls">
217
+ <div style="display: flex; gap: 15px;">
218
+ <div id="btn-left" class="btn">⬅️</div>
219
+ <div id="btn-right" class="btn">➡️</div>
220
  </div>
221
+ <div id="btn-jump" class="btn">⬆️</div>
222
  </div>
223
  </div>
224
 
225
  <script>
226
+ // --- DEĞİŞKENLER ---
227
+ const container = document.getElementById('game-container');
228
  const player = document.getElementById('player');
229
+ const playerEye = document.querySelector('.eye');
 
230
  const goal = document.getElementById('goal');
231
+ const msgOverlay = document.getElementById('message-overlay');
232
+ const msgText = document.getElementById('message-text');
233
+
234
+ // Mobil Butonlar
235
+ const btnLeft = document.getElementById('btn-left');
236
+ const btnRight = document.getElementById('btn-right');
237
+ const btnJump = document.getElementById('btn-jump');
238
+
239
+ // Oyun Değerleri
240
+ let pX = 50; // Oyuncu X
241
+ let pY = 300; // Oyuncu Y (Başlangıçta havada başlatıyoruz ki düşerek insin)
242
+ let vX = 0; // Hız X
243
+ let vY = 0; // Hız Y
244
+ const pW = 40; // Genişlik
245
+ const pH = 60; // Yükseklik
246
+
247
  const speed = 5;
248
+ const jump = 13;
249
+ const grav = 0.6;
250
+ const fric = 0.8;
251
+
252
  let isGrounded = false;
253
+ let gameRunning = true;
254
 
255
+ // Tuş Durumları
256
+ const keys = { left: false, right: false, jump: false };
257
+
258
+ // --- HARİTA ---
259
+ // Zemin (Ground) en alttaki büyük platformdur (y: 450)
260
+ const platforms = [
261
+ {x: 0, y: 450, w: 800, h: 50}, // Zemin
262
+ {x: 250, y: 350, w: 120, h: 20}, // Basamak 1
263
+ {x: 450, y: 260, w: 100, h: 20}, // Basamak 2
264
+ {x: 600, y: 170, w: 150, h: 20}, // Basamak 3 (Hedef Altı)
265
+ {x: 50, y: 200, w: 100, h: 20}, // Sol ekstra basamak
266
  ];
267
 
268
+ const goalPos = { x: 650, y: 100 }; // Hedefin konumu
 
 
 
 
 
 
 
269
 
270
+ // --- BAŞLATMA ---
271
  function init() {
272
+ // Platformları Çiz
273
+ platforms.forEach(p => {
274
+ let div = document.createElement('div');
275
+ div.className = 'platform';
276
+ div.style.left = p.x + 'px';
277
+ div.style.top = p.y + 'px';
278
+ div.style.width = p.w + 'px';
279
+ div.style.height = p.h + 'px';
280
+ container.appendChild(div);
281
  });
282
 
283
+ // Hedefi Yerleştir
284
  goal.style.left = goalPos.x + 'px';
285
  goal.style.top = goalPos.y + 'px';
286
 
287
+ // Kar Yağışı
288
+ setInterval(spawnSnow, 300);
289
+
290
+ // Ekran Boyutlandırma
291
+ resizeGame();
292
+ window.addEventListener('resize', resizeGame);
293
 
294
+ // Döngü
295
+ requestAnimationFrame(loop);
296
  }
297
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  // --- OYUN DÖNGÜSÜ ---
299
+ function loop() {
300
+ if (!gameRunning) return;
301
+
302
+ // --- Hareket Mantığı ---
303
  if (keys.right) {
304
+ vX = speed;
305
+ playerEye.style.right = '5px'; playerEye.style.left = 'auto';
 
 
306
  } else if (keys.left) {
307
+ vX = -speed;
308
+ playerEye.style.left = '5px'; playerEye.style.right = 'auto';
 
 
309
  } else {
310
+ vX *= fric;
311
+ }
312
+
313
+ // Zıplama
314
+ if (keys.jump && isGrounded) {
315
+ vY = -jump;
316
+ isGrounded = false;
317
+ keys.jump = false; // Basılı tutmayı engellemek için (isteğe bağlı)
318
  }
319
 
320
+ vY += grav; // Yerçekimi
 
321
 
322
+ pX += vX;
323
+ pY += vY;
 
324
 
325
+ // Ekran Sınırları
326
+ if (pX < 0) { pX = 0; vX = 0; }
327
+ if (pX > 760) { pX = 760; vX = 0; } // 800 - 40(genişlik)
328
 
329
+ // --- ÇARPIŞMA KONTROLÜ ---
330
  isGrounded = false;
331
+ platforms.forEach(p => {
332
+ // Kutuların çakışması (AABB)
333
+ if (pX < p.x + p.w &&
334
+ pX + pW > p.x &&
335
+ pY < p.y + p.h &&
336
+ pY + pH > p.y) {
 
337
 
338
+ // Sadece yukarıdan düşerken (ayağımız platformun üstüne gelince) dur
339
+ if (vY > 0 && pY + pH - vY <= p.y + 10) { // +10 tolerans
340
+ pY = p.y - pH;
341
+ vY = 0;
342
+ isGrounded = true;
 
 
 
 
 
343
  }
344
  }
345
  });
346
 
347
+ // --- ÖLME (Aşağı Düşme) ---
348
+ // Konteynır yüksekliği 500px. 550'ye gelirse ölmüş sayalım.
349
+ if (pY > 550) {
350
+ gameOver("DÜŞTÜN!");
 
 
 
 
 
 
 
351
  }
352
 
353
+ // --- KAZANMA ---
354
+ if (pX < goalPos.x + 50 &&
355
+ pX + pW > goalPos.x &&
356
+ pY < goalPos.y + 70 &&
357
+ pY + pH > goalPos.y) {
358
+ gameOver("KAZANDIN!", true);
 
 
 
 
 
 
 
 
359
  }
360
 
361
+ // Konumu Güncelle
362
+ player.style.transform = `translate(${pX}px, ${pY}px)`;
363
+
364
+ requestAnimationFrame(loop);
365
+ }
366
+
367
+ // --- YARDIMCI FONKSİYONLAR ---
368
+ function gameOver(text, isWin = false) {
369
+ gameRunning = false;
370
+ msgText.innerText = text;
371
+ msgText.style.color = isWin ? '#76ff03' : '#ff3d00';
372
+ msgOverlay.style.display = 'flex';
373
+ }
374
 
375
+ function resetGame() {
376
+ pX = 50;
377
+ pY = 300;
378
+ vX = 0;
379
+ vY = 0;
380
+ gameRunning = true;
381
+ msgOverlay.style.display = 'none';
382
+ requestAnimationFrame(loop);
383
  }
384
 
385
+ // Otomatik Ölçekleme (Telefona Sığdırma)
386
+ function resizeGame() {
387
+ const winW = window.innerWidth;
388
+ const winH = window.innerHeight;
389
+ // 800x500 oranını koruyarak ekranı doldur
390
+ const scale = Math.min(winW / 800, winH / 500);
391
+ // Çok büyütmesin (masaüstünde dev gibi olmasın)
392
+ const finalScale = Math.min(scale, 1.2);
393
 
394
+ container.style.transform = `scale(${finalScale})`;
395
+ }
396
 
397
+ function spawnSnow() {
398
+ const s = document.createElement('div');
399
+ s.className = 'snowflake';
400
+ s.innerText = '❄';
401
+ s.style.left = Math.random() * 800 + 'px';
402
+ s.style.fontSize = (Math.random() * 15 + 10) + 'px';
403
+ s.style.animationDuration = (Math.random() * 3 + 2) + 's';
404
+ container.appendChild(s);
405
+ setTimeout(() => s.remove(), 5000);
406
  }
407
 
408
+ // --- KONTROLLER ---
409
+ // Klavye
410
+ document.addEventListener('keydown', e => {
411
+ if(e.key === "ArrowRight" || e.key === "d") keys.right = true;
412
+ if(e.key === "ArrowLeft" || e.key === "a") keys.left = true;
413
+ if(e.key === "ArrowUp" || e.key === "w" || e.key === " ") { keys.jump = true; }
414
+ });
415
+ document.addEventListener('keyup', e => {
416
+ if(e.key === "ArrowRight" || e.key === "d") keys.right = false;
417
+ if(e.key === "ArrowLeft" || e.key === "a") keys.left = false;
418
+ if(e.key === "ArrowUp" || e.key === "w" || e.key === " ") keys.jump = false;
419
+ });
420
+
421
+ // Dokunmatik (Mobil)
422
+ const touchHandler = (btn, key, val) => {
423
+ btn.addEventListener('touchstart', (e) => { e.preventDefault(); keys[key] = true; });
424
+ btn.addEventListener('touchend', (e) => { e.preventDefault(); keys[key] = false; });
425
+ // Mouse ile test etmek için
426
+ btn.addEventListener('mousedown', (e) => { keys[key] = true; });
427
+ btn.addEventListener('mouseup', (e) => { keys[key] = false; });
428
+ };
429
+
430
+ touchHandler(btnLeft, 'left');
431
+ touchHandler(btnRight, 'right');
432
+ // Zıplama için sadece basınca tetiklemesi yeterli ama tutarlılık için böyle bırakıyorum
433
+ btnJump.addEventListener('touchstart', (e) => {
434
+ e.preventDefault();
435
+ if(isGrounded) { vY = -jump; isGrounded = false; }
436
+ });
437
+ btnJump.addEventListener('mousedown', (e) => {
438
+ if(isGrounded) { vY = -jump; isGrounded = false; }
439
+ });
440
+
441
  init();
442
 
443
  </script>
 
444
  </body>
445
  </html>