HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
26.1 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>Obby 3D</title><script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script><style>*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none}html,body{width:100%;height:100%;overflow:hidden;background:#87CEEB;font-family:system-ui;user-select:none}#ui{position:fixed;top:10px;left:10px;z-index:20;color:#fff;background:#00000055;padding:8px 12px;border-radius:8px;backdrop-filter:blur(4px);font-size:12px;line-height:1.4}#pesan{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;font-size:26px;font-weight:bold;color:#fff;background:#00b341dd;padding:15px 25px;border-radius:12px;display:none;text-align:center}#joystick{position:fixed;left:20px;bottom:20px;width:110px;height:110px;background:#ffffff22;border:3px solid #ffffff77;border-radius:50%;z-index:30;backdrop-filter:blur(4px)}#joystick-thumb{position:absolute;left:50%;top:50%;width:45px;height:45px;margin:-22px 0 0 -22px;background:#ffffffaa;border-radius:50%}#tombol-lompat{position:fixed;right:20px;bottom:25px;width:85px;height:85px;background:#ff3b3baa;border:3px solid #fff;border-radius:50%;z-index:30;color:#fff;font-weight:bold;font-size:16px;display:flex;align-items:center;justify-content:center}#tombol-lompat:active{background:#ff0000cc;transform:scale(0.92)}</style></head><body><div id="ui"><div><strong>OBBY 3D</strong></div><div>🕹️ Geser kiri = Jalan</div><div>🔴 Kanan = Lompat</div><div>👆 Seret layar = Putar Kamera</div><div>⏱️ Waktu: <b id="waktu">0.0</b> dtk</div></div><div id="pesan">🎉 SAMPAI FINIS!<br>Waktu: <span id="waktu-akhir">0</span> dtk</div><div id="joystick"><div id="joystick-thumb"></div></div><div id="tombol-lompat">LOMPAT</div><script>const scene=new THREE.Scene();scene.background=new THREE.Color(0x87CEEB);scene.fog=new THREE.Fog(0x87CEEB,35,130);const camera=new THREE.PerspectiveCamera(65,innerWidth/innerHeight,0.1,300);camera.position.set(0,6,12);const renderer=new THREE.WebGLRenderer({antialias:true});renderer.setSize(innerWidth,innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));renderer.shadowMap.enabled=true;document.body.appendChild(renderer.domElement);const controls=new THREE.OrbitControls(camera,renderer.domElement);controls.enableDamping=true;controls.dampingFactor=0.08;controls.minDistance=5;controls.maxDistance=25;controls.maxPolarAngle=Math.PI/2.15;controls.target.set(0,1.5,0);const matahari=new THREE.DirectionalLight(0xffffff,1.2);matahari.position.set(20,40,15);matahari.castShadow=true;scene.add(matahari);scene.add(new THREE.AmbientLight(0xffffff,0.55));const pemain=new THREE.Mesh(new THREE.BoxGeometry(1,1.8,1),new THREE.MeshStandardMaterial({color:0xff3b3b,roughness:0.8}));pemain.position.set(0,3,0);pemain.castShadow=true;scene.add(pemain);const fisika={vx:0,vy:0,vz:0,gravitasi:-0.025,lompat:0.45,jalan:0.16,gesek:0.82};const ukPemain=new THREE.Vector3(1,1.8,1);let diTanah=false,selesai=false,waktuMain=0;const jam=new THREE.Clock();const semuaPlatform=[];const warna=[0x2ecc71,0x3498db,0xf1c40f,0xe67e22,0x9b59b6,0x1abc9c];function buatPlatform(x,y,z,px,py,pz,w=0x555555,gerak=false,putar=false){const p=new THREE.Mesh(new THREE.BoxGeometry(px,py,pz),new THREE.MeshStandardMaterial({color:w,roughness:0.8}));p.position.set(x,y,z);p.castShadow=p.receiveShadow=true;p.userData={ukuran:new THREE.Vector3(px,py,pz),gerak,putar,awal:p.position.clone(),t:Math.random()*Math.PI*2};scene.add(p);semuaPlatform.push(p);return p;}buatPlatform(0,-0.5,0,10,1,10,warna[0]);buatPlatform(6,0.5,0,3,1,3,warna[1]);buatPlatform(11,1.2,0,2,1,2,warna[2]);buatPlatform(14,2,2,2,1,2,warna[3]);buatPlatform(14,2.8,5,2,1,2,warna[4]);buatPlatform(11,3.5,7,2,1,2,warna[5],true);buatPlatform(6,4,7,1.2,1,1.2,warna[0]);buatPlatform(1,4.5,7,1.2,1,1.2,warna[1],false,true);buatPlatform(-4,5,7,2,1,2,warna[2]);buatPlatform(-7,5.8,5,1.5,1,1.5,warna[3]);buatPlatform(-9,6.5,2,1.5,1,1.5,warna[4],true);buatPlatform(-9,7.2,-2,1.2,1,1.2,warna[5]);buatPlatform(-6,8,-4,1.2,1,1.2,warna[0],false,true);buatPlatform(-2,8.5,-4,2,1,2,warna[1]);buatPlatform(3,9,-4,2,1,2,warna[2]);const finis=buatPlatform(8,9.5,-4,4,1,4,0x00e676);finis.userData.akhir=true;const tiang=new THREE.Mesh(new THREE.CylinderGeometry(0.15,0.15,5,8),new THREE.MeshStandardMaterial({color:0xffffff}));tiang.position.set(8,12.5,-4);scene.add(tiang);const joy=document.getElementById('joystick');const joyJempol=document.getElementById('joystick-thumb');const tombolLompat=document.getElementById('tombol-lompat');let joyAktif=false,joyX=0,joyY=0,tekanLompat=false;const batasJoy=45;joy.addEventListener('touchstart',e=>{e.preventDefault();joyAktif=true},{passive:false});joy.addEventListener('touchmove',e=>{e.preventDefault();const t=e.changedTouches[0];const rect=joy.getBoundingClientRect();let dx=t.clientX-(rect.left+rect.width/2);let dy=t.clientY-(rect.top+rect.height/2);const jarak=Math.hypot(dx,dy);if(jarak>batasJoy){dx=dx/jarak*batasJoy;dy=dy/jarak*batasJoy;}joyJempol.style.transform=`translate(${dx}px,${dy}px)`;joyX=dx/batasJoy;joyY=dy/batasJoy;},{passive:false});function resetJoy(){joyAktif=false;joyX=joyY=0;joyJempol.style.transform='translate(0,0)';}joy.addEventListener('touchend',resetJoy);joy.addEventListener('touchcancel',resetJoy);tombolLompat.addEventListener('touchstart',e=>{e.preventDefault();tekanLompat=true},{passive:false});tombolLompat.addEventListener('touchend',e=>{e.preventDefault();tekanLompat=false},{passive:false});function cekTabrakan(sumbu){for(const plat of semuaPlatform){const a=pemain.position,b=plat.position,ua=ukPemain,ub=plat.userData.ukuran;const kena=Math.abs(a.x-b.x)<(ua.x+ub.x)/2&&Math.abs(a.y-b.y)<(ua.y+ub.y)/2&&Math.abs(a.z-b.z)<(ua.z+ub.z)/2;if(!kena)continue;if(sumbu==='y'){if(fisika.vy<0){a.y=b.y+(ub.y+ua.y)/2;fisika.vy=0;diTanah=true;}else if(fisika.vy>0){a.y=b.y-(ub.y+ua.y)/2;fisika.vy=0;}if(plat.userData.akhir&&!selesai){selesai=true;document.getElementById('waktu-akhir').textContent=waktuMain.toFixed(1);document.getElementById('pesan').style.display='block';}}if(sumbu==='x')a.x-=fisika.vx;if(sumbu==='z')a.z-=fisika.vz;}}function main(){requestAnimationFrame(main);const dt=Math.min(jam.getDelta(),0.05);if(!selesai)waktuMain+=dt;document.getElementById('waktu').textContent=waktuMain.toFixed(1);semuaPlatform.forEach(p=>{if(p.userData.gerak){p.userData.t+=dt*1.5;p.position.y=p.userData.awal.y+Math.sin(p.userData.t)*1.2;}if(p.userData.putar)p.rotation.y+=dt*1.2;});const depan=new THREE.Vector3(),kanan=new THREE.Vector3();camera.getWorldDirection(depan);depan.y=0;depan.normalize();kanan.crossVectors(depan,new THREE.Vector3(0,1,0)).normalize();if(joyAktif){fisika.vx+=(depan.x*-joyY+kanan.x*joyX)*fisika.jalan;fisika.vz+=(depan.z*-joyY+kanan.z*joyX)*fisika.jalan;}if(tekanLompat&&diTanah){fisika.vy=fisika.lompat;diTanah=false;}fisika.vy+=fisika.gravitasi;fisika.vx*=fisika.gesek;fisika.vz*=fisika.gesek;pemain.position.x+=fisika.vx;cekTabrakan('x');pemain.position.y+=fisika.vy;cekTabrakan('y');pemain.position.z+=fisika.vz;cekTabrakan('z');if(pemain.position.y<-12){pemain.position.set(0,3,0);fisika.vx=fisika.vy=fisika.vz=0;}controls.target.lerp(pemain.position.clone().add(new THREE.Vector3(0,1,0)),0.12);controls.update();renderer.render(scene,camera);}main();window.addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight);});</script></body></html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
171KB
Transfer Size
662KB
Content Size
345.0ms
Dom Content Loaded
392.0ms
First Paint
345.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests