-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (150 loc) · 5.99 KB
/
index.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
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta property="og:site_name" content="AlCheesy">
<meta property=“og:title” content="Cheesing Chemistry">
<meta property="og:description" content="The rat has been fooled by his teacher to make a web app that teaches thermochemistry." />
<meta property="og:url" content="https://ratcheese1608.github.io">
<meta property="og:type" content="website">
<meta property="og:image" content="https://ratcheese1608.github.io/Resources/golden%20rat.jpg">
<meta property="og:image:secure_url" content="https://ratcheese1608.github.io/Resources/golden%20rat.jpg">
<meta property="og:image:width" content="320">
<meta property="og:image:height" content="482">
<meta property="og:image:type" content="image/jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://ratcheese1608.github.io/Resources/golden%20rat.jpg">
<title>Funny Kimia</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="only screen and (orientation: portrait)" href="smalley.css">
<script src="script.js"></script>
</head>
<body>
<div id="root">
<div id="battle" class="container">
<div id="battle-scene">
<div id="enemy-container" class="sprite-container">
<div id="enemy-sprite" class="sprite">
<img src="Resources/Evil Labman.jpg" alt="Enemy Sprite">
</div>
<div class="status">
<div class="wrapper">
<p id="enemy-name" class="username">
Evil Labman
</p>
<div id="hp-wrap">
<p>HP</p>
<div class="healthbar">
<div class="hpdisplay"></div>
</div>
</div>
</div>
</div>
</div>
<div id="player-container" class="sprite-container">
<div class="status">
<div class="wrapper">
<p id="player-name" class="username">
Good Labman
</p>
<div id="hp-wrap">
<p>HP</p>
<div class="healthbar">
<div class="hpdisplay"></div>
</div>
</div>
</div>
</div>
<div id="player-sprite" class="sprite">
<img src="Resources/Labman.jpeg" alt="Player Sprite">
</div>
</div>
</div>
<div id="actions">
<div id="actinfo">
<div>
<p>Pilihlah sebuah aksi!</p>
</div>
</div>
<div id="actopt">
<button class="actbtn" id="Att" onClick="attack(player,enemy)">Serang</button>
<button class="actbtn" id='Use' onClick="show_popup(document.querySelector('#item-container'))">Gunakan<br>"Item"</button>
<button class="actbtn" id="Tutor" onClick="show_popup(document.querySelector('#tutorial-container'))">Tutorial</button>
<button class="actbtn" id="PastQ" onClick="show_popup(document.querySelector('#past-container'))">Lihat Soal Lalu</button>
</div>
</div>
</div>
<div id="question-container" class="container pop-up">
<div id="question">
<h1>BONUS</h1>
<h2>Kerjakan Soal berikut untuk menerima bonus "item"</h2>
<div class="wrapper">
<img src="" alt="question pic">
</div>
</div>
<div id="answer">
<button class="ansbtn" onClick="setAnsOpt('A')">A</button>
<button class="ansbtn" onClick="setAnsOpt('B')">B</button>
<button class="ansbtn" onClick="setAnsOpt('C')">C</button>
<button class="ansbtn" onClick="setAnsOpt('D')">D</button>
<button class="ansbtn" onClick="setAnsOpt('E')">E</button>
</div>
<div id="move">
<button id="tolak" onClick="decline()">
<h2>TOLAK</h2>
<p>Lompatkan Soalnya</p>
</button>
<h1>PILIH</h1>
<button id="terima" onClick="accept()">
<h2>TERIMA</h2>
<p>Jawab Soalnya</p>
</button>
</div>
</div>
<div id="tutorial-container" class="container pop-up">
<button onclick="hide_popup(this.parentNode)" class="pop-close">X</button>
<h1 style="width:50%; text-align:center; margin:25px auto;">TUTORIAL</h1>
<p style="white-space:pre-wrap; overflow:auto;">Cara bermain:
1. Pada ronde pertama, kamu hanya bisa menyerang lawan kamu dengan memencet tombol “Serang”.
2. Setelah beberapa ronde, kamu akan diberikan sebuah soal PG dimana jika kamu menjawab dengan benar, kamu akan diberikan suatu hadiah “Item” yang dapat membantu kamu.
3. Kamu juga dapat menolak untuk menjawab. Soal yang kamu lompat dapat kamu lihat kembali melalui tombol "Lihat Soal Lalu".
4. Dengan menggunakan "Lihat Soal Lalu", kamu dapat memencet soal yang telah kamu lompat.
5. Saat HP lawan atau kamu sudah habis, permainan akan berakhir. Jika HP lawan yang lebih awal habis, maka kamu dinyatakan sebagai pemenangnya. Jika HP kamu yang lebih awal habis, maka kamu dinyatakan kalah.
Untuk melihat kembali tutorial ini, pencet saja tombol "Tutorial".
Kamu bisa menutup halaman tutorial ini dengan memencet tombol "X" yang ada di atas.
</p>
</div>
<div id="past-container" class="container pop-up">
<button onclick="hide_popup(this.parentNode)" class="pop-close">X</button>
<h1>SOAL-SOAL LALU</h1>
<div class="wrapper">
<div id="past-template" class="template-pq wrapper">
<img src="">
</div>
</div>
</div>
<div id="item-container" class="container pop-up">
<button onclick="hide_popup(this.parentNode)" class="pop-close">X</button>
<h1>ITEM</h1>
<div class="wrapper">
<button id="item-template" class="template-it wrapper" onclick="item_use(this)">COOKIE</button>
</div>
</div>
<div id="start-container" class="container pop-up">
<h1 style="width: 50%; text-align: center; margin: 25px auto;">Chemistry Smart Mobile Games</h1>
<div>
<button onclick="hide_popup(document.querySelector('#start-container'))">MULAI</button>
<button onclick="show_popup(document.querySelector('#tutorial-container'))">TUTORIAL</button>
</div>
</div>
</div>
<div id="cheese-ball">
<img src="Resources/Meth.png" alt="CHEESE MAGIC">
</div>
<script>
document.querySelector('#start-container').style.display='flex';
document.querySelector('#start-container').style.opacity=1;
</script>
</body>
</html>