-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.html
139 lines (124 loc) · 3.96 KB
/
intro.html
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
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoGame - Kurallar</title>
<style>
/* Genel Stil */
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #1e1e1e;
color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Intro Container */
.intro-container {
background-color: #292929;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
max-width: 800px;
text-align: center;
color: #f1f1f1;
overflow-y: auto;
}
/* Başlıklar */
.intro-container h2 {
color: #ffcc00;
margin-bottom: 20px;
font-size: 28px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}
.intro-container h3 {
color: #ffa726;
margin-top: 20px;
font-size: 24px;
}
/* Paragraflar ve Liste */
.intro-container p {
color: #dddddd;
line-height: 1.6;
font-size: 16px;
margin: 10px 0;
}
.intro-container ul {
list-style-type: none;
padding: 0;
}
.intro-container ul li {
background-color: #383838;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.intro-container ul li strong {
color: #ffcc00;
}
/* Buton */
button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s, transform 0.2s;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
button:active {
background-color: #003f7f;
transform: scale(1);
}
/* Scroll için */
.intro-container {
max-height: 90vh;
overflow-y: auto;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #444;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<div class="intro-container">
<h2>GeoGame - Oyun Kuralları</h2>
<p>Bu oyun, Hacettepe Harita Mühendisliği binasını ele geçirmeye çalışan bir saldırı simülasyonudur. Elinizdeki GIS Coin ile asker alabilir ve savunma birimlerini yok etmeye çalışır, bütün birimler yok edildiğinde kazanırsınız.</p>
<h3>Asker Türleri</h3>
<ul>
<li><strong>Piyade</strong>: 100 GIS Coin - 10 piyade bir "squad" oluşturur. Bu birim sadece harita üzerindeki yollardan ilerleyebilir.</li>
<li><strong>Atlı Asker</strong>: 350 GIS Coin - 5 atlı asker bir "squad" oluşturur.Piyadeye benzer şekilde sadece yollardan ilerler</li>
<li><strong>Tank</strong>: 500 GIS Coin - Her bir tank tek başına güçlü bir birimdir. Düz çizgi halinde ilerler.</li>
<li><strong>Uçak</strong>: 600 GIS Coin - Hızlı hareket eden bir birim, doğrudan hedefe uçar.</li>
<li><strong>Satın alım sonrası</strong>: Herhangi bir birimi seçin ve harita üzerinde gitmesini istediğiniz lokasyona tıklayın, ardından o rotayı onaylamak için confirm route butonuna tıklayın. Bu işlemlerden sonra mobilize units butonu ile birliklerinizi hareket ettirin. Pozisyonlarınızdan eminseniz savaşı başlatın. Çünkü birimleriniz sabit kalacaktır bu tek seferde dikkatlice yapılması gereken bir plan.</li>
<li><strong>Confirm Route</strong>: Seçilen rotaları onaylar</li>
<li><strong>Mobilize Units</strong>: Birlikleri hareket ettirir.</li>
<li><strong>Start Battle</strong>: Savaşı başlatır.</li>
</ul>
<button onclick="returnToGame()">Oyuna Dön</button>
</div>
<script>
// Tarayıcıda bir önceki sayfaya dönerek oyun ekranına geri dön
function returnToGame() {
history.back();
}
</script>
</body>
</html>