HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1920x1080

95 KB

Share this result

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

Script

Open in browser

<!DOCTYPE html>
<html>
<head>
  <title>Rocket Builder Full Game</title>
  <style>
    body { margin:0; overflow:hidden; }
    button {
      position:absolute;
      padding:10px 15px;
      font-size:16px;
      cursor:pointer;
      z-index:2;
    }
    #engineBtn { top:10px; left:10px; }
    #fuelBtn { top:10px; left:130px; }
    #launchBtn { top:10px; left:270px; }
    #altitude {
      position:absolute;
      top:60px;
      left:10px;
      font-size:20px;
      color:white;
      z-index:2;
    }
  </style>
</head>
<body>

<button id="engineBtn">Add Engine</button>
<button id="fuelBtn">Add Fuel Tank</button>
<button id="launchBtn">Launch</button>
<div id="altitude">Height: 0 m</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js"></script>

<script>
let scene = new THREE.Scene();
scene.background = new THREE.Color(0x444444); // Hangar color

let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100000);
camera.position.set(0,10,30);

let renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;

// LIGHT
let light = new THREE.PointLight(0xffffff, 2);
light.position.set(0,30,30);
scene.add(light);

// FLOOR
let floor = new THREE.Mesh(
  new THREE.PlaneGeometry(200,200),
  new THREE.MeshStandardMaterial({color:0x777777})
);
floor.rotation.x = -Math.PI/2;
scene.add(floor);

// BACK WALL
let backWall = new THREE.Mesh(
  new THREE.BoxGeometry(200,80,2),
  new THREE.MeshStandardMaterial({color:0x555555})
);
backWall.position.set(0,40,-100);
scene.add(backWall);

// STARS (hidden until space)
let starGeo = new THREE.BufferGeometry();
let starVertices = [];
for(let i=0;i<4000;i++){
  starVertices.push(
    THREE.MathUtils.randFloatSpread(50000),
    THREE.MathUtils.randFloatSpread(50000),
    THREE.MathUtils.randFloatSpread(50000)
  );
}
starGeo.setAttribute('position',
  new THREE.Float32BufferAttribute(starVertices,3));
let stars = new THREE.Points(
  starGeo,
  new THREE.PointsMaterial({color:0xffffff})
);
stars.visible = false;
scene.add(stars);

// ROCKET GROUP
let rocket = new THREE.Group();
scene.add(rocket);

let bodyHeight = 4;
let currentHeight = 0;

// BASE BODY
let body = new THREE.Mesh(
  new THREE.CylinderGeometry(1,1,bodyHeight,32),
  new THREE.MeshStandardMaterial({color:0xffffff})
);
body.position.y = bodyHeight/2;
rocket.add(body);
currentHeight = bodyHeight;

// NOSE
let nose = new THREE.Mesh(
  new THREE.ConeGeometry(1,2,32),
  new THREE.MeshStandardMaterial({color:0x00ccff})
);
rocket.add(nose);

// ENGINE HOLDER
let enginePart = null;

// PHYSICS
let thrust=0;
let fuel=0;
let velocity=0;
let gravity=0.02;
let launched=false;
let buildMode=true;

// ADD ENGINE
function addEngine(){
  if(enginePart) return;
  enginePart = new THREE.Mesh(
    new THREE.CylinderGeometry(0.8,1,1,32),
    new THREE.MeshStandardMaterial({color:0x333333})
  );
  enginePart.position.y = 0.5;
  rocket.add(enginePart);
  thrust += 0.4;
}

// ADD FUEL
function addFuel(){
  let tank = new THREE.Mesh(
    new THREE.CylinderGeometry(1,1,2,32),
    new THREE.MeshStandardMaterial({color:0xff4444})
  );
  tank.position.y = currentHeight + 1;
  rocket.add(tank);
  currentHeight += 2;
  fuel += 60;
}

// UPDATE NOSE POSITION
function updateNose(){
  nose.position.y = currentHeight + 1;
}
updateNose();

// BUTTONS
document.getElementById("engineBtn").onclick = ()=>{
  if(buildMode) addEngine();
};
document.getElementById("fuelBtn").onclick = ()=>{
  if(buildMode){
    addFuel();
    updateNose();
  }
};
document.getElementById("launchBtn").onclick = ()=>{
  if(fuel>0 && thrust>0){
    buildMode=false;
    launched=true;
    scene.background = new THREE.Color(0x87CEEB);
  } else {
    alert("Add Engine & Fuel First!");
  }
};

// ANIMATION
function animate(){
  requestAnimationFrame(animate);

  if(launched){
    if(fuel>0){
      velocity += thrust;
      fuel -= 0.5;
    }
    velocity -= gravity;
    rocket.position.y += velocity;

    if(rocket.position.y > 3000){
      scene.background = new THREE.Color(0x000000);
      stars.visible = true;
    }
  }

  // CAMERA FOLLOW
  let desired = new THREE.Vector3(
    0,
    rocket.position.y + 12,
    30
  );
  camera.position.lerp(desired,0.05);
  controls.target.copy(rocket.position);
  controls.update();

  document.getElementById("altitude").innerText =
    "Height: " + rocket.position.y.toFixed(2) + " m";

  renderer.render(scene,camera);
}

animate();
</script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

130KB

Transfer Size

620KB

Content Size

4,104.0ms

Dom Content Loaded

608.0ms

First Paint

4,104.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