From 9d400af78727edc7e96baa283ccac35aa0ac5cb7 Mon Sep 17 00:00:00 2001 From: RCheese Date: Wed, 12 Jul 2023 02:03:27 +0700 Subject: [PATCH] new update or something idk --- index.html | 33 +++++++++--- script.js | 100 ++++++++++++++++++++++++++++------- smalley.css | 13 ++++- storageIndex.json | 9 ++++ style.css | 129 +++++++++++++++++++++++++++++++++------------- 5 files changed, 221 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index 32748e4..8712a6c 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + @@ -69,9 +69,9 @@
- + - +
@@ -103,19 +103,36 @@

TERIMA

- -

TUTORIAL

-

Cara bermain: + +

TUTORIAL

+

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 tolak dapat kamu lihat kembali melalui tombol "Lihat Soal Lalu" -4. 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. +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.

+
+ +

SOAL-SOAL LALU

+
+
+ +
+
+
+
+ +

ITEM

+
+ +
+

Chemistry Smart Mobile Games

diff --git a/script.js b/script.js index 3b2b1ff..888ac32 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,15 @@ -var serv={}, cImage, promised=0; +var serv={}; +var qCount={def:8, sp:''}; +var itemCount={val:0}; +var promised=0; +var skipQ=new Set(); var qPic; var qCont; var infbox; var cheese; var resmsg; +var pastmp; +var itmtmp; var defmsg="Pilihlah sebuah aksi!" var lasmsg=defmsg; @@ -81,36 +87,83 @@ function hide_popup(target){ setTimeout(()=>target.style.display='none',200); } -function q_event() { +function q_event(n) { console.log('Question TIME!'); - show_popup(qCont); + lock = true; + if (typeof(n)=="number") { + console.log("spec",qCount) + hide_popup(document.querySelector("#past-container")) + qCount.sp=n; + setTimeout(()=>{ + qPic.src=serv[stor].Path+'/'+serv[stor].Images[n]; + show_popup(qCont); + },200); + } else { + turn = 1; + if (qCount.def<=9) { + show_popup(qCont); + } + } } -function decline() { +function closeQ() { + console.log(qCount) hide_popup(qCont); setTimeout(()=>{ - // next images - qPic.src=serv[stor].Path+'/'+serv[stor].Images[++cImage]; lock=false; - },200); - turn = 1; + },500); + ansOpt=''; } function accept() { - if (serv[stor].Answers[cImage] == ansOpt) { - console.log("Selamat kamu betul") + if (ansOpt=='') return; + console.log(qCount) + a = qCount.def; + if (typeof(qCount.sp)=="number") { + console.log('hullo') + a = qCount.sp; + document.querySelector("#pq-"+a).remove(); + skipQ.delete(a); + qCount.sp=''; + } else qCount.def++; + if (serv[stor].Answers[a] == ansOpt) { + updtinfo("Selamat kamu betul! Kamu telah mendapatkan sebuah ITEM!"); + console.log("Selamat kamu betul"); + let clone = itmtmp.cloneNode(true); + clone.id=""; + clone.textContent=serv[stor].Items[itemCount.val++]; + itemCount.val%=7; + itmtmp.parentNode.appendChild(clone); } else { + updtinfo("Gawat! Kamu ternyata salah!"); console.log("YAHAHAH KAMU SALAH") } - decline() + qPic.src=serv[stor].Path+'/'+serv[stor].Images[qCount.def]; + closeQ() +} + +function decline() { + closeQ(); + console.log(qCount) + a = qCount.def; + if (typeof(qCount.sp)=="number") a = qCount.sp; + else qCount.def++; + if (skipQ.has(a)==false) { + skipQ.add(a); + let clone = pastmp.cloneNode(true); + clone.id="pq-"+a; + clone.children[0].src=serv[stor].Path+'/'+serv[stor].Images[a]; + clone.setAttribute("onclick","q_event("+a+")"); + pastmp.parentNode.appendChild(clone); + } } function upd_hel(item, dec) { - item.hp=Math.max(item.hp-dec, 0); + item.hp=Math.min(Math.max(item.hp-dec, 0), 100); item.elm.style.width=item.hp+'%'; setTimeout(()=>{ if (item.hp==0) { - lock=trye + lock=true if (item.id=="pl") { window.location.href = "lose.html"; } else { @@ -147,7 +200,6 @@ function cheesefly(source, target) { function attack(source, target) { if (lock && source==player) return if (source==player && turn%3==0) { - lock = true; q_event(); return; } @@ -162,13 +214,24 @@ function attack(source, target) { },600); } else { setTimeout(()=>{ - upd_hel(player,20); - updtinfo("Sang Golden Rat menghancurkan Sang Regular Rat!") + upd_hel(player,30); + updtinfo("Sang Golden Rat menghancurkan Sang Regular Rat!"); setTimeout(()=>lock=false, 650); },600); } } +function item_use(target) { + lock = 1; + hide_popup(document.querySelector("#item-container")); + target.remove(); + setTimeout(()=>{ + upd_hel(player,-60); + updtinfo("Kamu telah menggunakan ITEM!"); + }, 200); + setTimeout(()=>lock=false, 1000); +} + // main basically function main() { console.log("serv",serv); @@ -184,8 +247,7 @@ function main() { i++; },250); // set the first pic - cImage=0; - qPic.src=serv[stor].Path+'/'+serv[stor].Images[cImage]; + qPic.src=serv[stor].Path+'/'+serv[stor].Images[qCount.def]; } // load variables & api only when web has loaded @@ -198,6 +260,8 @@ window.onload = ()=> { player.img = document.querySelector("#player-container .sprite img"); infbox = document.querySelector("#actinfo p") cheese = document.querySelector("#cheese-ball") + pastmp = document.querySelector("#past-template") + itmtmp = document.querySelector("#item-template") getData('storageIndex.json', main) // getData('random.json', main) lock=false; diff --git a/smalley.css b/smalley.css index 9ea9603..2ac4979 100644 --- a/smalley.css +++ b/smalley.css @@ -4,7 +4,6 @@ #battle { width: 100%; - border: none; } .container { @@ -41,11 +40,23 @@ flex-basis: 18%; } +.pop-up { + width: 95vw; +} + #start-container > * { width: 100% !important; box-sizing: border-box; } +#past-container .wrapper > * { + flex-basis: 95%; +} + +#past-container .wrapper{ + padding: 5px; +} + #cheese-ball { width: 75px; } \ No newline at end of file diff --git a/storageIndex.json b/storageIndex.json index c1900b2..5b56cad 100644 --- a/storageIndex.json +++ b/storageIndex.json @@ -28,5 +28,14 @@ "A", "A", "A" + ], + "Items":[ + "Astronaut Food", + "Instant Noodles", + "Hot Dog", + "Steak", + "Legendary Hero", + "Ice cream", + "Croquet" ] } \ No newline at end of file diff --git a/style.css b/style.css index c02d716..5bd2511 100644 --- a/style.css +++ b/style.css @@ -6,11 +6,15 @@ font-size: 1.2vw; } +html { + overflow: hidden; +} + body { width: 100vw; height: 100vh; - min-width: 380px; - min-height: 420px; + overflow: auto; +/* background-color: red;*/ } .wrapper { @@ -28,33 +32,25 @@ div { flex-direction: column; } - #root { - height: 100%; width: 100%; - overflow: hidden; - display: flex; + height: 100%; + overflow: auto; justify-content: center; background-color: #ACDEFD; } .container { - display: flex; overflow: hidden; padding: 25px; } -#question-container { - margin-bottom: 0; -} - /*battling*/ #battle { margin: auto; height: 100%; width: 75%; /* border: 5px solid darkgreen;*/ - display: flex; justify-content: space-around; background-color: lightgreen; padding: 0 !important; @@ -80,7 +76,6 @@ div { } .sprite-container { - display: flex; height: calc(100%/3); flex-direction: row !important; } @@ -122,7 +117,6 @@ div { .status { width: 35%; height: 30%; - display: flex; justify-content: space-around; background-color: lightyellow; padding: 5px 10px; @@ -139,7 +133,6 @@ div { .status #hp-wrap { width: 75%; flex-basis: 50%; - display: flex; background-color: #333333; padding: 5px 5px; border-radius: 10px; @@ -182,7 +175,6 @@ div { } #actions { - display: flex; margin-top: 0; padding: 5px 2.5px; background-color: dimgray; @@ -236,19 +228,31 @@ div { } .pop-up { - position: absolute; + position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); - height: 80%; - width: 70%; + width: 70vw; + height: 80vh; border-radius: 25px; z-index: 10; display: none; opacity: 0; } +.pop-close { + width: 25px; + height: 25px; +} + +.pop-up > h1 { + width: 50%; + text-align: center; + margin: 20px auto !important; +} + /* event question */ + #question-container { border: 5px solid yellow; background-color: lightgoldenrodyellow; @@ -258,7 +262,6 @@ div { border: 2px solid red; text-align: center; padding: 1vh; - display: flex; justify-content: space-between; height: 50%; } @@ -270,9 +273,10 @@ div { } #question img { - height: auto; - width: auto; - max-height: 100%; + display: block; + width: 100%; + height: 100%; + object-fit: contain; margin: 0 auto; } @@ -294,7 +298,6 @@ div { #move { flex-basis: 10%; - display: flex; justify-content: space-around; flex-direction: row; } @@ -310,30 +313,23 @@ div { align-items: flex-end; } -#tutorial-container > button { - width: 25px; -} - -#tutorial-container > h1, #tutorial-container > p { +#tutorial-container > h1, #tutorial-container > p, +#start-container > h1, #start-container > div, +#past-container > h1, #past-container > div, +#item-container > h1, #item-container > div { margin: auto; padding: 20px; background-color: white; border-radius: 25px; } + #start-container { background-color: powderblue; border: 10px solid dodgerblue; z-index: 4; } -#start-container > h1, #start-container > div { - margin: auto; - padding: 20px; - background-color: white; - border-radius: 25px; -} - #start-container > div { width: 50%; height: 70%; @@ -344,6 +340,67 @@ div { flex-basis: 40%; } +#past-container { + background-color: plum; + border: 10px solid blueviolet; + align-items: flex-end; +} + +#past-container .wrapper { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +#past-container .wrapper > * { + flex-basis: 45%; + margin: 10px auto; +} + +#past-template { + display: none; +} + +.template-pq { + border: 5px solid red; + height: 45%; +} + +.template-pq > img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +#item-container { + background-color: burlywood; + border: 10px solid chocolate; + align-items: flex-end; +} + +#item-container .wrapper { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +#item-container .wrapper > * { + flex-basis: 95%; + margin: 10px auto; +} + +#item-template { + display: none; +} + +.template-it { + align-items: center; + border: 5px solid green; + height: 20%; + text-align: center; + background-color: lawngreen; +} #cheese-ball { position: absolute;