Spasi = mulai · ← → = ganti soal · B = kartu barang · H = sembunyikan panel · R = susun ulang · Enter = rekam
⏺ Merekam…
BebiyuTebak BarangSpasi = mulai · ← → = ganti soal · B = kartu barang · H = sembunyikan panel · Enter = rekam
Barangbelum ada barang
Tambah satubelum ada
Soal0/0
Di layar5 barangsusunan
Saat terjawabLetak & besar jawaban diatur lewat penggeser elemen “Jawaban”
Pertanyaan
Huruf pertanyaanukuran100%jarak4,5%
Warna & garis pertanyaanisigarishalotebal100%
Suara
Waktuberpikir6dtahan jawaban3,0d
Detik akhirmulai3d
Kartu barang
Latargeraklaju
UkuranTeman
Tata letak100%Gerakkuatlajuputar0°
Logo
Tambahan
Hitung mundur
TransisiMasuk1,00 dKeluar1,00 d
, jadi selalu belakangan) — makanya __modeMain
tidak bisa dibaca dari sana lebih awal. Diperbaiki di sini saja:
kursor genggam itu dikembalikan ke kursor biasa, sebab menyeret memang
sudah dimatikan untuk pengunjung yang sedang main. */
try{ if(typeof kanvas!=='undefined' && kanvas) kanvas.style.cursor=''; }catch(e){}
var LOGO='aset/internal-9d5c9a0e78f3.png';
var g=document.getElementById('mainGaya');
g.textContent=
'body{background:#241E22}'+
'#panel,#hint,#pustakaKotak{display:none!important}'+
'#panggung{padding:0!important}'+
'.mSampul{position:fixed;inset:0;z-index:900;display:grid;place-items:center;'+
'background:linear-gradient(150deg,#F26324,#E64A9B 58%,#31B8EB);'+
'text-align:center;padding:24px;transition:opacity .35s}'+
'.mSampul.pergi{opacity:0;pointer-events:none}'+
'.mSampul img{width:min(320px,62vw);margin:0 auto 26px}'+
'.mSampul h1{color:#fff;font:800 clamp(22px,4.4vw,38px)/1.15 '+
'"Baloo 2",Nunito,system-ui,sans-serif;margin:0 0 30px;'+
'text-shadow:0 3px 0 rgba(0,0,0,.10)}'+
'.mStatus{min-height:22px;margin:-14px 0 20px;color:#fff;opacity:.9;font:800 14px Nunito,sans-serif}'+
'.mTombol{border:0;cursor:pointer;background:#fff;color:#F26324;'+
'width:min(150px,36vw);height:min(150px,36vw);border-radius:50%;'+
'margin:0 auto;display:grid;place-items:center;'+
'box-shadow:0 14px 36px rgba(0,0,0,.26);transition:transform .16s}'+
'.mTombol:hover{transform:scale(1.06)}'+
'.mTombol:active{transform:scale(.94)}'+
'.mTombol svg{width:42%;height:42%;display:block;fill:currentColor}'+
'.mBalik{position:fixed;left:14px;top:14px;z-index:920;text-decoration:none;'+
'display:inline-flex;align-items:center;gap:8px;background:#fff;'+
'color:#F26324;border-radius:999px;padding:9px 15px 9px 10px;'+
'font:700 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;'+
'box-shadow:0 6px 18px rgba(0,0,0,.24);border:1px solid rgba(242,99,36,.18);'+
'backdrop-filter:blur(10px);transition:transform .16s}'+
'.mBalik:hover,.mBalik:focus{transform:scale(1.05)}'+
'.mBalik:active{transform:scale(.96)}'+
'.mBalikIkon{display:inline-grid;place-items:center;width:24px;height:24px;'+
'border-radius:50%;background:#F26324;color:#fff;font-size:15px;flex:none}';
/* Kanvas memenuhi layar. Ukuran asli menyisakan tepi untuk panel studio;
di mode main panel itu tidak ada, jadi tepinya tidak diperlukan. */
var asliAtur = window.aturUkuran;
window.aturUkuran = function(){
asliAtur();
var sk = Math.min(innerWidth / W, innerHeight / H);
kanvas.style.width = (W * sk) + 'px';
kanvas.style.height = (H * sk) + 'px';
};
/* Simpanan peramban dilewati: yang tampil harus berkas proyek yang
diunggah, bukan simpanan milik pengunjung. */
window.__pjLewatiDB = true;
/* Berkas proyek hasil Ekspor dari studio. Alurnya:
studio → tombol Ekspor → data/tebak.bebiyu.json → unggah ke server
Mengganti isi permainan berarti mengganti SATU berkas JSON kecil ini
saja, bukan mengunggah ulang berkas HTML 300 KB.
Di komputer sendiri (file://) pengambilan berkas ini diblokir peramban,
jadi kalau gagal, setelan bawaan yang dipakai — bukan layar kosong. */
function pramuatProyek(data){
var daftar=[];
function kumpulkan(v){
if(typeof v==='string' && /\.(?:png|jpe?g|webp|gif|svg)(?:[?#].*)?$/i.test(v)) daftar.push(v);
else if(Array.isArray(v)) v.forEach(kumpulkan);
else if(v && typeof v==='object') Object.keys(v).forEach(function(k){ kumpulkan(v[k]); });
}
kumpulkan(data);
daftar=daftar.filter(function(v,i,a){ return a.indexOf(v)===i; });
return Promise.all(daftar.map(function(src){
return new Promise(function(selesai){
var beres=false, im=new Image();
function akhir(ok){ if(beres) return; beres=true; selesai(ok); }
im.onload=function(){ akhir(true); }; im.onerror=function(){ akhir(false); };
im.src=src; if(im.complete && im.naturalWidth) akhir(true);
setTimeout(function(){ akhir(false); },8000);
});
}));
}
function muatProyek(){
if(typeof fetch!=='function') return Promise.resolve(false);
return fetch('data/tebak.bebiyu.json', {cache:'no-store'})
.then(function(r){ return r.ok ? r.json() : null; })
.then(function(d){
if(!d) return false;
return pramuatProyek(d).then(function(){
if(typeof window.pjPasang==='function'){
var terpasang=!!window.pjPasang(d);
/* Enam pilihan di layar kecil dan delapan di layar besar
membuat sasaran sentuh cukup besar untuk anak. */
try{
banyakBarang=matchMedia('(max-width:700px)').matches?6:8;
var jumlah=document.getElementById('banyakBarang');
if(jumlah) jumlah.value=String(banyakBarang);
susunDaftar();
}catch(e){}
return terpasang;
}
return false;
});
})['catch'](function(){ return false; });
}
/* jalan dideklarasikan dengan let, sehingga ia TIDAK pernah menempel di
window — window.jalan selalu undefined. Nama telanjangnya yang harus
dibaca, karena deklarasi let di tingkat naskah tetap ada di rantai
lingkup untuk naskah berikutnya. */
function sedangJalan(){ try{ return !!jalan; }catch(e){ return false; } }
/* Bahasa mengikuti pilihan ID/EN yang sudah dibuat pengunjung di beranda
(disimpan di localStorage). Dibaca di sini juga -- bukan cuma di
beranda -- supaya kalau anak masuk permainan lewat kartu yang sedang
berbahasa Inggris, layar sambutan & tombol kembali di sini pun ikut
Inggris, bukan tiba-tiba balik ke Indonesia. */
var bhs='id';
try{ var _b=localStorage.getItem('bebiyuBhs'); if(_b==='id'||_b==='en') bhs=_b; }catch(e){}
document.documentElement.lang=bhs;
var JUDUL_ID=(document.title.split('—')[0].trim()||'Ayo main');
var JUDUL_EN='Guess the Object with Bebiyu';
var CATATAN_EN='';
var sampul=document.createElement('div');
sampul.className='mSampul';
sampul.innerHTML='
'+
'
'+(bhs==='en'?JUDUL_EN:JUDUL_ID)+'
'+
(bhs==='en'&&CATATAN_EN?'
'+CATATAN_EN+'
':'')+
'
'+(bhs==='en'?'Preparing the game…':'Menyiapkan permainan…')+'
'+
'
';
document.body.appendChild(sampul);
var balik=document.createElement('a');
balik.className='mBalik'; balik.href='../index.html';
balik.setAttribute('aria-label', bhs==='en' ? 'Back to the Bebiyu homepage' : 'Kembali ke halaman utama Bebiyu');
balik.innerHTML='←'+(bhs==='en'?'Home':'Beranda');
document.body.appendChild(balik);
function main(){
sampul.classList.add('pergi');
setTimeout(function(){ sampul.style.display='none'; },380);
if(typeof sembunyiPanel==='function') sembunyiPanel(true);
aturUkuran();
/* Tombol Mulai aslinya yang ditekan, bukan jalan=true langsung: tombol
itulah yang juga membangunkan mesin suara dan menyiapkan pos awal. */
var m=document.getElementById('mulai');
if(m && !sedangJalan()) m.click();
}
sampul.querySelector('.mTombol').onclick=main;
/* Papan tombol: Enter memulai (sama seperti menyentuh tombol besarnya),
Esc kembali ke situs. Dipasang di tahap menangkap (capture) dan
dihentikan penyebarannya (stopPropagation) supaya tombol Enter aslinya
di aplikasi ini — yang di Studio dipakai untuk mulai merekam — tidak
ikut tersentuh saat sedang dimainkan anak-anak. */
addEventListener('keydown', function(e){
var tombolMulai=sampul.querySelector('.mTombol');
if(e.key==='Enter' || e.code==='Enter' || e.code==='NumpadEnter'){
if(sampul.style.display!=='none' && tombolMulai && !tombolMulai.disabled){
e.preventDefault(); e.stopPropagation(); if(e.stopImmediatePropagation) e.stopImmediatePropagation();
main();
}else{
/* Permainan sudah berjalan: Enter tidak untuk apa-apa di sini,
tapi tetap dihentikan supaya tidak membangunkan tombol rekam
milik Studio yang tersembunyi. */
e.preventDefault(); e.stopPropagation(); if(e.stopImmediatePropagation) e.stopImmediatePropagation();
}
return;
}
if(e.key==='Escape' || e.code==='Escape'){
e.preventDefault(); e.stopPropagation(); if(e.stopImmediatePropagation) e.stopImmediatePropagation();
location.href=balik.href;
}
}, true);
if(typeof sembunyiPanel==='function') sembunyiPanel(true);
/* Pertahankan rasio dan tata letak persis seperti berkas proyek. */
aturUkuran();
/* Tombol Mulai aktif setelah data dan gambar selesai dipramuat.
Pengunjung tetap menekan tombolnya sendiri agar audio diizinkan browser. */
var tb=sampul.querySelector('.mTombol');
var status=sampul.querySelector('.mStatus');
tb.disabled=true; tb.style.opacity='.55';
muatProyek().then(function(berhasil){
try{ aturUkuran(); gambar(); }catch(e){}
if(window.bebiyuAktifkanTontonanPotret) window.bebiyuAktifkanTontonanPotret();
tb.removeAttribute('aria-busy');
if(!berhasil){
tb.disabled=false; tb.style.opacity=''; tb.textContent='↻';
tb.setAttribute('aria-label',bhs==='en'?'Reload game':'Muat ulang permainan');
tb.onclick=function(){ location.reload(); };
status.textContent=bhs==='en'?'The game could not be loaded. Tap to retry.':'Permainan belum dapat dimuat. Ketuk untuk mencoba lagi.';
return;
}
tb.disabled=false; tb.style.opacity='';
status.textContent=bhs==='en'?'Ready! Tap to start.':'Siap! Ketuk untuk mulai.';
})['catch'](function(){
tb.disabled=false; tb.style.opacity=''; tb.textContent='↻'; tb.removeAttribute('aria-busy');
tb.onclick=function(){ location.reload(); };
status.textContent=bhs==='en'?'Tap to retry.':'Ketuk untuk mencoba lagi.';
});
/* Kalau permainannya selesai, layar sambutan kembali muncul supaya anak
bisa memulai lagi sendiri tanpa perlu tombol apa pun dari kreator. */
var pernahMain=false;
setInterval(function(){
if(sedangJalan()){ pernahMain=true; return; }
if(pernahMain && sampul.style.display==='none'){
pernahMain=false;
sampul.style.display=''; sampul.classList.remove('pergi');
sampul.querySelector('h1').textContent = bhs==='en' ? 'Play again?' : 'Main lagi?';
}
},800);
})();